React 性能优化（方向）

React 性能优化的核心目标是减少不必要的渲染 、降低渲染成本 、优化资源加载，最终提升应用响应速度和用户体验。以下从「渲染优化」「代码与资源优化」「运行时优化」「架构层优化」四个维度，系统梳理 React 性能优化方案，包含具体场景、实现方式及原理。

一、渲染优化：减少不必要的重渲染

React 中最常见的性能问题是「组件无意义重渲染」------ 父组件渲染时，子组件即使 props/state 未变化也被迫重新执行 render。需从「控制渲染触发条件」「隔离渲染上下文」两方面优化。

1. 优化组件渲染触发条件

通过控制 shouldComponentUpdate（类组件）或 React.memo（函数组件），判断组件是否需要重新渲染。

（1）类组件：`shouldComponentUpdate` 与 `PureComponent`

shouldComponentUpdate(nextProps, nextState) ：手动判断 props/state 是否变化，返回 false 可阻止重渲染。

示例：避免因父组件传递的不变 props（如函数、对象）导致子组件重渲染：

js 复制代码

class Child extends React.Component {
  shouldComponentUpdate(nextProps) {
    // 仅当关键 props（如 id、name）变化时才渲染
    return nextProps.id !== this.props.id || nextProps.name !== this.props.name;
  }
  render() {
    return <div>{this.props.name}</div>;
  }
}

React.PureComponent ：内置浅比较（shallow comparison）逻辑的类组件，自动对比 props 和 state 的表层属性（基本类型直接比，引用类型比地址）。

✅ 适用场景：组件 props/state 均为基本类型（string/number/boolean），或引用类型（对象/数组）不频繁修改。

❌ 注意：若 props 包含引用类型（如 { age: 18 }），即使内容不变但地址变化（父组件每次渲染重新创建），PureComponent 仍会误判重渲染，需配合「不可变数据」或「缓存引用」优化。

（2）函数组件：`React.memo`

React.memo 是函数组件版的「浅比较优化」，本质是高阶组件（HOC），包裹函数组件后，仅当 props 表层变化时才重新渲染。

基础用法：

js 复制代码

// 仅当 props.name 或 props.id 变化时渲染
const Child = React.memo(({ name, id }) => {
  return <div>{name}</div>;
});

自定义比较逻辑：若需深比较或自定义判断规则，可传递第二个参数（类似 shouldComponentUpdate）：

js 复制代码

const Child = React.memo(
  ({ user, id }) => <div>{user.name}</div>,
  // 自定义比较：仅当 user.id 或 id 变化时渲染
  (prevProps, nextProps) => {
    return prevProps.user.id === nextProps.user.id && prevProps.id === nextProps.id;
  }
);

2. 缓存引用类型：避免浅比较误判

父组件渲染时，若传递给子组件的「引用类型 props」（函数、对象、数组）每次都是新创建的（即使内容不变），会导致 PureComponent/React.memo 误判为「props 变化」，触发不必要重渲染。需通过缓存引用解决。

（1）缓存函数：`useCallback`（函数组件）

useCallback 缓存函数引用，确保组件重渲染时，若依赖项未变化，返回的函数引用始终不变。

问题场景：父组件每次渲染重新创建函数，导致子组件误渲染：

js 复制代码

// 错误：每次 Parent 渲染，handleClick 都是新函数，Child（React.memo）会重渲染
const Parent = () => {
  const handleClick = () => {
    console.log("点击");
  };
  return <Child onClick={handleClick} />;
};

优化方案：用 useCallback 缓存函数，依赖项为空数组时，函数引用永久不变：

js 复制代码

const Parent = () => {
  // 正确：依赖项为空，handleClick 引用始终不变
  const handleClick = useCallback(() => {
    console.log("点击");
  }, []); 
  return <Child onClick={handleClick} />;
};

（2）缓存对象/数组：`useMemo`（函数组件）

useMemo 缓存计算结果（如对象、数组、复杂计算值），确保依赖项未变化时，返回的引用不变。

问题场景：父组件每次渲染重新创建对象，导致子组件误渲染：

js 复制代码

// 错误：每次 Parent 渲染，user 都是新对象，Child（React.memo）会重渲染
const Parent = () => {
  const user = { name: "张三", age: 20 }; 
  return <Child user={user} />;
};

