在 React 中，如果一个父组件重新渲染，那么它的所有子组件都会被重新渲染。这样做有时候会降低性能，特别是当子组件没有实际上有变化的时候。为了避免这种情况，我们可以采用一些技巧。
1. shouldComponentUpdate
这是 React 生命周期中的一个方法，可以用来告诉 React 是否应该更新组件。默认情况下，它总是返回 true ，意味着组件总是会被更新。我们可以通过覆盖这个方法来添加一些条件，比如只有当组件的 props 或 state 发生了变化才更新组件。
以下是一个例子：
----- ----------- ------- --------------- -
-------------------------------- ---------- -
-- --------------- --- ------------- -- -------------- --- -------------- -
------ ------
-
------ -----
-
-------- -
-- ---
-
-在这个例子中，如果 MyComponent 的 foo 和 bar 属性都没有变化，那么 shouldComponentUpdate 将返回 false ，使得组件不会被更新。
2. PureComponent
PureComponent 是 React 的一个内置组件，它默认实现了 shouldComponentUpdate 方法，其中会比较组件的 props 和 state 是否变化。如果没有变化，组件就不会被更新。
以下是一个例子：
----- ----------- ------- ------------------- -
-------- -
-- ---
-
-在这个例子中，如果 MyComponent 的 props 和 state 都没有变化，那么组件不会被更新。
3. Memo
Memo 是 React 的一个高阶组件，它可以包装一个子组件，让它只在 props 变化时重新渲染。它类似于 PureComponent ，但可以用于函数组件。
以下是一个例子：
----- ----------- - ---------------- -- - -- --- ---
在这个例子中，如果 MyComponent 的 props 没有变化，那么组件不会被重新渲染。
4. useCallback 和 useMemo
useCallback 和 useMemo 是 React 的两个钩子，它们可以用来优化函数组件的性能。它们都能够 memoize（记忆）一个函数或值，并在后续渲染中复用它们。
以下是一个例子：
----- ----------- - -- ------- -- -- -
----- ----------- - -------------- -- -
------------------------
----------
-- -----------
------ -
------- --------------------------- -----------
--
--在这个例子中，当 MyComponent 重新渲染时，handleClick 函数仍然是相同的引用，因为它的依赖项（onClick）没有变化。这可以避免不必要的函数重建，从而提高性能。
结论
以上是几种避免 React 子组件重新渲染的方式。每种方法都有其适用场景，需要根据具体情况选择。在开发性能要求较高的应用时，注意优化子组件的渲染，可以提升用户体验和应用的响应速度。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672dd9eaeedcc8a97c8625da