React性能优化

1、使用纯组件 PureComponent 它对状态和 props 数据进行浅层比较(shallow comparison)。如果先前的状态和 props 数据与下一个 props 或状态相同,则组件不会重新渲染。(比较基元和对象引用

2、使用 React.memo(高阶组件)进行组件记忆 ,同时可以自定义比较函数,作为第二个参数传给memo

3、使用 shouldComponentUpdate 生命周期事件

4、使用React.fragment (React16以上) 来避免而外标记

5、不要使用内联函数调用 函数在constructor中完成绑定或使用箭头函数

6、避免使用内联样式属性

7、事件防抖与节流

8、props传递用到的数据 避免使用{...data} 传递无关数据




参考:infoQReact中文文档(性能优化)




确认 取消