Coderhyp'Blog

React组件化开发React组件思想 – 分而治之根据组件定义方式 函数组件：functional Component 没有生命周期 也会被更新并挂载，但是没有生命周期函数 没有this对象 没有内部状态 类: Class Component 组件名称大写字符开头（不管类还是函数组件） jsx中标签要小写 因为标签大写会被当成组件 类组件需要继承自 React.Component 类组件必须实现render函数 Render函数的返回值当render被调用 ，他会检查 this.props和this.state的变化，并返回一下类型之一： React元素 通常由JSX创建 数组或者fragments：使render方法可以返回多个元素 Portals 可以渲染子节点到不同的DOM子树中 字符串 数值类型 布尔类型或者null ：什么都不渲染 根据组件内部是否有状态需要维护 无状态组件 有状态组件 根据组件的职责 展示型组件 容器型组件 生命周期-从销毁到创建的过程 生命周期 – 分为很多阶段 装载阶段（Mount） 更新过程（Updating） ...

React脚手架前端工程的复杂化 如果只是开发小的demo 不需要考虑这些复杂的问题： 目录结构如何组织划分 如何管理文件之间的相互依赖 如何管理第三方模块的依赖 项目发布前如何压缩、打包项目 。。。 前端项目越来越复杂化： css可能是使用less、sass等预处理器进行编写，我们需要将它们转成普通的css才能被浏览器解析 JavaScript代码不再只是编写在几个文件中，而是通过模块化的方式，被组成在成百上千个文件中，我们需要通过模块化的技术来管理它们之间的相互依赖 项目需要依赖很多的第三方库，如何更好的管理它们（比如管理它们的依赖、版本升级等） 脚手架的出现，就是帮助我们解决这一系列问题的 脚手架让项目从搭建到开发，再到部署，整个流程变得快速和便捷 包管理工具npm Node Package Manager yarn Yarn 是为了弥补 npm 的一些缺陷而出现的. npm install -g yarn npm和yarn命令对比 创建React项目create-react-app 注意： 项目名称不包含大写 项目结 ...

React特点： 声明式编程 多平台适配 组件化开发 React开发依赖： react：包含react必须的核心代码 react-dom：react渲染在不同平台所需要的核心代码 babel：将jsx转换成React代码的工具 jsx(JavaScript XML)：普通的HTML方式开发界面 通过Babel自动转成React.renderElement jSX语法使用的前提：12<script src="../react/babel.min.js"></script><script type="text/babel"></script> JSX是一种JavaScript语法扩展（extension） 也在很多地方称为 JavaScript XML react all in js React选择JSX原因 React认为渲染逻辑本质上与其他UI逻辑存在内在耦合 比如UI需要绑定事件（button、a原生等等） 比如UI中需要展示数据状态，在某些状态发生改变时，又需要改变UI； ...

项目记录登陆退出 通过vue ui新建项目 添加element-ui拓展 梳理项目结构 按需导入 在element.js中import Vue.use使用 字体图标的使用 将font文件夹和style.css放入assets main.js引用style.css 在style.css中找到小图标的名字 class中使用 如:prefix-icon=”icon-shocked” 表单绑定: v-model data中定义loginForm 用户名密码使用v-model双向绑定 表单添加验证规则 为el-form通过属性绑定指定rules 定义rules 为不同的表单通过prop指定验证规则 注:加给item 重置功能 拿到表单实例对象 通过为表单添加ref=’ ‘,里面的值就是组件的实例对象 this.$refs.loginFormRef.resetFields(); 登陆弹窗功能 element.js中import {Message} from “element-ui”,并且在原型上定义Vue.prototype.$message=Messag ...

面经融都 CSS3特性 闭包 浏览器缓存 事件委托 项目难点 对Vue的了解 原型 清除浮动 小程序 节流防抖 旷视科技一： 堆 栈 css position mvvm/mvc 高内聚低耦合 http状态码 vue组件通信 set map 数组排序 数组内置方法 水平垂直居中 vue生命周期 destoryed使用场景 computed和watch webpack热更新 https://juejin.im/post/6844904008432222215 编译器 二： vue路由原理 v-if v-show vue - router hash history 闭包缺点 nginx vuex 节流防抖函数优化 es6用过的 Promise All 联想 Promise js异步 es6 vue生命周期 父子组件的生命周期顺序 子组件在父组件的beforemounted生命钩子完后才能后就开始实例化自己，并走完自己的整个生命周期等子组件的生命周期构建完成后挂载到父组件上，父组件的mounted才会执行，所以子组件先父组件完成生命周 ...

