React 性能调优——PureComponent 篇
React 性能调优——PureComponent 篇
今天要分享是
React 性能调优 之 PureComponent 篇
本文将围绕 TodoApp 的调优，从下面几个角度展开：
- 性能监控工具：Chrome Performance Tab
- 性能监控工具：DevTools Profiler
- 合理拆分组件；
- shouldComponentUpdate 生命周期
- shallowEqual 策略
- React.PureComponent 组件
- React.memo
- 小插件：Reselect
没有靠谱的性能分析工具
怎么调优
1. Chrome Performance Tab
Chrome Performance Tab
能帮我们分析运行时的性能表现
使用很简单
直接看官方教程吧
参考：
https://reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab https://calibreapp.com/blog/debugging-react/
2. React Profiler
React Profiler
能帮我们分析哪些组件参与渲染
也不难
看官方教程吧
参考：
https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html
3. TodoApp-v1
TodoApp-v1，是未经调优的版本，大家先看看。
（为了让界面好看点，采用了 antd 的 UI 组件）
图：TodoApp-v1
3. 合理拆分组件
TodoApp-v1
只要录入一个字符
整个 TodoApp 就渲染一遍
很低效、很不靠谱
原因就是
没进行合理的组件拆分
所有 UI 细节都在一个 render 函数中
只要 state 或 props 变化
就都跟着渲染
3. TodoApp-v2（组件拆分后）
根据职责
提取 TodoApp 中的 3 个子组件
AddTodo、TodoFilter、TodoList
图：TodoApp-v2
再借助 React Profiler 观察渲染情况
提取子组件后
AddTodo 录入时不会使其他区域渲染
但是
TodoFilter 组件的变动
会引发 AddTodo 组件的渲染
还是不靠谱
下面就该
PureComponent
登场了
4. PureComponet
一句话
PureComponent 就是
在 componentShouldUpdate 生命周期
应用 shallowEqual 比较算法的
React 组件
合理使用 PureComponent
可以避免一些不必要的 render
5. TodoApp-v3（PureComponent ）
图：TodoApp-v3
再观察一波渲染情况
有效果
TodoFilter 现在不会影响 AddTodo 了
6. TodoApp-v4（ReSelect 优化）
可以使用 reselect 给这种操作
加缓存
后记
其实，TodoApp 性能的最大优化方式
是使用 react-window 类技术
优化长列表数据的展示
下一篇再分享吧
参考：
Chrome Performance Tab: https://reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab https://calibreapp.com/blog/debugging-react/ React Profiler: https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html PureComponent 相关: https://reactjs.org/docs/shallow-compare.html https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is https://reactjs.org/docs/pure-render-mixin.html https://reactjs.org/docs/react-component.html#shouldcomponentupdate https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation https://reactjs.org/docs/react-api.html#reactpurecomponent https://reactjs.org/docs/react-api.html#reactmemo