React 性能调优——PureComponent 篇

Posted 2021-04-05 WebJ2EE

WEBJ2EE

分享技术小干货，快来关注吧。  

今天要分享是

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

精选文章推荐

• 
  

---