TypeScript的好处JS的缺点 ES5之前使用var关键字作用域问题 JS没有加入类型检测机制 JS的数组类型不是连续的内存空间 TS的特点始于JavaScript，归于JavaScript TypeScript从今天数以百万计的JavaScript开发者所熟悉的语法和语义开始。使用现有的JavaScript代码，包括流行的JavaScript库，并从JavaScript代码中调用TypeScript代码。 TypeScript可以编译出纯净、 简洁的JavaScript代码，并且可以运行在任何浏览器上、Node.js环境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中。 TypeScript是一个强大的工具，用于构建大型项目 类型允许JavaScript开发者在开发JavaScript应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。 类型是可选的，类型推断让一些类型的注释使你的代码的静态验证有很大的不同。类型让你定义软件组件之间的接口和洞察现有JavaScript库的行为。 拥有先进的 JavaScript TypeScr ...

Promise什么情况下用到promise？ 一般情况下是有异步操作时，使用Promise对这个异步操作进行封装,new->构造函数 （1.保存了一些状态信息 2.执行传入的函数）在执行传入的回调函数时。会传入两个参数，resolve ， reject。本身又是函数 12345678910111213141516new Promise((resolve, reject) => { setTimeout(()=>{ //成功的时候调用resolve 下一步到.then resolve('hello world') //失败的时候调用reject 下一步到 .catch reject('error message') },1000)}).then((data)=>{ //1.100行的处理代码 console.log(data); console.log(data); console.log(data); console. ...

CSS3CSS3的新特性 属性选择器 如 input[value] 必须是input且具有value属性 input[type=’text’] 选择属性=值的某些元素 div[class^=icon]选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 section[class$=data] 选择首先是section 然后具有class属性 并且属性值必须是data结尾的元素 section[class*=data]选择首先是section 然后具有class属性 并且属性值含有data的元素 类选择器和属性选择器 伪类选择器 权重都是 10 结构伪类选择器 E:first-child 匹配父元素中的第一个子元素E E:last-child 匹配父元素中最后一个E元素 E:nth-child(n) 选择某个父元素的一个或多个个特定的子元素 n可以是数字关键字和公式 隔行变色:even(偶数) odd(奇数) nth-child(n) 只能是n这个字母 2n 选择偶数的孩子 2n+1 奇数 5n n+5 -n+5(前五个) E ...

在 JavaScript 中，构造器其实就是一个普通的函数。当使用 new 操作符 来作用这个函数时，它就可以被称为构造方法（构造函数）。 js分为函数对象和普通对象，每个对象都有__proto__属性，但是只有函数对象才有prototype属性 Object、Function都是js内置的函数, 类似的还有我们常用到的Array、RegExp、Date、Boolean、Number、String 属性__proto__是一个对象，它有两个属性，constructor和__proto__； 原型对象prototype有一个默认的constructor属性，用于记录实例是由哪个构造函数创建； Person.prototype.constructor == Person // 准则1：原型对象（即Person.prototype）的constructor指向构造函数本身 person01.proto == Person.prototype // 准则2：实例（即person01）的__proto__和原型对象指向同一个地方 图示： 面试场景面试官：谈谈 ...

阿里云服务器部署多个项目在部署了博客之后就没对项目部署进行研究， 今天想要实现在博客内演示项目 。想要在同一个域名下通过不通的端口来实现，踩了不少坑，浪费了好多时间，在这里记录一下，希望能看到这篇博客的小伙伴能避免踩雷 首先是打开我们的控制中心，进入远程连接 进入终端以后打开宝塔面板 如果没有安装宝塔面板在控制台运行如下代码 yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh 进入宝塔面板后 拿我的站点举例。我的域名是coderhyp.top,默认端口是80端口 那么直接访问我的网址会访问我已经部署过的博客 现在我想要部署做的另外一个项目 具体步骤是： 选择网站那一栏的添加站点，这一步可以先把填写公网的ip 确认后在修改 创建成功以后 在图中那一栏 填写 域名:端口号 然后选择网站目录 选择我们打包好的dist文件夹放置的位置，设置为设置完的域名下的根目录 接下来是很重要的一 ...