如何避免 React 组件重渲染的何避方法

作者：NativeBase 2023-04-06 09:41:00开发 前端 在 ShouldComponentUpdate 或 PureComponent 中进行 Props 和State 的浅比较，如果没有变化，组件重渲则返回 False，何避防止不必要的组件重渲重渲染。

React 组件重渲染可能会导致应用性能下降，何避以下是组件重渲一些避免重渲染的方法和实战经验：

1、使用 shouldComponentUpdate 或 PureComponent

在 shouldComponentUpdate 或 PureComponent 中进行 props 和 state 的何避浅比较，如果没有变化，组件重渲则返回 false，何避防止不必要的组件重渲重渲染。

2、何避使用 React.memo

对于函数组件，组件重渲可以使用 React.memo 高阶组件对组件的何避 props 进行浅比较，如果没有变化，组件重渲则返回缓存的何避组件。

const MyComponent = React.memo((props) => { 
// ...
});

3、使用 useMemo 和 useCallback

对于需要传递给子组件的 props，可以使用 useMemo 缓存计算结果，避免在每次渲染时重新计算。

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

对于需要传递给子组件的回调函数，可以使用 useCallback 缓存函数实例，避免在每次渲染时重新创建函数实例。

const handleClick = useCallback(() => { 
// ...
}, [a, b]);

4、避免更新整个 state

在使用 setState 更新 state 时，确保只更新必要的部分，而不是整个 state 对象。例如，如果只需要更新 state 中的一个属性，可以使用对象的展开语法：

this.setState({  count: this.state.count + 1 });

5、避免在 render 方法中创建新的对象或数组

在 render 方法中创建新的对象或数组会导致组件重渲染，可以将它们提取到组件外部的变量中。

const options = [{  value: 'foo', label: 'Foo' }, {  value: 'bar', label: 'Bar' }];

function MyComponent() { 
return <Select optinotallow={ options} />;
}

6、避免在 render 方法中执行耗时的操作

在 render 方法中执行耗时的操作会导致组件重渲染，可以将它们提前到组件的生命周期方法中执行。

class MyComponent extends React.Component { 
componentDidMount() { 
// 执行耗时操作
}

render() { 
// ...
}
}

以上是一些避免 React 组件重渲染的方法和实战经验，可以根据具体情况选择合适的方法来优化应用性能。

责任编辑：姜华 来源： 今日头条 React 组件重渲染

(责任编辑：综合)