在 React 中，为了避免不必要的组件渲染和性能浪费，我们通常会使用 PureComponent 来替代 Component。PureComponent 会自动比较 props 和 state 是否发生变化，如果没有变化就不会重新渲染组件。
但是在使用 PureComponent 的过程中，还是有一些需要注意的地方。下面来详细介绍一下。
1. 注意浅比较
在使用 PureComponent 时，需要注意的一点是它使用的是浅比较。这意味着，当我们在 props 或 state 中使用了引用类型的数据（如数组、对象等），并且只改变了其中的某个属性时，PureComponent 可能会认为它们没有发生变化，从而造成不必要的渲染。
例如，下面的示例代码中，我们定义了一个 users 数组，其中每个元素都有一个 name 属性和一个 age 属性。在修改 users 数组中的某个元素的 age 属性时，由于只是改变了这个元素的某个属性，因此浅比较会认为 users 数组没有发生变化，从而造成不必要的渲染。
-- -------------------- ---- -------
------ ------ - ------------- - ---- --------
----- -------- ------- ------------- -
----- - -
------ -
- ----- ------ ---- -- --
- ----- -------- ---- -- --
--
--
----------- - -- -- -
----- - ----- - - -----------
-- ---- ----- ---------- --- --
------------ -- --
--------------- ----- ---
--
-------- -
----- - ----- - - -----------
------ -
-----
--------------- -- -
---- ----------------
------------ ----------
------
---
------- ---------------------------------------
------
--
-
-解决这个问题的方法是，在修改引用类型的数据时，使用新的数据对象或数组来替换原来的数据，从而强制重新渲染组件。
例如，下面的示例代码中，在修改 users 数组中的某个元素的 age 属性时，我们将新的 users 数组复制一份，然后在其中修改对应元素的 age 属性，并使用 setState 方法强制重新渲染组件。
-- -------------------- ---- -------
------ ------ - ------------- - ---- --------
----- -------- ------- ------------- -
----- - -
------ -
- ----- ------ ---- -- --
- ----- -------- ---- -- --
--
--
----------- - -- -- -
----- - ----- - - -----------
-- ---- ----- --
----- -------- - -----------
-- -- -------- -------- --- --
--------------- -- --
--------------- ------ -------- ---
--
-------- -
----- - ----- - - -----------
------ -
-----
--------------- -- -
---- ----------------
------------ ----------
------
---
------- ---------------------------------------
------
--
-
-2. 不要深度嵌套 PureComponent
在实际开发中，我们可能会遇到需要深度嵌套组件的情况。虽然 PureComponent 在某些情况下可以提高性能，但是如果出现了深度嵌套的情况，PureComponent 会递归比较整个组件树上的 props 和 state，从而造成性能问题。
例如，下面的示例代码中，我们定义了一个 App 组件，其中包含了一个 UserList 组件和一个 Filters 组件。UserList 组件又包含了一个 User 组件。
在这个组件树上，如果我们使用 PureComponent 来代替 Component，那么当 App 组件的 state 或 User 组件的 props 发生变化时，就会递归比较整个组件树上的 props 和 state，造成性能问题。
-- -------------------- ---- -------
------ ------ - ------------- - ---- --------
----- ---- ------- ------------- -
-------- -
----- - ----- --- - - -----------
------ -
-----
------- -----
------
--
-
-
----- -------- ------- ------------- -
-------- -
----- - ----- - - -----------
------ -
-----
--------------- -- -
----- --------------- ---------------- -------------- --
---
------
--
-
-
----- ------- ------- ------------- -
-------- -
----- - ------- - - -----------
------ -
-----
------------------- -- -
---- ---------------------------
---
------
--
-
-
----- --- ------- ------------- -
----- - -
------ -
- ----- ------ ---- -- --
- ----- -------- ---- -- --
--
-------- -------- ----------
--
----------- - -- -- -
----- - ----- - - -----------
------------ -- --
--------------- ----- ---
--
-------- -
----- - ------ ------- - - -----------
------ -
-----
--------- ------------- --
-------- ----------------- --
------- ---------------------------------------
------
--
-
-解决这个问题的方法是，不要在深度嵌套的组件中使用 PureComponent，而是使用普通的 Component 或函数组件。
例如，下面的示例代码中，我们将 User 组件改为使用普通的 Component，并将 Filters 组件改为使用函数组件。这样，当 App 组件的 state 或 User 组件的 props 发生变化时，就只会重新渲染对应的组件，不会递归比较整个组件树上的 props 和 state，从而避免了性能问题。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ---- ------- --------- -
-------- -
----- - ----- --- - - -----------
------ -
-----
------- -----
------
--
-
-
-------- -------------- -
----- - ------- - - ------
------ -
-----
------------------- -- -
---- ---------------------------
---
------
--
-
----- --- ------- ------------- -
----- - -
------ -
- ----- ------ ---- -- --
- ----- -------- ---- -- --
--
-------- -------- ----------
--
----------- - -- -- -
----- - ----- - - -----------
------------ -- --
--------------- ----- ---
--
-------- -
----- - ------ ------- - - -----------
------ -
-----
--------- ------------- --
-------- ----------------- --
------- ---------------------------------------
------
--
-
-总结
使用 PureComponent 能够在一定程度上提高组件的渲染性能，但是在使用它时需要注意浅比较和不要深度嵌套组件的问题。通过合理地使用 PureComponent，我们可以更好地提高 React 应用的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6477f4e3968c7c53b043ef55