React避免不必要的重新渲染的方法示例

更新时间：2024年10月11日 09:38:17 作者：liangshanbo1215

构建高性能 React 应用程序的关键之一是避免不必要的重新渲染,React 的渲染引擎是高效的,但防止在不需要的地方重新渲染仍然至关重要,在这篇文章中,我们将介绍常见错误以及如何避免它们,需要的朋友可以参考下

1. 使用 React.memo 缓存组件

React.memo 帮助你在组件的 props 没有改变时跳过重新渲染。但是，如果不实现自定义比较函数，很容易滥用 React.memo。

不正确的用法：

const MemoizedComponent = React.memo(MyComponent);

这只检查 props 引用是否发生了变化，这可能并不总是足够的。

正确用法：

const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
  return prevProps.itemId === nextProps.itemId;
});

在这里，我们使用了一个自定义的比较函数，它只在 itemId prop 发生变化时触发重新渲染。

2. 避免过度使用内联函数

在 JSX 中使用内联函数可能会导致不必要的重新渲染，因为 React 在每次渲染时都会将新函数视为新 prop。

不正确的用法：

function ButtonComponent() {
  return <button onClick={() => handleClick()}>Click me</button>;
}

这会导致在每次渲染时重新创建 handleClick，从而导致不必要的重新渲染。

正确用法：

import { useCallback } from 'react';
 
function ButtonComponent() {
  const handleClick = useCallback(() => {
    // Handle click logic
  }, []);
 
  return <button onClick={handleClick}>Click me</button>;
}

通过使用 useCallback，我们记住了 handleClick 函数，防止了每次渲染时不必要的重新创建。

3. 利用 PureComponent

当使用类组件时，使用 React.PureComponent 可以确保组件仅在其 props 或 state 发生变化时重新渲染。如果你使用的是 React.Component，可能会导致不必要的重新渲染。

不正确的用法：

class CardComponent extends React.Component {
  // Component logic
}

正确用法：

class CardComponent extends React.PureComponent {
  // Component logic
}

通过扩展 React.PureComponent 将浅层比较 props 和 state，避免不必要的重新渲染。

4. 优化功能组件中的 useSelector

当从 react-redux 使用 useSelector 时，只选择必要的 state 切片很重要。

不正确的用法：

import { useSelector } from 'react-redux';
 
const DataComponent = () => {
  const globalState = useSelector((state) => state);
  // Render logic
};

这将导致组件在状态的任何部分发生变化时重新渲染。

正确用法：

import { useSelector } from 'react-redux';
 
const DataComponent = () => {
  const selectedData = useSelector((state) => state.specificSlice);
  // Render logic based on specific slice
};

通过仅选择状态的必要部分，可以最大限度地减少重新渲染。

5. 在类组件中实现 shouldComponentUpdate

对于不扩展 PureComponent 的类组件，手动实现 shouldComponentUpdate 可以更精细地控制组件何时重新渲染。

不正确的用法：

class ListItem extends React.Component {
  // Component logic
}

这将在每次父组件渲染时重新渲染，即使 props 和 state 没有改变。

正确用法：

class ListItem extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.itemId !== nextProps.itemId || this.state.value !== nextState.value;
  }
 
  // Component logic
}

通过自定义 shouldComponentUpdate，我们确保组件仅在 itemId prop 或 value 状态发生变化时重新渲染。

以上就是React避免重新渲染的方法示例的详细内容，更多关于React避免重新渲染的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

react实现Radio组件的示例代码
这篇文章主要介绍了react实现Radio组件的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
示例详解react中useState的用法
useState 通过在函数组件里调用它来给组件添加一些内部 state，React 会在重复渲染时保留这个 state，接下来通过一个示例来看看怎么使用 useState吧
2021-06-06
react为什么不推荐使用index作为key
本文主要介绍了react为什么不推荐使用index作为key，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-07-07
详解React中的组件通信问题
本篇文章中主要介绍了详解React中的组件通信问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
useEffect 返回函数执行过程源码解析
这篇文章主要为大家介绍了useEffect 返回函数执行过程源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
React组件如何优雅地处理异步数据详解
这篇文章主要为大家介绍了React组件如何优雅地处理异步数据示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
React useContext与useReducer函数组件使用
useContext和useReducer 可以用来减少层级使用, useContext，可以理解为供货商提供一个公共的共享值，然后下面的消费者去接受共享值，只有一个供货商，而有多个消费者，可以达到共享的状态改变的目的
2023-02-02
react-native-tab-navigator组件的基本使用示例代码
本篇文章主要介绍了react-native-tab-navigator组件的基本使用示例代码，具有一定的参考价值，有兴趣的可以了解一下
2017-09-09
react组件传值的四种方法
本文主要介绍了react组件传值的四种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
React项目中使用zustand状态管理的实现
zustand是一个用于状态管理的小巧而强大的库,本文主要介绍了React项目中使用zustand状态管理的实现,具有一定的参考价值,感兴趣的可以了解一下
2023-10-10