减少 React 重渲染以提升 JavaScript 性能

React 是一个流行的 JavaScript 库，用于构建用户界面。它通过使用虚拟 DOM 和组件化的开发模式，使得构建复杂的 UI 变得更加简单。然而，由于 React 的特性，有时会导致不必要的组件重渲染，从而降低应用程序的性能。在本文中，我们将讨论一些减少 React 重渲染的最佳实践，以提高 JavaScript 应用程序的性能。

1. 使用 React.memo 或 PureComponent：React.memo 和 PureComponent 是 React 提供的两个高阶组件，用于优化组件的渲染。它们会对组件的 props 进行浅比较，只有在 props 发生变化时才会触发重新渲染。通过使用这些高阶组件，我们可以避免不必要的重渲染，提高应用程序的性能。

import React from 'react';

const MyComponent = React.memo((props) => {
  // 组件的渲染逻辑
});

export default MyComponent;

2. 使用 useCallback 和 useMemo：React 的 useCallback 和 useMemo 钩子函数可以帮助我们避免在每次渲染时创建新的函数或计算结果。通过使用 useCallback，我们可以确保回调函数只在依赖项发生变化时才会重新创建，从而避免不必要的重渲染。类似地，使用 useMemo 可以缓存计算结果，避免重复计算。

import React, {