React性能优化之

网站首页 » 记录 » React性能优化之

December 4, 2018 记录

React的优化是基于

shouldComponentUpdate

的，该生命周期默认返回true，所以一旦prop或state有任何变化，都会引起重新render。

```
{...this.props}
```
?(不要滥用，请只传递component需要的props，传得太多，或者层次传得太深，都会加重shouldComponentUpdate里面的数据比较负担，因此，请慎用spread attributes（<Component {...props} />）)。
```
this.handleChange()
```
。(请将方法的bind一律置于constructor)
```
this.handleChange.bind(this,id)
```
复杂的页面不要在一个组件里面写完。
请尽量使用
```
const element
```
。
map里面添加key，并且key不要使用index（可变的）。具体可参考使用Perf工具研究React Key对渲染的影响
尽量少用
```
setTimeOut
```
或不可控的refs、DOM操作。
```
props
```
和
```
state
```
的数据尽可能简单明了，扁平化。
使用
```
return null
```
而不是CSS的
```
display:none
```
来控制节点的显示隐藏。保证同一时间页面的DOM节点尽可能的少。

immutable.js

PureComponent

标签: react 性能优化