避免 React 中不必要的重新渲染

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

---

1. 使用 React.memo 记忆组件

当组件的 props 没有改变时，记忆化可以帮助你跳过重新渲染。然而，如果不实现自定义比较函数，很容易误用 React.memo。

错误用法：

const MemoizedComponent = React.memo(MyComponent);

这仅检查 props 引用是否已更改，这可能并不总是足够的。

正确用法：

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

在这里，我们使用自定义比较函数，仅当 itemId 属性更改时才会触发重新渲染。

---

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 或状态更改时重新渲染。如果您使用 React.Component，可能会导致不必要的重新渲染。

错误用法：

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

正确用法：

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

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

---

4. 优化功能组件中的useSelector

当使用react-redux中的useSelector时，仅选择状态的必要部分非常重要。

错误用法：

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 属性或值状态发生变化时重新渲染。

---

结论

通过采用这些技术，您可以显着减少 React 应用程序中不必要的重新渲染，从而获得更好的性能。使用 React.memo 实现记忆化、利用 PureComponent 以及微调 shouldComponentUpdate 是优化 React 组件的关键策略。

了解何时以及如何优化渲染可以通过提供更快、响应更灵敏的应用程序来极大地增强用户体验。

---

参考：

1. 极客们的极客们。 （2023）。 React 中的记忆化是什么？
2. 同步融合。 （2024）。 React 中的记忆化
3. 海格拉夫。 （2024）。什么是 React Memo 以及如何使用它？
4. Refine.dev。 （2024）。带有示例的 React 备忘录指南

如果您发现本指南有用，请考虑与其他人分享！ ？

---

本博客提供了更新且全面的概述，介绍如何避免 React 应用程序中不必要的重新渲染，同时结合最佳实践并更改变量名称，以提高现代 Web 开发实践的清晰度和相关性。

引用：
[1] https://www.geeksforgeeks.org/what-is-memoization-in-react/
[2] https://stackoverflow.com/questions/74013864/why-arent-all-react-components-wrapped-with-react-memo-by-default
[3] https://www.syncfusion.com/blogs/post/what-is-memoization-in-react
[4] https://hygraph.com/blog/react-memo
[5] https://refine.dev/blog/react-memo-guide/
[6] https://dmitripavlutin.com/use-react-memo-wisely/
[7] https://www.topcoder.com/thrive/articles/memoization-in-react-js
[8] https://react.dev/reference/react/memo

以上是避免 React 中不必要的重新渲染的详细内容。更多信息请关注PHP中文网其他相关文章！