React 的特点之一是组件化，但组件化会面临一个性能问题：每次数据更新，组件都会重新渲染，即使其 UI 部分并没有变化。为了解决这个问题，React 提供了两个优化性能的方法：Memo 和 PureComponent。
Memo
Memo 是 React 16.6 新增的 API，它是一个高阶组件（Higher-Order Component），可以用来包装函数式组件，用于避免组件的无用渲染。它的主要作用是进行浅层比较（Shallow Comparison）。
当函数式组件的 props 改变时，Memo 会进行一次浅层比较，然后根据比较结果来决定是否重新渲染组件。通过浅层比较，Memo 可以避免在组件的 props 没有真正变化时，对组件进行无用的渲染。
Memo 的使用方法和普通的高阶组件类似，只需要将待包装的函数组件作为参数传入。下面是一个示例：
------ ------ - ---- - ---- --------
----- ----------- - ---------- -- -
------------------------ ---------
------ -
-----
-------------
------
--
---
-------- ----- -
----- ------- --------- - ------------
------ -
--
------- ----------- -- -------------- - ---------------
------------ ------------- --
---
--
-在上面的示例中，MyComponent 组件会在挂载时进行一次渲染，然后每次点击按钮时重新渲染。但是，由于 Memo 的存在，MyComponent 组件只会在 value 改变时进行渲染。
PureComponent
PureComponent 是 React 15.3 新增的类组件，它是 React.Component 的一个变种，主要用于组件的性能优化。它的主要作用和 Memo 一样，是避免组件的无用渲染，但它的实现机制却完全不同。
当组件的 props 和 state 改变时，PureComponent 会自动进行一次浅层比较，然后根据比较结果来决定是否重新渲染组件。通过浅层比较，PureComponent 可以避免在组件的 props 和 state 没有真正变化时，对组件进行无用的渲染。
PureComponent 的使用方法和普通的类组件类似，只需要继承 PureComponent 类即可。下面是一个示例：
------ ------ - ------------- - ---- --------
----- ----------- ------- ------------- -
-------- -
------------------------ ---------
------ -
-----
------------------
------
--
-
-
-------- ----- -
----- ------- --------- - ------------
------ -
--
------- ----------- -- -------------- - ---------------
------------ ------------- --
---
--
-在上面的示例中，MyComponent 组件会在挂载时进行一次渲染，然后每次点击按钮时重新渲染。但是，由于 PureComponent 的存在，MyComponent 组件只会在 value 改变时进行渲染。
Memo 和 PureComponent 的区别
Memo 和 PureComponent 都是 React 优化性能的方式，它们的作用也是相同的，都是避免对组件进行无用的渲染。但是，它们的实现机制却完全不同，这也导致二者在使用上有一定的区别。
Memo 主要用于函数式组件的优化，它只进行 props 的浅层比较，而不涉及 state。因此，如果组件的内部状态不依赖 props，那么 Memo 是一个很好的选择。
PureComponent 主要用于类组件的优化，它同时考虑了 props 和 state，因此它的使用范围更广。但是，如果组件的内部状态相对复杂，那么 PureComponent 的性能优化可能会受到一些影响。
结论
Memo 和 PureComponent 都是 React 中非常重要的性能优化方式，它们可以避免组件的无用渲染，提升应用程序的性能表现。它们的区别在于实现机制的不同，应该根据实际情况选择适合自己的方式。
在实际开发中，我们应该尽可能地将组件设计得足够简单，尽量避免复杂的内部状态和嵌套结构，这可以有效地提升组件的渲染性能。同时，我们也应该灵活使用 Memo 和 PureComponent，根据实际需求选择合适的优化方式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66fb89e544713626015e3bf4