什么是 pure-update-decorator？
pure-update-decorator 是一个出色的 npm 包，提供了一个装饰器，可以在 React 组件中实现纯组件。这个包相对于其他使用 React 组件的方式，它可以在组件渲染时只有在它的属性 props 或者 state 状态发生改变时才会运行 render 函数，从而提高组件的渲染效率。
如何使用 pure-update-decorator？
首先，我们需要安装 pure-update-decorator：
npm i pure-update-decorator --save
taro 中。只需在安装时添加 -S 即可让它加到项目依赖中。
在组件中使用该 decorator 的方式如下：
import PureRender from 'pure-update-decorator';
@PureRender
class MyComponent extends React.Component {
//...组件代码...
}当然在 taro 中可以采用这种方式使用：
import {PureComponent} from 'taro-ui';
export default class abc extends PureComponent{
//...组件代码...
}使用 pure-update-decorator 后，框架会自动根据组件的修改情况，自动判断 Component 是否需要刷新。
为什么使用 pure-update-decorator？
在 React 应用中，尤其是在使用大型的单页应用时， 直接使用 React 组件可能涉及到大量的渲染计算，因此，可能会出现组件渲染效率不高的情况，而对于纯组件（PureComponent），可以优化一些性能问题。
如果你的页面中的每个组件都被视为 Pure 组件，当页面发生状态变化时（重新渲染）以及各种交互事件发生时（重新调用渲染），React 组件的 render 函数将更快地重新渲染，以提高应用程序性能。
总之，使用 pure-update-decorator 有利于提高组件渲染效率，减少不必要的 render 调用对组件性能的影响。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- ------------------------
-----------
----- ----------- ------- --------------- -
-------- -
----- - ----- - - - -----------
------ -
-----------------
--
-
-
------ ------- ------------总结
pure-update-decorator 是一个非常强大的优化 React 组件渲染效率的 npm 包，使用它可以在很大程度上避免无效的的 render 函数调用。同时，需要注意的是，当组件传递的 props 数据中包含了对象、数组、方法等等非原始类型数据，需要进行深度的比较（deep compare），尽管这个成本较高，但使用 pure-update-decorator 依然是一种很好的优化 React 组件性能的方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f581e8991b448e0b58