如何避免React 组件的重新渲染？

八股文_React面试题 0 150

参考回答：

在React中，组件的重新渲染是正常的行为，但过多的无效渲染可能会影响应用性能。为了避免不必要的重新渲染，可以采取以下几种方法：
1. 使用React.memo：对于函数组件，可以使用React.memo来避免不必要的重新渲染。
2. 使用PureComponent：对于类组件，可以继承React.PureComponent，它会自动实现浅比较，避免不必要的渲染。
3. 使用shouldComponentUpdate：通过重写shouldComponentUpdate方法来控制组件是否需要重新渲染。
4. 避免直接修改state：在更新状态时，要使用setState而不是直接修改state，以确保React能够正确检测状态变化并决定是否重新渲染。

详细讲解与拓展：

React.memo：用于函数组件的性能优化
React.memo是一个高阶组件（HOC），它用于包装函数组件，只有当组件的props发生变化时，组件才会重新渲染。默认情况下，React.memo使用浅比较来检查props的变化。

示例：
```
const MyComponent = React.memo(function MyComponent(props) {
 console.log('Rendering:', props);
 return <div>{props.name}</div>;
});

function App() {
 return <MyComponent name="John" />;
}
```
在这个例子中，如果name属性没有变化，MyComponent就不会重新渲染。React.memo通过对props进行浅比较来决定是否重新渲染组件。

自定义比较函数：
你还可以为React.memo提供一个自定义的比较函数，来决定是否渲染组件：
```
const MyComponent = React.memo(function MyComponent(props) {
 console.log('Rendering:', props);
 return <div>{props.name}</div>;
}, (prevProps, nextProps) => {
 return prevProps.name === nextProps.name;  // 只有当name变化时才重新渲染
});
```
PureComponent：用于类组件的性能优化
React.PureComponent是React.Component的一个变种，它自动执行浅比较来检查props和state的变化。如果props或state没有变化，PureComponent会阻止组件重新渲染。

示例：
```
class MyComponent extends React.PureComponent {
 render() {
   return <div>{this.props.name}</div>;
 }
}
```
PureComponent会自动调用shouldComponentUpdate并执行浅比较，因此避免了不必要的渲染。它适用于props和state变化比较简单的组件。
shouldComponentUpdate：手动控制组件是否重新渲染
shouldComponentUpdate是React类组件中的生命周期方法，用于控制组件是否需要重新渲染。你可以通过这个方法自定义比较逻辑，从而避免不必要的渲染。

示例：
```
class MyComponent extends React.Component {
 shouldComponentUpdate(nextProps, nextState) {
   // 只有当props.name发生变化时才重新渲染
   return nextProps.name !== this.props.name;
 }

 render() {
   return <div>{this.props.name}</div>;
 }
}
```
在这个例子中，shouldComponentUpdate仅在name发生变化时返回true，否则返回false，从而避免重新渲染。
避免直接修改state：
在React中，不应该直接修改state，因为React依赖setState来检测状态的变化并决定是否重新渲染。如果直接修改state，React无法检测到变化，也就无法控制重新渲染。

错误示例：
```
this.state.count = 1;  // 错误的做法
this.setState({ count: 1 });  // 正确的做法
```
使用setState时，React会正确处理状态变化并决定是否重新渲染组件。
避免不必要的setState调用：
每次调用setState时，React都会重新渲染组件。在setState之前，应该先检查状态是否真的发生了变化，如果没有变化，就避免调用setState。

示例：
```
handleChange = (newValue) => {
 if (this.state.value !== newValue) {
   this.setState({ value: newValue });
 }
};
```
使用useMemo和useCallback：
在函数组件中，useMemo和useCallback钩子可以帮助优化性能，避免不必要的计算和函数重新创建。

useMemo：缓存计算结果，只有依赖变化时才重新计算。

“`js
const expensiveComputation = useMemo(() => computeExpensiveValue(a, b), [a, b]);
“`
useCallback：缓存函数实例，避免函数在每次渲染时重新创建。

“`js
const handleClick = useCallback(() => { console.log('Clicked!'); }, []);
“`

总结：

避免React组件的重新渲染主要有以下几种方法：
1. 使用React.memo来优化函数组件；
2. 使用PureComponent来优化类组件；
3. 通过shouldComponentUpdate手动控制组件是否重新渲染；
4. 避免直接修改state，使用setState来更新状态；
5. 避免不必要的setState调用，仅在状态真正变化时调用；
6. 使用useMemo和useCallback钩子来缓存计算结果和函数，避免不必要的计算和函数重新创建。

这些技术可以帮助减少React组件的无效渲染，提高应用的性能，尤其是在大型应用中。

参考回答：

详细讲解与拓展：

总结：

发表评论 取消回复

发表评论取消回复