react循环setstate_[React] 8 - React 自身或工程性能优化点?

持续补充。

1. setState 数据合并一次处理

React底层对setState进行性能的提升机制。 数据多次改变，合并一次处理。

降低React diff match 比对频率。

LIN.JY666：[React] 4 - setState / 异步还是同步?​zhuanlan.zhihu.com

2. 作用域绑定 在constructor 里只绑定一次

将this.handleClick3 = this.handleClick3.bind(this) 放到constructor。

保证该函数的作用域绑定一次，避免其他的渲染。

// 三种方式
// 1. 构造器绑定
constructor (props) {
    super(props)
    this.handleClick3 = this.handleClick3.bind(this)
  }

// 2. 箭头函数
<button onClick={() => this.handleClick2()}>

// 3. bind方式
<button onClick={this.handleClick4.bind(this)}>

LIN.JY666：[React] 3 - 自动绑定 (事件绑定)​zhuanlan.zhihu.com

3. React Fiber 16+ 任务调度优化

• diff 如果很深的时候，会一直占用JS主进程的(因为单线程)，用户操作效果就是，卡顿。
• Fiber 本质上是对 调用的一个优化。分片，就是大的任务分成小的 一步步的解决。
• React Fiber 是一种基于浏览器的单线程调度算法。16以下都是用的递归算法，无法停止。16+ 用的都是循环方式。

LIN.JY666：[React] 6 - React Fiber 基于浏览器的单线程调度算法​zhuanlan.zhihu.com

4. 组件

• shouldComponentUpdate 可执行业务决定是否render
• 无状态使用Pure 组件
• HOC 高阶组件模式，复用组件。

5. React key

VirtualDOM diff算法，用key来提升比对速度。

6. 其他工程方面

• webpack 按需加载, 代码分割，单个bundle打包多个(一个vendor + 一个业务)，tree shaking。
• 服务端渲染。