XnmkLu's Tea

Appearance

React 知识点整理 ​

React 是什么？ ​

首先它是一个处理用户界面的视图层框架，也就是 react 本身就是一个只负责显示部分的框架，真正严格说来说它都不能算作一个框架，这就决定了 react 本身是不太复杂的，不像 Angular 那样要处理很多事务，但这个框架有一些自己的独特设计，打破了之前开发方式的思维定势，这个框架的组织方式也抛弃了传统的继承模式，而是使用了组件化的方式来开发。

下来就是比较有特点的是它采用 JSX 表达式，这是在 react 里才有的一种表达方式，我们用它来处理数据和 DOM 之间的关系，而不用我们再去操作 DOM，它把原本静态的模板字符串变成了 JSX 表达式，这使得在编程的时候灵活性会更大一些。

最后 react 还有一个突出的特点，就是react 采用的虚拟 DOM 的机制，虚拟 DOM 是一种机制，简单的说就是它只有在必要的时候才去操作 DOM，它通过减少低效的操作来提高整体性能。

  • 视图层框架 react 框架本身提供就是页面显示的功能，跟显示有关的主要是两个事，一个是能把数据变成 DOM 显示出来，而另外一件事就是处理在 DOM 上触发的事件，把 DOM 事件在转回给数据，在 Angular 或者 Vue 这中双向数据绑定的框架里，这两件事是放在一起做的，而在 React 上这是两个分开的部分，

    这个框架是一个声明式的框架，也是在它里面你只需要声明你想干什么就够了，涉及具体怎么做 react 框架会帮你完成，它不用像在命令式（Jquery）编程里那样，去指挥它怎么渲染，怎么调用之类的，而在 react 中只需要定义好数据和 DOM 之间的对应关系就可以了，当数据该改变的时候 DOM 会跟着自动变化。

    react 数据处理方式，它采用数据驱动 DOM，也就是数据变了 DOM 会跟着变，而 DOM 上的变化不像双向绑定那样直接反馈数据，而是要通过事件把 DOM 变化返回给数据。

  • 组件化

    在 react 中推荐使用组件的方式来组织项目结构，而不是采用传统的面向对象的方式，通过继承来实现代码的封装，这是因为组合相当于继承更灵活，通过组合的方式也不会受到继承里的约束。

    react 组件提供了 state 和 props 两个主要的属性，state 就是 react 里的数据，或者称它为状态，props 是做父子组件通信用的，子组件可以通过 props 拿到父组件传来的数据和方法。

  • JSX 表达式

  • 虚拟 DOM

    在 React 中会把定义好的JSX 标记最终转化为为虚拟 DOM 存在内存里，这是因为内存的读取速度要比操作 DOM 快得多，如果用户做了对 DOM 可能产生影响操作的时候，虚拟 DOM 会把操作前后的数据进行对比，如果发现操作前后数据有变化，就会把所有的变动然后统一操作一次 DOM，如果发现操作前后的数据没有差异的话就不会再去操作 DOM。

    虚拟 DOM 的思路就是不到万不得已就不会去做低效的 DOM 操作，虚拟 DOM 有两大优势，一个是操作 DOM 前会对数据进行对比，只有数据变化的时候才去操作 DOM，第二点它是会整合 DOM 操作，不像 Jquery 或者原声开发那样，数据如果发生变化可能有好几处的 DOM 需要操作，这样就会操作很多次，通过虚拟 DOM 的这种机制可以减少很多次 DOM 渲染，从而提高ｗｅｂ应用的性能。

React 优点 ​

  1. 简洁

    这里说的简洁并不是语法有多简单，而是当业务流程复杂的时候就会发现单向数据流和组件化的组合方式会很大程度上降低问题的复杂度。

  2. 灵活

    在 react 里可以把一切理解为 JS，这样操作起来就少了很多的树，另外组件提供了多种嵌套方式，数据驱动，生命周期等特点，也让开发变得更顺畅。

  3. 高效

    通过减少和优化对 DOM 的操作，能让 react 在浏览器会有更好的性能表现。