优化方案：用 useMemo 缓存对象，依赖项为空时，对象引用不变：

js 复制代码

const Parent = () => {
  // 正确：依赖项为空，user 引用始终不变
  const user = useMemo(() => ({ name: "张三", age: 20 }), []); 
  return <Child user={user} />;
};

js 复制代码

// 仅当 list 或 keyword 变化时，才重新过滤数据
const filteredList = useMemo(() => {
  return list.filter(item => item.name.includes(keyword));
}, [list, keyword]);

3. 隔离渲染上下文：避免父组件渲染影响子组件

若子组件与父组件状态完全无关，可通过「状态提升」「独立组件拆分」或「使用 React.memo 隔离」，避免父组件渲染时子组件被动重渲染。

典型场景：拆分「频繁更新组件」与「静态组件」

父组件包含「频繁更新的部分」（如计数器）和「静态部分」（如标题、说明），若不拆分，静态部分会随计数器更新而重渲染：

js 复制代码

// 错误：Counter 更新时，Title 也会重渲染
const Parent = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <Title text="静态标题" /> {/* 无需更新 */}
      <Counter count={count} onIncrement={() => setCount(count + 1)} /> {/* 频繁更新 */}
    </div>
  );
};

优化方案：用 React.memo 包裹 Title，或拆分 Parent 为「状态组件」和「静态组件」：

js 复制代码

// 正确：Title 被 React.memo 包裹，props 不变时不重渲染
const Title = React.memo(({ text }) => <h1>{text}</h1>);

const Parent = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <Title text="静态标题" /> {/* 不重渲染 */}
      <Counter count={count} onIncrement={() => setCount(count + 1)} /> {/* 正常渲染 */}
    </div>
  );
};

二、代码与资源优化：降低渲染成本

即使渲染触发合理，若代码逻辑复杂、资源体积大，仍会导致渲染缓慢。需从「代码精简」「资源加载」「DOM 优化」三方面入手。

1. 代码层面：精简逻辑与依赖

（1）避免渲染时执行高开销操作

渲染阶段（render 或函数组件主体）应仅做「UI 描述相关逻辑」，避免执行耗时操作（如 API 请求、大数据计算、DOM 操作）。

错误示例：渲染时请求数据，导致每次渲染都触发请求：

js 复制代码

const Child = () => {
  // 错误：每次渲染都会执行 fetch，且可能导致竞态问题
  fetch("/api/data").then(res => res.json()); 
  return <div>内容</div>;
};

正确方案：将高开销操作放在「副作用钩子」中（useEffect/componentDidMount），控制执行时机：

js 复制代码

const Child = () => {
  useEffect(() => {
    // 正确：仅组件挂载时执行一次请求
    fetch("/api/data").then(res => res.json());
  }, []); 
  return <div>内容</div>;
};

（2）按需引入依赖与组件

第三方库按需引入：避免全量引入大体积库（如 Lodash、Ant Design），仅引入所需模块，减少打包体积。

示例：Lodash 按需引入：

js 复制代码

// 错误：全量引入 Lodash（体积大）
import _ from "lodash";
// 正确：仅引入 debounce 模块
import debounce from "lodash/debounce";

组件按需加载 ：通过「动态 import() + React.lazy + Suspense」，实现路由或组件级别的按需加载，减少首屏加载时间。

示例：路由按需加载（配合 React Router）：

js 复制代码

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

// 动态引入组件（打包时拆分为独立 chunk）
const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));

