如何对react进行性能优化

Posted 2020-10-31 qiqi105

• {...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操作。

• 数据尽可能简单明了，扁平化。