pure-render-deepcompare-decorator 是一个能够对 React 组件进行性能优化的 npm 包，可以避免不必要的组件渲染，提高渲染性能。
背景
在 React 组件的渲染过程中，有些组件会因为数据的变化而发生重新渲染的操作。但是有些时候，数据的变化可能只是一个浅层的改变，而不涉及到组件的深层次的变化。此时，因为组件进行了不必要的重新渲染，就会浪费性能资源。pure-render-deepcompare-decorator 就是专门针对这种情况进行优化的。
安装
可以在终端中使用 npm 安装 pure-render-deepcompare-decorator。
npm i -S pure-render-deepcompare-decorator
使用方法
pure-render-deepcompare-decorator 通过在组件上添加装饰器的方式实现性能优化。我们需要先引入装饰器，并使用 @deepCompare 进行修饰。
import React, { PureComponent } from 'react';
import { deepCompare } from 'pure-render-deepcompare-decorator';
@deepCompare
class MyComponent extends PureComponent {
// ...
}这样，MyComponent 组件就会被 pure-render-deepcompare-decorator 进行优化，当组件需要进行重新渲染的时候，pure-render-deepcompare-decorator 会进行深层次的比较，判断是否需要重新渲染组件。
示例代码
下面是一个使用 pure-render-deepcompare-decorator 进行性能优化的示例代码。
-- -------------------- ---- -------
------ ------ - ------------- - ---- --------
------ - ----------- - ---- ------------------------------------
------------
----- ----------- ------- ------------- -
------------------ -
-------------
---------- - -
----- -
----- --------
---- ---
--
--
---------------- - ----------------------------
-
------------- -
-- --------- ---- ------ --- --
---------------
----- -
-------------------
----- ------
--
---
-
-------- -
----- - ---- - - -----------
------ -
-----
--------------------
-----------------
------- --------------------------------- -------------
------
--
-
-上面的代码中，当用户点击按钮时，MyComponent 组件的 state 数据会发生变化，这时组件会进行重新渲染。因为这里只是改变了 name 属性，而 age 属性没有发生变化，所以 pure-render-deepcompare-decorator 只会对 name 属性进行深层次的比较，避免了不必要的重新渲染，提高了渲染性能。
总结
使用 pure-render-deepcompare-decorator 可以提高 React 组件的渲染性能，避免不必要的重新渲染操作。在实际项目中，可以考虑使用这个工具进行性能优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554d981e8991b448d20d1