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

1. 使用 React.memo 记忆组件

当组件的 props 没有改变时，Memoization 可以帮助你跳过重新渲染。然而，如果不实现自定义比较函数，很容易误用 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  handleClick()}>Click me;
}

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

正确用法：

import { useCallback } from 'react';

function ButtonComponent() {
  const handleClick = useCallback(() => {
    // Handle click logic
  }, []);

  return Click me;
}

通过使用 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. Hygraph。 （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