文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-11-30 15:58

关注

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