react基础 - react 性能优化 - 《前端技术杂记》

尽量少用不可控的refs、DOM操作。
map里的key
方法绑定的使用
class类组件使用shouldComponentUpdate和PureComponent 优化
函数组件使用React.memo()优化
虚拟化长列表

尽量少用不可控的refs、DOM操作。
map里的key方法
绑定的使用
类组件使用shouldComponentUpdate和PureComponent 优化
函数组件使用React.memo()优化
虚拟化长列表

尽量少用不可控的refs、DOM操作。

map里的key

map里面添加key，并且key不要使用index（可变的）,尽量使用稳定常量作为key。使用index作为key，只是会让代码不报错，其他一无是处。
每当组件的props或state改变时, React会重新创建一个virtual DOM, 与上一个作对比, 如果发现两个virtual DOM不完全相同, 则React就会做reconcile, 把有差异的地方更新到真实的DOM上。
使用常量作为key

方法绑定的使用

方法直接绑定在dom节点中
```
<div onClick={this.tap.bind(this)} />
```

方法绑定放在constructor中

constructor(props) {
 super(props);
 this.tap= this.tap.bind(this);
}

箭头函数
```
tap = ()=>{};
<div onClick={this.tap} />
```
总结：1.由于绑定是在render中执行，而render是会执行多次的，每次bind和箭头函数都会产生一个新的函数，因而带来了额外的开销
2.使用构造器bind的方法，每个实例都可以有效地共享函数体，从而更加有效的使用内存。但当要绑定的函数较多时，这种方法又显得相对的枯燥和无聊。所以，在知道实例不多，函数体不大的前提下，使用箭头函数更加快捷。
3.综合三种写法，第三种是目前最优写法

class类组件使用shouldComponentUpdate和PureComponent 优化

shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

文档https://zh-hans.reactjs.org/docs/optimizing-performance.html#examples

函数组件使用React.memo()优化

https://www.yuque.com/wuzhao/kb/har6f2

虚拟化长列表

如果你的应用渲染了长列表（上百甚至上千的数据），我们推荐使用“虚拟滚动”技术。这项技术会在有限的时间内仅渲染有限的内容，并奇迹般地降低重新渲染组件消耗的时间，以及创建 DOM 节点的数量。
react-window 和 react-virtualized 是热门的虚拟滚动库。它们提供了多种可复用的组件，用于展示列表、网格和表格数据。如果你想要一些针对你的应用做定制优化，你也可以创建你自己的虚拟滚动组件，就像 Twitter 所做的。
https://zh-hans.reactjs.org/docs/optimizing-performance.html#virtualize-long-lists