React 是一个非常流行的前端框架，可以帮助我们构建复杂的用户界面。在开发大型应用时，性能通常是关键问题之一。React 的虚拟 DOM 技术可以有效地减少 DOM 操作和渲染次数，但是有时候我们仍然需要进行进一步的性能优化。在本文中，我们将介绍如何使用 PureComponent 组件来避免不必要的 re-render，从而提高应用性能。
PureComponent 组件与普通组件的区别
在 React 中，组件的 state 或 props 发生变化时，组件将重新渲染。然而，并非所有的重新渲染都是必要的。当组件的 props 或 state 没有发生实际变化时，重新渲染是浪费时间和资源的。
React 提供了 PureComponent 组件来优化这种情况。PureComponent 组件与普通组件的区别在于它实现了一个 shouldComponentUpdate 生命周期方法，该方法用于判断组件是否需要重新渲染。
普通组件的 shouldComponentUpdate 默认实现始终返回 true，因此只要组件的任何 props 或 state 发生变化，都会触发重新渲染。而 PureComponent 组件则会先比较当前 props 和 state 与下一次将要更新的 props 和 state 是否有实际变化，如果没有，则不进行重新渲染。
使用 PureComponent 组件可以避免一些不必要的 re-render，从而提高应用性能。
PureComponent 组件的使用
使用 PureComponent 组件非常简单，只需要将普通组件改为 PureComponent 组件即可。例如，下面是一个普通的 Counter 组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------- ------- --------- -
------------------ -
-------------
---------- - - ------ - --
---------------- - ----------------------------
-
------------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
-----
------ ------- ------------------ ---------
------- -------------------------------- -----------
------
--
-
-
------ ------- --------这个组件会重新渲染每次点击按钮时，即使 count 并没有实际变化（例如点击两次按钮，把 count 从 0 变为 1，然后再点击两次按钮，把 count 从 1 变为 2，此时组件会重新渲染两次，但是实际上没有任何变化）。
现在将这个组件改为 PureComponent 组件，只需要执行以下两个步骤：
- 引入 PureComponent：
import React, { PureComponent } from 'react';- 继承 PureComponent 而不是 Component：
class Counter extends PureComponent {
// ...
}这样，我们就成功地将普通组件改造为 PureComponent 组件了。这个组件现在可以自动避免一些不必要的 re-render，从而提高性能。
需要注意的地方
使用 PureComponent 组件需要注意以下几点：
避免修改 state 和 props。由于 PureComponent 组件是通过浅比较来判断 props 和 state 是否相等的，如果我们在组件内部修改了某个对象的属性，虽然对象实际上发生了变化，但是 PureComponent 组件却无法检测到这种变化，从而导致不必要的重新渲染。因此，一般情况下我们需要避免修改 state 和 props 中的对象。
避免将函数作为 props 传递给 PureComponent 组件。由于箭头函数在每次渲染时会创建新的对象，因此如果将一个箭头函数作为 props 传递给 PureComponent 组件，每次渲染都会认为 props 发生了变化，从而触发重新渲染。因此，我们需要避免将函数作为 props 传递给 PureComponent 组件，或者将函数封装为一个单独的组件。
PureComponent 组件适用于大部分场景，但并不是所有场景。例如，如果组件的渲染成本很低，每次重新渲染的代价也很小，那么使用 PureComponent 组件可能并不划算。另外，如果组件的渲染逻辑比较复杂，使用 PureComponent 组件可能也无法完全避免重新渲染。因此，我们需要根据具体情况来决定是否使用 PureComponent 组件。
总结
使用 PureComponent 组件可以避免一些不必要的 re-render，从而提高应用性能。使用 PureComponent 组件只需要将普通组件改为 PureComponent 组件，注意避免修改 state 和 props，避免将函数作为 props 传递给 PureComponent 组件，以及根据具体情况来决定是否使用 PureComponent 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648116ce48841e98940845b0