揭开 React 重新渲染的神秘面纱

引言

对于前端开发者来说，掌握 React 的渲染机制至关重要。React 采用基于 Virtual DOM 的高效渲染策略，但并不意味着渲染开销可以忽略不计。不必要的重新渲染会浪费计算资源，导致性能问题。

导致 React 重新渲染的原因

1. 状态更新：当组件状态更新时，React 会重新渲染该组件及其子组件。
2. 属性变更：当组件属性发生变化时，React 会重新渲染该组件。但需要注意，只传递新对象的引用并不会触发重新渲染。
3. 生命周期方法：某些生命周期方法，如 componentDidUpdate 和 componentWillReceiveProps，会触发重新渲染。
4. 强制重新渲染：通过调用 forceUpdate 方法，可以强制组件重新渲染。但请谨慎使用此方法，因为它会绕过 React 的优化机制。
5. 外部影响：其他组件或外部事件也可能间接触发组件重新渲染。

避免不必要重新渲染的技巧

了解了重新渲染的原因后，我们就可以采取措施来避免不必要的重新渲染，从而优化 React 应用的性能。

• 使用 shouldComponentUpdate：通过实现 shouldComponentUpdate 生命周期方法，可以控制组件是否在属性或状态更新后重新渲染。在该方法中，返回 false 以跳过重新渲染。
• 使用 memo：对于纯函数组件，可以使用 React.memo 高阶组件对其进行包裹，以防止不必要的重新渲染。
• 使用 useCallback 和 useMemo：对于函数和值对象，可以使用 useCallback 和 useMemo 钩子来避免不必要重新创建它们。
• 避免不必要的属性更新：只有在属性发生实质性变化时才更新属性。可以使用 Object.is 或 _.isEqual 等工具来比较对象。
• 使用 PureComponent：对于类组件，可以使用 React.PureComponent 基类，它实现了浅比较优化，从而避免不必要的重新渲染。

代码演示

为了进一步理解，让我们通过代码演示如何避免不必要的重新渲染：

使用 shouldComponentUpdate

```javascript import React, { Component } from 'react';

class MyComponent extends Component {
shouldComponentUpdate(nextProps, nextState) {
// 比较 props 和 state，如果变化不影响渲染，返回 false
return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
}

render() {
// ...
}
}
<h3>使用 <code>memo</code></h3>javascript
import React from 'react';

const MyPureComponent = React.memo(MyComponent);

结论</h2><p>掌握">
<br/>