React 性能优化：从慢到闪电般快

原文链接 React Performance Optimization: From Slow to Ligthning Fast - 作者 Mahinur Rahman

🚀 `React` 性能优化：从慢到闪电般快

React 本身就很快 - 但是如果你开发不留意，你会感觉它会变慢。随着应用规模变大，会带来糟糕的渲染性能，冗余的绑定和不必要的重新渲染。

本文，我们将通过掌握缓存，懒加载 ，绑定优化 的这些有用的技术来加速我们的应用。我们开始进入正文👇

💡 1. 缓存：禁止不必要的重渲染

React 的组件重渲染的频率比你想象的多。有时候，那是无足轻重的，但是，当是很庞大的组件树或者昂贵的计算参与，那它会变成应用的主要瓶颈。

✅ 在函数组件中使用 `React.memo`

使用 React.memo 来包裹函数组件，防止非属性变更的重渲染：

JAVASCRIPT 复制代码

const ExpensiveComponent = React.memo(({ data }) => {
  // 只有当 data 变更后，才会重渲染
  return <div>{ data }</div>
})

✅ 在昂贵的计算中使用 `useMemo`

JAVASCRIPT 复制代码

const sortedData = useMemo(() => {
  return heavySortFunction(data);
}, [data]);

✅ 在缓存函数中使用 `useCallback`

JAVASCRIPT 复制代码

const handleClick = useCallback(() => {
  doSomething();
}, []);

⚠️ 小技巧：明智使用缓存。在简单的计算中过度使用 useMemo 或者 useCallback 会损性能。

💤 2. 懒加载：只会加载我们想要的

当用户只是需要浏览一两个页面，我们为什么要加载整个应用呢？

✅ 使用`React.lazy` + `Suspense` 进行代码切割

JAVASCRIPT 复制代码

import React, { Suspense } from "react";
const AboutPage = React.lazy(() => import("./AboutPage"));

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

只有当真正渲染 AboutPage 组件，才会加载，这减少了初始化的打包大小。

📦 3. 捆绑拆分：打破整体

把我们的捆绑的代码拆分为小块，以便按需加载。

✅ 使用 `react-router` + 懒加载

JAVASCRIPT 复制代码

import { BrowserRouter, Routes, Route } from "react-router-dom";
const Home = lazy(() => import("./pages/Home"));
const Dashboard = lazy(() => import("./pages/Dashboard"));

<BrowserRouter>
  <Suspense fallback={<div>Loading route...</div>}>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/dashboard" element={<Dashboard />} />
    <Routes>
  </Suspense>
</BrowserRouter>

使用构建工具，比如 Webpack， Vite 或者 Parcel，它们自带了捆绑拆分的功能。

🛠 赢在性能的其他技巧

✅ 使用生产构建命令行构建 npm run build 来确保 React 应用的性能
✅ 在 render 函数中避免使用匿名函数
✅ 在输入事件中使用防抖/节流，比如滚动事件、更改大小事件
✅ 虚拟长列表 可以通过一些库，比如 react-window 或者 react-virtualized 来处理
✅ 避免不必要的上下文更新 - 使用 selectors 或者 memoized providers 来处理更新

📈 衡量性能的工具

React DevTools Profiler - 检测组件渲染的次数
Lighthouse - 审查性能，可访问性等其他指标
Web Vitals - 跟踪真实世界的性能指标（FCP ，LCP , TTI）

**FCP (First Contentful Paint) ** - 衡量的是从页面开始加载到页面内容任何部分在屏幕上渲染的时间。 LCP (Largest Contentful Paint) - 衡量的是从页面开始加载到页面上最大的内容元素在屏幕上渲染的时间。 TTI （Time to Interactive） - 衡量的是从页面开始到页面变得完全可以交互的时间，这意味着页面不仅要加载完成，还能够响应用户的输入。

⚡ 结语

性能是一项重要的功能 - 在满足用户需求的基础上，一个快速的应用意味着更高的用户参与度和转换率。同步应用 memoization ，lazy loading 和 bundle splitting ，我们可以显著地提升 React 应用地速度和响应性。

React 性能优化：从慢到闪电般快