const App = () => (
  <Router>
    {/* Suspense 提供加载 fallback（如骨架屏） */}
    <Suspense fallback={<div>加载中...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);

2. 资源层面：优化图片与静态资源

图片优化：
- 使用「响应式图片」（srcset + sizes），根据设备分辨率加载合适尺寸的图片；
- 采用现代图片格式（WebP、AVIF），比 JPG/PNG 体积小 25%-50%；
- 图片懒加载：用 loading="lazy"（原生）或 React 懒加载库（如 react-lazyload），避免首屏加载非可视区域图片。
- 示例：原生懒加载图片：
html 复制代码
```
<img 
  src="image.webp" 
  alt="描述" 
  loading="lazy" // 可视区域外图片延迟加载
  srcset="image-480w.webp 480w, image-800w.webp 800w" 
  sizes="(max-width: 600px) 480px, 800px"
/>
```
静态资源 CDN 分发：将 JS、CSS、图片等资源部署到 CDN，利用 CDN 节点缓存和就近访问，降低资源加载延迟。

3. DOM 层面：减少 DOM 操作与节点数量

React 最终会将虚拟 DOM 转换为真实 DOM，DOM 节点越多、操作越频繁，性能开销越大。

（1）减少不必要的 DOM 节点

避免嵌套过深的 DOM 结构（如 div > div > div > span），尽量扁平化；

用「碎片（Fragment）」代替无意义的容器 div，减少多余节点：

js 复制代码

// 错误：多余的 div 容器
const List = () => (
  <div>
    <Item1 />
    <Item2 />
  </div>
);
// 正确：用 Fragment 包裹，不生成额外 DOM 节点
const List = () => (
  <>
    <Item1 />
    <Item2 />
  </>
);

（2）优化列表渲染：`key` 与虚拟列表

列表是 React 中常见的高频渲染场景，需重点优化：

设置唯一且稳定的 key ：key 是 React 识别列表项身份的标识，需满足「唯一」「稳定」（不随渲染顺序变化）。

❌ 错误：用索引（index）作为 key（若列表删除/插入项，会导致 key 与项错位，引发 DOM 复用错误和重渲染）；

✅ 正确：用列表项的唯一 ID（如后端返回的 id）作为 key：

js 复制代码

const TodoList = ({ todos }) => (
  <ul>
    {todos.map(todo => (
      <li key={todo.id}>{todo.content}</li> // 用唯一 ID 作为 key
    ))}
  </ul>
);

虚拟列表（Virtual List） ：当列表数据量极大（如 1000+ 项）时，即使只渲染可视区域的项，隐藏非可视区域的项，大幅减少 DOM 节点数量。

常用库：react-window（轻量）、react-virtualized（功能全）。

示例（react-window）：

js 复制代码

import { FixedSizeList as List } from "react-window";

const BigList = ({ data }) => {
  // 渲染单个列表项
  const Row = ({ index, style }) => (
    <div style={style}>{data[index]}</div>
  );

  return (
    <List
      height={500} // 列表容器高度
      itemCount={data.length} // 总数据量
      itemSize={50} // 单个列表项高度
      width="100%" // 列表容器宽度
    >
      {Row}
    </List>
  );
};

三、运行时优化：提升交互响应速度

运行时优化聚焦于「用户交互」场景（如输入、点击、滚动），减少延迟，提升流畅度。

1. 防抖（Debounce）与节流（Throttle）

对于高频触发的事件（如输入框 onChange、滚动 onScroll、窗口 resize），需通过防抖或节流限制函数执行频率，避免频繁触发导致卡顿。

防抖（Debounce） ：事件触发后延迟 N 毫秒执行函数，若 N 毫秒内再次触发，则重新计时（适用于输入搜索、表单提交）。
节流（Throttle） ：每隔 N 毫秒仅执行一次函数，无论事件触发多少次（适用于滚动加载、窗口 resize）。

示例：输入框搜索防抖（用 Lodash 的 debounce）：

js 复制代码

import { useState, useCallback } from "react";
import debounce from "lodash/debounce";

const SearchInput = () => {
  const [value, setValue] = useState("");

  // 用 useCallback 缓存防抖函数，避免每次渲染重新创建
  const fetchSearchResult = useCallback(
    debounce((keyword) => {
      // 发送搜索请求
      fetch(`/api/search?keyword=${keyword}`).then(res => res.json());
    }, 300), // 300ms 防抖延迟
    []
  );

  const handleChange = (e) => {
    const keyword = e.target.value;
    setValue(keyword);
    fetchSearchResult(keyword); // 触发防抖函数
  };

  return <input type="text" value={value} onChange={handleChange} />;
};

2. 优化状态更新：批量更新与优先级

React 内部会对「同步状态更新」进行批量合并，减少渲染次数，但「异步场景」（如 setTimeout、Promise 回调）中，批量更新会失效，导致多次渲染。

（1）强制批量更新：`unstable_batchedUpdates`

若需在异步场景中批量更新状态，可使用 React 提供的 unstable_batchedUpdates（注意：虽带 unstable，但在实际项目中已广泛使用，未来可能转正）。

示例：Promise 回调中批量更新状态：

js 复制代码

import { unstable_batchedUpdates } from "react-dom";

const Parent = () => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  const handleClick = () => {
    fetch("/api/data")
      .then(res => res.json())
      .then(() => {
        // 未批量：会触发 2 次渲染
        // setCount1(count1 + 1);
        // setCount2(count2 + 1);

        // 批量更新：仅触发 1 次渲染
        unstable_batchedUpdates(() => {
          setCount1(count1 + 1);
          setCount2(count2 + 1);
        });
      });
  };

  return <button onClick={handleClick}>更新</button>;
};

