性能优化

React 性能优化的核心在于减少不必要的渲染和降低计算开销。

避免不必要的组件渲染

React 组件在 state 或 props 变化时会重新渲染。如果父组件渲染，子组件也会跟着渲染，即使子组件的 props 没有变化。

优化方式：

1、使用 React.memo() 包裹函数组件。对函数组件进行浅层 props 比较，避免相同 props 下的重复渲染。详见文档

2、类组件使用 React.PureComponent，自动实现 shouldComponentUpdate 的浅比较（props 和 state）。官方将其列为过时的 API，推荐使用函数组件。

class PureComponentExample extends React.PureComponent {
  render() {
    return <div>{this.props.data}</div>;
  }
}

优化状态更新

1. 使用 useCallback 缓存函数，避免因函数引用变化导致子组件重新渲染。
2. 使用 useMemo 缓存计算结果，避免重复计算高开销操作。

参考本博客介绍React.memo、useCallback、useMemo 的区别

优化列表渲染

1、为列表项设置唯一的 key。避免使用数组索引，可能会导致渲染错误或性能问题。

function App() {
  return (
    <>
      {items.map(item => (
        <ListItem key={item.id} data={item} />
      ))}
    </>
  );
}

2、虚拟化长列表，使用 react-virtualized 或 react-window 等库。

代码分割与懒加载

1、使用 React.lazy 和 Suspense 组件实现懒加载。懒加载可以减少初次加载的包体积，提升应用性能，尤其适用于大型项目。

参考本博客介绍的懒加载

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

2、路由级代码分割，参考本博客的路由按需加载。配置 React Router ：

import { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// 懒加载路由组件
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

防抖节流

防抖节流可以减少频繁触发的事件，提高性能。

使用性能分析工具

React DevTools Profiler 是 React DevTools 的一部分，用于性能分析。它提供了对组件渲染次数、更新次数、渲染时间、更新时间等指标的统计信息，可以帮助开发者优化 React 应用的性能。

Chrome Performance 分析。