React 是一种用于构建用户界面的 JavaScript 库，由 Facebook 开源。在 React 应用中，组件是构建界面的基本单位。在渲染 React 应用时，React 会在组件中引入一种叫做虚拟 DOM 的机制，用于在不直接操作 DOM 的情况下，更高效地更新界面。
然而，虚拟 DOM 的更新，在某些情况下会引起不必要的重复渲染。在 React 开发单页应用（SPA）时，尤其需要注意防止这种情况的发生。
1. 多余的重复渲染
在 React 应用中，每当 state 或 props 发生变化时，React 会重新渲染相应的组件。这个过程可能会比较耗费性能，尤其是当渲染组件的层次比较深时。因此，我们应当尽可能地避免不必要的、重复的渲染，从而提升应用的性能。
在 React 中，有些情况下，即使 state 或 props 发生变化，组件本身也不需要重新渲染。如果组件的某个属性发生变化，但是这个属性并不影响组件的显示效果，那么这个组件的重新渲染就是多余的，也会浪费性能。此时，我们就需要进行优化，阻止不必要的重复渲染。
2. 如何防止多余的重复渲染
2.1 使用 shouldComponentUpdate 生命周期方法
在 React 组件生命周期中，有一个方法叫做 shouldComponentUpdate，用于判断组件是否需要重新渲染。这个方法可以通过返回 true 或 false，来控制组件是否需要重新渲染。
对于一些只是展示数据的纯展示组件，我们可以通过重写 shouldComponentUpdate 方法，直接返回 false，来防止这些组件的不必要的重复渲染。这样，只有在组件的 props 发生变化时，才会进行重新渲染。
示例代码：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
-------------------------------- ---------- -
-- ------ ----- - ----- -------------
-- ----------------- --- ---------------- -
------ ------
-
------ -----
-
-------- -
------ -
-----------------------------
--
-
-2.2 使用 PureComponent
在 React 中，还有一种特殊的组件，叫做 PureComponent。这个组件在 shouldComponentUpdate 方法中进行了默认的浅比较（shallow compare）判断，如果组件的 props 没有发生变化，就不会重新渲染组件。
所以，对于一些只需要展示数据的组件，我们可以使用 PureComponent 来防止不必要的重复渲染。
示例代码：
class MyComponent extends React.PureComponent {
render() {
return (
<div>{this.props.value}</div>
);
}
}2.3 使用 React.memo
在 React 16.6.0 版本中，引入了一种新的、函数式组件的性能优化方法，叫做 React.memo。这个方法的功能和 PureComponent 类似，可以防止不必要的重复渲染。
示例代码：
const MyComponent = React.memo(props => (
<div>{props.value}</div>
));3. 总结
在 React 开发 SPA 时，防止多余的重复渲染是一个比较重要的性能优化问题。本文介绍了三种防止多余的重复渲染的方法，分别是：
- 使用 shouldComponentUpdate 生命周期方法
- 使用 PureComponent
- 使用 React.memo
借助这些优化性能的方法，我们可以更好地提高 React 应用的性能，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6454c249968c7c53b08882a3