在 React 应用的开发和优化中，减少不必要的重新渲染是一项非常重要的技能。具体而言，我们希望针对需要发生变化的部分进行重新渲染，从而提高应用的性能。本文将介绍 React 应用重新渲染的基础知识，包括以下方面：
- React 组件的状态和属性
- shouldComponentUpdate 生命周期方法
- PureComponent 组件
- React.memo 函数
React 组件的状态和属性
React 应用的组件分为有状态组件和无状态组件。有状态组件拥有一个称为“状态”的数据集合，它通常由组件的父组件传递给它，但在组件内部也可以自己维护。状态的变化通常通过调用 setState 方法来完成，从而将组件标记为“需要重新渲染”。
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
----- - -
------ -
--
--------- - -- -- -
---------------
------ ---------------- - -
---
--
-------- -
------ -
-----
-----------------------------
------- ------------------------------------
------
--
-
-上述组件 Counter 拥有一个名为 count 的状态，它的值在用户点击按钮时逐步增加。而每次调用 setState 方法时，React 会将此组件标记为“需要重新渲染”以确保 count 的值得到更新。
与组件状态相关的另一个重要概念是组件属性。组件属性通常由父组件传递给它，它们类似于组件的参数，但不能在组件内部更改。
-- -------------------- ---- ------- ------ ----- ---- -------- -------- --------- ---- -- - ------ ------------------ - -------- ----- - ----- ------- - ------- -------- ------ -------- -------------- --- -
上述代码中，Message 组件没有状态，它只是渲染了一个传递给它的 props 里的 text 值。
shouldComponentUpdate 生命周期方法
当组件的状态或属性发生变化时，React 将对组件进行重新渲染。但是有时候我们希望控制何时重新渲染，以避免不必要的性能开销。此时我们可以使用 shouldComponentUpdate 生命周期方法来告诉 React 是否需要重新渲染。
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
----- - -
------ -
--
--------- - -- -- -
---------------
------ ---------------- - -
---
--
-------------------------------- ---------- -
------ ---------------- --- ----------------
-
-------- -
------ -
-----
-----------------------------
------- ------------------------------------
------
--
-
-上述代码中，我们重写了 shouldComponentUpdate 方法，以检查当前组件是否应该重新渲染。在本例中，我们检查了 count 值是否发生变化，如果是，就返回 true 来重渲染组件；否则返回 false 来避免不必要的性能开销。
注意，shouldComponentUpdate 方法只影响组件的重新渲染，它不会影响组件的内部状态和属性的变化。
PureComponent 组件
为了方便地实现上述过程，React 提供了 PureComponent 组件。PureComponent 是一个自动实现 shouldComponentUpdate 方法的组件，它会浅比较组件状态和属性的变化。如果它们在浅比较下发生了变化，就会触发组件的重新渲染。
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- ------------------- -
----- - -
------ -
--
--------- - -- -- -
---------------
------ ---------------- - -
---
--
-------- -
------ -
-----
-----------------------------
------- ------------------------------------
------
--
-
-上述代码中，我们使用了 PureComponent 代替了 Component，它可以自动检查组件状态的变化并避免不必要的重新渲染。
需要注意的是，PureComponent 只进行浅比较，它的检查会忽略对象和数组深层次的变化。因此，在一些特殊情况下，我们仍然需要手动实现 shouldComponentUpdate 方法来保证组件的正确性。
React.memo 函数
如果你使用函数组件而不是类组件，那么你可以使用 React.memo 函数来实现类似 PureComponent 的功能。React.memo 函数会将函数组件的输入和输出进行浅比较，以判断组件是否需要重新渲染。
-- -------------------- ---- -------
------ ----- ---- --------
-------- --------- -
----- ------- --------- - ------------------
----- --------- - -- -- -
-------------- -- ----- - ---
--
------ -
-----
------------------
------- -------------------------------
------
--
-
------ ------- --------------------上述代码中，我们使用了 React.memo 函数将 Counter 组件包裹起来，以避免不必要的重新渲染。
需要注意的是，React.memo 函数只适用于无状态组件，对于状态组件，我们仍然需要手动实现 shouldComponentUpdate 或使用 PureComponent 来保证组件的正确性。
总结
在 React 应用的开发和优化中，减少不必要的重新渲染是一项非常重要的技能。通过掌握 React 组件的状态和属性、 shouldComponentUpdate 生命周期方法、 PureComponent 组件和 React.memo 函数等知识，我们可以有效地控制组件的重新渲染，从而提高应用的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486b3f648841e989453aa70