React 性能优化在哪个⽣命周期？它优化的原理是什么？

八股文_React面试题 0 37

参考回答

React 性能优化一般发生在组件的生命周期方法中，尤其是 shouldComponentUpdate、componentDidUpdate 和 getSnapshotBeforeUpdate 这些生命周期方法。

shouldComponentUpdate：这是一个非常关键的性能优化方法。React 默认会在状态或者属性变化时重新渲染组件，但你可以通过 shouldComponentUpdate 来控制组件是否需要更新。如果组件的属性和状态没有变化，可以直接返回 false，这样 React 就跳过了渲染过程，从而提高性能。
React.memo：对于函数组件，React.memo 可以帮助你避免不必要的渲染。它通过比较前后 props 来决定是否重新渲染组件。
PureComponent：对于类组件，PureComponent 也是一个优化工具，它通过浅比较 props 和 state 来决定组件是否重新渲染。

详细讲解与拓展

shouldComponentUpdate 的工作原理：
shouldComponentUpdate 方法会在组件接收到新的 props 或者 state 时调用，返回一个布尔值，决定是否重新渲染组件。默认情况下，React 会假设组件的所有状态和属性变化都会引发组件更新，这就可能导致一些不必要的渲染。通过自定义 shouldComponentUpdate，我们可以避免这种情况。

例子：如果组件的某些属性和状态是相同的，不需要更新，那就可以返回 false，跳过渲染：
```
shouldComponentUpdate(nextProps, nextState) {
 if (this.props.value === nextProps.value) {
   return false; // 组件的值没有变化，跳过渲染
 }
 return true;
}
```
React.memo 的优化原理：
React.memo 是一个高阶组件，作用于函数组件，能够通过浅比较 props 来避免不必要的渲染。React 默认会重新渲染函数组件，然而如果传入的 props 没有变化，React.memo 会阻止组件的更新。

例子：
```
const MyComponent = React.memo(function MyComponent(props) {
 return <div>{props.name}</div>;
});
```
上面的 MyComponent 组件只有在 props.name 变化时才会重新渲染，否则会使用之前的渲染结果。
PureComponent 的作用：
PureComponent 是 React 类组件的一个优化版本，它会自动实现 shouldComponentUpdate 方法，使用浅比较来决定是否重新渲染。只有当 props 或 state 中的某个值发生变化时，才会触发更新，否则 React 会跳过渲染过程。

例子：
```
class MyComponent extends React.PureComponent {
 render() {
   return <div>{this.props.value}</div>;
 }
}
```
在上面的例子中，MyComponent 只有在 props.value 变化时才会重新渲染。
React 更新机制的其他优化方法：
- Lazy loading 和 Suspense：懒加载是 React 另一个性能优化的手段，利用 React.lazy() 和 Suspense 来动态加载组件，减少初始加载时间。
- 代码拆分：使用 Webpack 的代码拆分功能，按需加载组件，从而避免一次性加载大量代码。

总结

React 的性能优化通常通过控制组件更新的频率来实现。使用生命周期方法如 shouldComponentUpdate 或 React.memo 和 PureComponent 来避免不必要的渲染，能显著提升性能。在 React 中，正确的性能优化不仅仅是减少渲染次数，还包括按需加载和代码拆分等方法，帮助我们优化应用的整体体验。

参考回答

详细讲解与拓展

总结

发表评论 取消回复

发表评论取消回复