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

React面试题 5月前 0 155

在React中，有几种常用的方法可以避免不必要的组件重新渲染：

使用PureComponent或React.memo：在类组件中，我们可以通过继承React.PureComponent而不是React.Component来自动进行props和state的浅比较。如果props和state没有发生改变，那么组件就不会重新渲染。在函数组件中，我们可以使用React.memo来达到相同的效果。
```
class MyComponent extends React.PureComponent {
 // ...
}

const MyComponent = React.memo(function MyComponent(props) {
 // ...
});
```
优化state和props：如果我们可以保证state或props在值没有改变时引用也不改变，那么我们就可以使用shouldComponentUpdate（在类组件中）或React.memo（在函数组件中）来避免不必要的重新渲染。例如，我们应该避免在渲染方法中创建新的对象或数组，因为这会导致每次渲染时都创建新的引用。
使用useCallback和useMemo Hooks：在函数组件中，我们可以使用useCallback和useMemo Hooks来避免不必要的重新渲染。useCallback可以返回一个记忆化的版本的回调函数，只有当其中的依赖项改变时，它才会返回一个新的回调函数。useMemo与此类似，但是它返回的是记忆化的值。
```
const memoizedCallback = useCallback(
 () => {
   doSomething(a, b);
 },
 [a, b],
);

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```

请注意，虽然避免不必要的重新渲染可以提高性能，但是过度优化可能会导致代码更加复杂，且可能不会带来明显的性能提升。因此，我们应该在确定性能瓶颈真的是由于不必要的重新渲染引起的之后，再进行优化。