（2）优先级调度：`useDeferredValue` 与 `startTransition`

React 18 引入「并发渲染」机制，允许将状态更新标记为「低优先级」，避免高优先级更新（如输入、点击）被阻塞。

useDeferredValue：延迟更新低优先级状态（如列表过滤结果），优先保证高优先级操作（如输入框输入）的响应速度。

示例：输入时优先更新输入框，延迟更新过滤后的列表：

js 复制代码

import { useDeferredValue, useState } from "react";

const SearchList = ({ list }) => {
  const [keyword, setKeyword] = useState("");
  // 延迟更新过滤结果（低优先级）
  const deferredKeyword = useDeferredValue(keyword);
  // 仅当 deferredKeyword 变化时，才重新过滤（避免输入时频繁计算）
  const filteredList = list.filter(item => item.includes(deferredKeyword));

  return (
    <div>
      <input 
        type="text" 
        value={keyword} 
        onChange={(e) => setKeyword(e.target.value)} 
        placeholder="输入搜索"
      />
      <ul>
        {filteredList.map((item, idx) => (
          <li key={idx}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

startTransition：将状态更新标记为「过渡任务」（低优先级），确保高优先级更新（如点击按钮）不被阻塞。

示例：点击按钮时，优先更新按钮状态，延迟更新大数据列表：

js 复制代码

import { useState, startTransition } from "react";

const BigDataList = ({ data }) => {
  const [isLoading, setIsLoading] = useState(false);
  const [filteredData, setFilteredData] = useState([]);

  const handleFilter = () => {
    // 高优先级：立即更新加载状态
    setIsLoading(true);
    // 低优先级：标记为过渡任务，避免阻塞 UI
    startTransition(() => {
      // 耗时过滤操作
      const result = data.filter(item => item.value > 1000);
      setFilteredData(result);
      setIsLoading(false);
    });
  };

  return (
    <div>
      <button onClick={handleFilter} disabled={isLoading}>
        过滤数据
      </button>
      {isLoading ? <div>加载中...</div> : (
        <ul>{filteredData.map(item => <li key={item.id}>{item.name}</li>)}</ul>
      )}
    </div>
  );
};

四、架构层优化：从根源减少性能瓶颈

若应用规模较大，需从架构设计层面优化，避免后期性能问题难以修复。

1. 状态管理优化

状态分层：将状态分为「全局状态」（如用户信息、主题）和「局部状态」（如组件内部弹窗显示/隐藏），避免局部状态上升到全局（如 Redux）导致不必要的全局重渲染。
- 全局状态：用 Redux Toolkit（配合 createSelector 缓存计算结果）、Zustand、Jotai 等，减少全局状态更新时的组件重渲染；
- 局部状态：优先用 useState/useReducer，避免过度依赖全局状态。
缓存选择器（Selector） ：在 Redux 中，用 reselect 库的 createSelector 缓存派生数据（如过滤、排序后的列表），避免每次全局状态更新时重复计算。

示例：

js 复制代码

import { createSelector } from "@reduxjs/toolkit";

// 基础选择器：获取原始列表
const selectTodos = state => state.todos;
// 缓存选择器：仅当 todos 变化时，才重新过滤
export const selectCompletedTodos = createSelector(
  [selectTodos],
  (todos) => todos.filter(todo => todo.completed)
);

2. 避免过度使用 Context

Context 会导致「订阅 Context 的组件」在 Context 值变化时全部重渲染，即使组件未使用变化的部分。若 Context 包含频繁更新的数据（如计数器），会导致大量组件无意义重渲染。

优化方案：

拆分 Context：将 Context 按「更新频率」拆分，如「主题 Context」（低频更新）和「用户 Context」（中频更新）分开，避免一个 Context 变化影响所有组件；

Context 与 useMemo 结合：确保 Context.Provider 的 value 引用稳定，避免父组件渲染时 value 重新创建导致所有订阅组件重渲染：

js 复制代码

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");
  // 用 useMemo 缓存 value，避免每次渲染重新创建
  const contextValue = useMemo(() => ({
    theme,
    toggleTheme: () => setTheme(prev => prev === "light" ? "dark" : "light")
  }), [theme]);

  return (
    <ThemeContext.Provider value={contextValue}>
      {children}
    </ThemeContext.Provider>
  );
};

五、性能优化工具：定位瓶颈

优化前需先通过工具定位性能瓶颈，避免盲目优化。

React DevTools Profiler：React 官方调试工具，可录制组件渲染过程，查看「重渲染次数」「渲染耗时」「触发渲染的原因」，精准定位无意义重渲染的组件。
1. 使用方式：打开 Chrome 开发者工具 → React 标签 → Profiler 选项卡 → 点击录制按钮 → 操作应用 → 停止录制，查看渲染报告。
Lighthouse：Chrome 内置工具，可评估应用的「性能得分」，并提供具体优化建议（如图片优化、代码分割、首次内容绘制（FCP）优化）。
1. 使用方式：打开 Chrome 开发者工具 → Lighthouse 选项卡 → 勾选「Performance」→ 点击「Generate report」。
Chrome Performance 面板：录制应用运行时的 CPU、内存、DOM 操作等数据，分析「长任务」（耗时 > 50ms 的任务），定位阻塞主线程的代码。

总结

React 性能优化需遵循「先定位瓶颈，再针对性优化」的原则，核心思路可归纳为：

减少渲染次数 ：用 React.memo/useCallback/useMemo 控制渲染触发条件，隔离渲染上下文；
降低渲染成本：精简代码逻辑，优化资源加载，减少 DOM 节点；
提升运行时流畅度 ：用防抖/节流限制高频事件，用并发渲染（useDeferredValue/startTransition）优化状态更新优先级；
架构层规避瓶颈：合理分层状态，避免过度使用 Context 和全局状态。

根据应用规模和场景，选择合适的优化方案（如小型应用侧重渲染优化，大型应用需结合架构优化），才能最大化提升 React 应用性能。

React 性能优化（方向）

一、渲染优化：减少不必要的重渲染

1. 优化组件渲染触发条件

（1）类组件：shouldComponentUpdate 与 PureComponent

（2）函数组件：React.memo

2. 缓存引用类型：避免浅比较误判

（1）缓存函数：useCallback（函数组件）

（2）缓存对象/数组：useMemo（函数组件）

3. 隔离渲染上下文：避免父组件渲染影响子组件

典型场景：拆分「频繁更新组件」与「静态组件」

二、代码与资源优化：降低渲染成本

1. 代码层面：精简逻辑与依赖

（1）避免渲染时执行高开销操作

（2）按需引入依赖与组件

2. 资源层面：优化图片与静态资源

3. DOM 层面：减少 DOM 操作与节点数量

（1）减少不必要的 DOM 节点

（2）优化列表渲染：key 与虚拟列表

三、运行时优化：提升交互响应速度

1. 防抖（Debounce）与节流（Throttle）

2. 优化状态更新：批量更新与优先级

（1）强制批量更新：unstable_batchedUpdates

（2）优先级调度：useDeferredValue 与 startTransition

四、架构层优化：从根源减少性能瓶颈

1. 状态管理优化

2. 避免过度使用 Context

五、性能优化工具：定位瓶颈

总结

（1）类组件：`shouldComponentUpdate` 与 `PureComponent`

（2）函数组件：`React.memo`

（1）缓存函数：`useCallback`（函数组件）

（2）缓存对象/数组：`useMemo`（函数组件）

（2）优化列表渲染：`key` 与虚拟列表

（1）强制批量更新：`unstable_batchedUpdates`

（2）优先级调度：`useDeferredValue` 与 `startTransition`