React 缺点 ​

  1. 思维转换 使用 React 编程的方式要跟着转过来，比如　 JSX 单项数据流等

  2. 依赖生态

    React 本身只是一个视图层的框架，甚至不能称之为可框架，如果想让 React 发挥更大作用的话就需要依赖他的生态系统，比如果说处理单页路由，要用 React-router，处理数据会用到 redux，所以需要了解更多的知识，然后这个系统也比较复杂。

  3. 变动频繁

    React 更新比较频繁，并且不向前兼容，这就导致一升级可能就会出现各种问题。

组件间的数据传递方式 ​

  1. 父组件向子组件传值，通过 props 就可以

  2. 子组件向父组件传值，通过回调，

    在父组件里向子组件传递了一个函数(changeColor),这个函数在父组件里绑定的是 setState 事件函数(bgColorChange)在子组件里点击事件里就可以通过 this.props.changeColor(color)传参给父组件,从而就可以在子组件里传递参数而该百年父组件的状态。

  3. 兄弟组件间的传递：兄弟 1 通过给父组件传值然后再通过父组件改变兄弟 2 的状态。

  4. 状态提升

    为了在兄弟组件间进行通讯，然后把子组件应该有的属性放到了父组件里，这种就是 React 里的状态提升

React 生命周期 ​

概念：生命周期就是一个组件从生到死的过程。然后生命周期是普遍存在，比如我们一个系统，一个页面，一个组件甚至一个变量都有生命周期，

在 react 里面，react 为生命周期提供一些关键的结点，其实就是后续触发的事件，来让组件能方便的处理各种场景。

React 生命周期分为三个阶段 ​

最后组件销毁时，执行componentWillUnmount()来处理一些收尾的逻辑。

  • Mouting 挂载阶段： 组件第一次在 DOM 树渲染的过程。
  • Updating 更新阶段：当组件的 props 或者 state 改变时就会触发组件的更新过程。
  • Unmounting 卸载阶段：将组件从 DOM 树移出，防止内存溢出。

挂载阶段 ​

加载阶段

首先在组件加载的时候先是执行构造函数constructor() ，然后执行componentWillMount() 组件将要执行（在这里可以加载异步的方法）， 然后再执行render() 渲染组件， 最后再执行componentDidMount() 组件加载完成，这时已经生成了真实的DOM节点。

更新过程 ​

更新阶段 1更新阶段更新阶段 2更新阶段

在更新过程中，如果是state的更新，
它会先执行shouldComponentUpdate()这个方法来判断是否更新子组件，
如果是，则往下进行，执行 componentWillUpdate() 组件将要更新
然后再 执行render() 渲染更新后的组件 再执行componentDidUpdate() 组件更新完成。
这是整个更新过程就完成了。
但如果是 props引起的数据改变
这里面会多个componentWillReceiveProps()来执行父组件传来的props。

卸载过程 ​

卸载阶段

ts
最后组件销毁时，执行componentWillUnmount()来处理一些收尾的逻辑。
在这里做的通常是一些取消操作，
比如说做了定时器，当组件消失的时候要把定时器关掉，减少内存占用。

React 技术栈（全家桶） ​

  1. React 主体
  2. WebPack: grunt、gulp 自动化构建工具
  3. Flex：布局
  4. React-Route：路由
  5. Redux：做 view 层编写
  6. Mocha：测试
  7. Istanbul：覆盖率

JSX ​

  1. 增强型的 JS，
  2. babel：为新 JS 语法做的编译器，支持 ES6；注意了解下 bower

state ​

  1. 状态是活的

    constructor 里面只能这样写 satae ——this.state={}

    方法里面这样写——this.setState({JSON})

  2. 事件大小写不能乱写

    onChange ，onClick，……

  3. 绑定事件

    onChange={this.fn.bind(this)}

  4. 用 constructor 的时候，必须要用super()，（super 调用父类构造函数）

React 组件节点获取，表单，数据交互等； ​

组件内的节点（元素）获取用 ref

ref='类似id'， this.refs['名字'] =>原生

但推荐使用 state（状态）

表单原件问题：

  1. 用value，改成defaulValue
  2. 用checked，改成defaultChecked

Released under the MIT License.

Copyright © 2014-present vue