React 性能优化最佳实践

import React, { useState, useMemo, useCallback, useEffect, Suspense } from 'react';

// React.memo 基础用法
const MemoizedComponent = React.memo(function UserCard({ user, onSelect }) {
  return (
    <div className="user-card" onClick={() => onSelect(user.id)}>
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
      <p>{user.email}</p>
    </div>
  );
});

// 自定义比较函数：仅当关心的字段变化时才重渲染
const UserCard = React.memo(
  function UserCard({ user, onSelect }) {
    return <div onClick={() => onSelect(user.id)}>{user.name}</div>;
  },
  (prevProps, nextProps) => {
    // 返回 true 表示"相等"，跳过重新渲染
    return prevProps.user.id === nextProps.user.id &&
           prevProps.user.name === nextProps.user.name;
  }
);

// useMemo 缓存计算结果
function UserList({ users, filterText }) {
  // 只有当 users 或 filterText 变化时才重新过滤
  const filteredUsers = useMemo(() => {
    console.log('Filtering users...');
    return users.filter(user =>
      user.name.toLowerCase().includes(filterText.toLowerCase())
    );
  }, [users, filterText]);

  // 缓存排序结果，避免每次渲染都重新排序
  const sortedUsers = useMemo(() => {
    return [...filteredUsers].sort((a, b) => a.name.localeCompare(b.name));
  }, [filteredUsers]);

  return (
    <ul>
      {sortedUsers.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

// useCallback 缓存函数
function ParentComponent() {
  const [count, setCount] = useState(0);
  const [items, setItems] = useState([]);

  // 缓存事件处理函数，使传给 memo 子组件的引用保持稳定
  const handleClick = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  // 缓存带参数的回调
  const handleItemDelete = useCallback((id) => {
    setItems(prev => prev.filter(item => item.id !== id));
  }, []);

  // 缓存复杂对象，避免每次渲染生成新引用
  const config = useMemo(() => ({
    theme: 'dark',
    locale: 'zh-CN',
    onAction: handleClick
  }), [handleClick]);

  return (
    <div>
      <ChildComponent onClick={handleClick} config={config} />
      <ItemList items={items} onDelete={handleItemDelete} />
    </div>
  );
}

// ❌ 错误一：useCallback 有了，但子组件没被 memo，等于白缓存
function BadCase1() {
  const [n, setN] = useState(0);
  // 花了成本缓存 handleClick，但 PlainButton 每次父级渲染都会重渲染
  const handleClick = useCallback(() => console.log('click'), []);
  return <PlainButton onClick={handleClick} />; // PlainButton 未用 React.memo
}

// ❌ 错误二：依赖数组写错，闭包捕获旧值（stale closure）
function BadCase2({ query }) {
  const [results, setResults] = useState([]);
  // 依赖数组漏了 query，回调永远拿到首次渲染的 query
  const search = useCallback(() => {
    fetch('/api?q=' + query).then(r => r.json()).then(setResults);
  }, []); // 应为 [query]
  return <SearchButton onSearch={search} />;
}

// ❌ 错误三：给极廉价的计算加 useMemo，得不偿失
function BadCase3({ a, b }) {
  // a + b 本身就是纳秒级操作，useMemo 的比较与缓存开销更大
  const sum = useMemo(() => a + b, [a, b]);
  return <div>{sum}</div>;
}

// ✅ 正确一：memo 子组件 + useCallback 稳定引用，配合才生效
const FancyButton = React.memo(function FancyButton({ onClick }) {
  console.log('FancyButton render');
  return <button onClick={onClick}>提交</button>;
});
function GoodCase1() {
  const [n, setN] = useState(0);
  const handleClick = useCallback(() => console.log('submit'), []);
  return (
    <div>
      <span>{n}</span>
      <button onClick={() => setN(n + 1)}>+1</button>
      {/* 点 +1 时 FancyButton 不再重渲染 */}
      <FancyButton onClick={handleClick} />
    </div>
  );
}

// ✅ 正确二：useMemo 缓存真正昂贵的计算
function GoodCase2({ rows }) {
  const stats = useMemo(() => {
    // 假设 rows 有十万条，聚合计算耗时明显
    let total = 0, max = -Infinity;
    for (const r of rows) {
      total += r.amount;
      if (r.amount > max) max = r.amount;
    }
    return { total, avg: total / rows.length, max };
  }, [rows]);
  return <SummaryBar stats={stats} />;
}

// ✅ 正确三：把不依赖 props/state 的常量移到组件外，根本不需要 useMemo
const STATIC_CONFIG = { theme: 'dark', pageSize: 20 };
function GoodCase3() {
  return <Table config={STATIC_CONFIG} />;
}

import React, { useState, useTransition, useDeferredValue, useMemo } from 'react';

// 场景：一个搜索框，输入后要过滤并渲染一个上万项的大列表
// 问题：不优化时，每次打字都要过滤+渲染上万项，输入严重卡顿

// 方案 A：useTransition —— 把"过滤大列表"标记为非紧急
function SearchWithTransition({ allItems }) {
  const [query, setQuery] = useState('');
  const [list, setList] = useState(allItems);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    const value = e.target.value;
    // 紧急更新：输入框必须立刻响应
    setQuery(value);
    // 非紧急更新：大列表过滤可以被打断
    startTransition(() => {
      const filtered = allItems.filter(item =>
        item.name.toLowerCase().includes(value.toLowerCase())
      );
      setList(filtered);
    });
  };

  return (
    <div>
      <input value={query} onChange={handleChange} placeholder="搜索..." />
      {isPending && <span className="hint">更新中...</span>}
      <BigList items={list} />
    </div>
  );
}

// 方案 B：useDeferredValue —— 更简洁，直接延迟消费值
function SearchWithDeferred({ allItems }) {
  const [query, setQuery] = useState('');
  // deferredQuery 会在设备空闲时才追上 query
  const deferredQuery = useDeferredValue(query);

  const filtered = useMemo(() => {
    return allItems.filter(item =>
      item.name.toLowerCase().includes(deferredQuery.toLowerCase())
    );
  }, [allItems, deferredQuery]);

  // 输入是否"落后于"渲染，可用来显示加载态
  const isStale = query !== deferredQuery;

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <div style={{ opacity: isStale ? 0.6 : 1 }}>
        <BigList items={filtered} />
      </div>
    </div>
  );
}

import React, { Suspense, lazy } from 'react';
import { Routes, Route } from 'react-router-dom';

// 路由级代码分割：每个页面单独打包，访问才下载
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
const Analytics = lazy(() => import('./pages/Analytics'));
const Report = lazy(() => import('./pages/Report'));

function App() {
  return (
    <Suspense fallback={<PageSkeleton />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/analytics" element={<Analytics />} />
        <Route path="/report" element={<Report />} />
      </Routes>
    </Suspense>
  );
}

// 组件级懒加载：重型组件（如富文本编辑器、图表库）按需加载
const HeavyEditor = lazy(() => import('./HeavyRichTextEditor'));

function ArticlePage() {
  const [editing, setEditing] = useState(false);
  return (
    <div>
      <button onClick={() => setEditing(true)}>编辑</button>
      {editing && (
        <Suspense fallback={<div>编辑器加载中...</div>}>
          <HeavyEditor />
        </Suspense>
      )}
    </div>
  );
}

// 预加载（preload）：在用户可能点击前提前加载，消除等待
const heavyImport = () => import('./HeavyRichTextEditor');
const HeavyEditorPreload = lazy(heavyImport);

function PreloadExample() {
  return (
    <button
      // 鼠标悬停时就开始下载，点击时几乎无等待
      onMouseEnter={() => { heavyImport(); }}
      onClick={() => {/* 打开编辑器 */}}
    >
      打开编辑器
    </button>
  );
}

import React, { useCallback } from 'react';
import { FixedSizeList, VariableSizeList } from 'react-window';

// 定高列表：每行高度相同，最简单高效
function VirtualizedList({ items }) {
  // Row 必须用 style，react-window 通过绝对定位实现虚拟滚动
  const Row = useCallback(({ index, style }) => (
    <div style={style} className="row">
      <span>{index}</span>
      <span>{items[index].name}</span>
      <span>{items[index].email}</span>
    </div>
  ), [items]);

  return (
    <FixedSizeList
      height={600}
      width="100%"
      itemCount={items.length}
      itemSize={48}
      overscanCount={5} // 视口外额外渲染 5 行，滚动更顺滑
    >
      {Row}
    </FixedSizeList>
  );
}

// 不定高列表：每行高度不同（如聊天气泡、动态内容）
function VariableList({ messages }) {
  const getItemSize = useCallback(
    (index) => (messages[index].long ? 120 : 60),
    [messages]
  );

  const Row = useCallback(({ index, style }) => (
    <div style={style}>{messages[index].text}</div>
  ), [messages]);

  return (
    <VariableSizeList
      height={600}
      width="100%"
      itemCount={messages.length}
      itemSize={getItemSize}
    >
      {Row}
    </VariableSizeList>
  );
}

// 结合无限滚动加载更多
function InfiniteList({ items, loadMore, hasMore }) {
  const Row = useCallback(({ index, style }) => {
    if (index === items.length) {
      return <div style={style}>加载中...</div>;
    }
    return <div style={style}>{items[index].name}</div>;
  }, [items]);

  const handleItemsRendered = ({ visibleStopIndex }) => {
    // 快滚到底部时预加载下一页
    if (hasMore && visibleStopIndex >= items.length - 5) {
      loadMore();
    }
  };

  return (
    <FixedSizeList
      height={600}
      width="100%"
      itemCount={hasMore ? items.length + 1 : items.length}
      itemSize={48}
      onItemsRendered={handleItemsRendered}
    >
      {Row}
    </FixedSizeList>
  );
}

// worker.js —— 运行在独立线程
self.onmessage = function (e) {
  const { rows } = e.data;
  // 假设这是一段耗时数百毫秒的重计算
  const result = rows
    .filter(r => r.active)
    .map(r => ({ id: r.id, score: heavyScore(r) }))
    .sort((a, b) => b.score - a.score);
  self.postMessage(result);
};

function heavyScore(r) {
  let s = 0;
  for (let i = 0; i < 5000; i++) {
    s += Math.sqrt(r.value * i) % 7;
  }
  return s;
}

// 在 React 组件里使用 Web Worker
import React, { useState, useEffect, useRef, useCallback } from 'react';

function useWorker(workerFactory) {
  const workerRef = useRef(null);
  useEffect(() => {
    workerRef.current = workerFactory();
    return () => workerRef.current && workerRef.current.terminate();
  }, [workerFactory]);
  return workerRef;
}

function HeavyComputePage({ rows }) {
  const [result, setResult] = useState([]);
  const [computing, setComputing] = useState(false);
  const workerRef = useWorker(
    useCallback(() => new Worker(new URL('./worker.js', import.meta.url)), [])
  );

  const runCompute = useCallback(() => {
    const worker = workerRef.current;
    if (!worker) return;
    setComputing(true);
    worker.onmessage = (e) => {
      setResult(e.data);
      setComputing(false);
    };
    // 主线程只负责发数据、收结果，重活在 worker 里跑
    worker.postMessage({ rows });
  }, [rows, workerRef]);

  return (
    <div>
      <button onClick={runCompute} disabled={computing}>
        {computing ? '计算中（页面依然流畅）...' : '开始计算'}
      </button>
      <ResultTable data={result} />
    </div>
  );
}

import React, { Profiler } from 'react';

// onRender 回调会在每次被包裹的子树 commit 后触发
function onRenderCallback(
  id,            // Profiler 的标识
  phase,         // "mount"（首次挂载）或 "update"（重渲染）
  actualDuration,// 本次渲染耗时（含子孙）
  baseDuration,  // 不含 memo 优化时的预估耗时
  startTime,     // 本次渲染开始时间
  commitTime     // 本次 commit 时间
) {
  if (actualDuration > 16) {
    console.warn(
      \`[慢渲染] \${id} (\${phase}) 耗时 \${actualDuration.toFixed(1)}ms\`
    );
  }
}

function App() {
  return (
    <Profiler id="UserDashboard" onRender={onRenderCallback}>
      <UserDashboard />
    </Profiler>
  );
}

// 也可以用浏览器原生 Performance API 精确测量某段逻辑
function measureExpensiveWork(work) {
  performance.mark('work-start');
  const result = work();
  performance.mark('work-end');
  performance.measure('expensive-work', 'work-start', 'work-end');
  const entry = performance.getEntriesByName('expensive-work').pop();
  console.log(\`耗时: \${entry.duration.toFixed(2)}ms\`);
  return result;
}

import { useState, useEffect, useRef, useCallback } from 'react';

// 防抖值 Hook：值停止变化 delay 毫秒后才更新
function useDebouncedValue(value, delay = 300) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer); // 值又变了就取消上一次
  }, [value, delay]);
  return debounced;
}

// 防抖回调 Hook
function useDebouncedCallback(callback, delay = 300) {
  const timerRef = useRef(null);
  const callbackRef = useRef(callback);
  callbackRef.current = callback; // 始终指向最新回调，避免闭包陈旧

  return useCallback((...args) => {
    if (timerRef.current) clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => {
      callbackRef.current(...args);
    }, delay);
  }, [delay]);
}

// 节流回调 Hook：固定间隔最多执行一次
function useThrottledCallback(callback, interval = 200) {
  const lastRun = useRef(0);
  const callbackRef = useRef(callback);
  callbackRef.current = callback;

  return useCallback((...args) => {
    const now = Date.now();
    if (now - lastRun.current >= interval) {
      lastRun.current = now;
      callbackRef.current(...args);
    }
  }, [interval]);
}

// 使用：搜索框防抖，避免每敲一个字就发一次请求
function SearchBox() {
  const [text, setText] = useState('');
  const debouncedText = useDebouncedValue(text, 400);

  useEffect(() => {
    if (!debouncedText) return;
    fetch('/api/search?q=' + encodeURIComponent(debouncedText))
      .then(r => r.json())
      .then(/* setResults */);
  }, [debouncedText]);

  return <input value={text} onChange={(e) => setText(e.target.value)} />;
}

// ❌ 高频 color 状态放在顶层，导致昂贵的 <ExpensiveTree /> 每次都重渲染
function BadColorApp() {
  const [color, setColor] = useState('red');
  return (
    <div style={{ color }}>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      <ExpensiveTree /> {/* 与 color 无关，却被连累重渲染 */}
    </div>
  );
}

// ✅ 技巧一：把状态下沉到只需要它的小组件
function GoodColorApp() {
  return (
    <div>
      <ColorPicker /> {/* color 状态封装在这里 */}
      <ExpensiveTree />
    </div>
  );
}
function ColorPicker() {
  const [color, setColor] = useState('red');
  return (
    <div style={{ color }}>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
    </div>
  );
}

// ✅ 技巧二：通过 children 把不变内容"提"进来，隔离重渲染
function ColorContainer({ children }) {
  const [color, setColor] = useState('red');
  return (
    <div style={{ color }}>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      {children} {/* children 引用稳定，color 变时不重渲染 */}
    </div>
  );
}
function App2() {
  return (
    <ColorContainer>
      <ExpensiveTree />
    </ColorContainer>
  );
}

import { produce } from 'immer';

function OptimizedUpdates() {
  const [items, setItems] = useState([]);

  // 函数式更新：不依赖外部 items，useCallback 可空依赖
  const addItem = useCallback((item) => {
    setItems(prev => [...prev, item]);
  }, []);

  // 批量更新：一次 setState 合并多条
  const addMultipleItems = useCallback((newItems) => {
    setItems(prev => [...prev, ...newItems]);
  }, []);

  // immer 处理深层不可变更新，写法直观又安全
  const updateItem = useCallback((id, updates) => {
    setItems(produce(draft => {
      const item = draft.find(i => i.id === id);
      if (item) Object.assign(item, updates);
    }));
  }, []);

  return <ItemList items={items} onAdd={addItem} onUpdate={updateItem} />;
}

import { flushSync } from 'react-dom';

// React 18 中，下面三次更新自动合并为一次渲染（即使在 setTimeout 里）
setTimeout(() => {
  setA(1);
  setB(2);
  setC(3); // 只触发一次渲染
}, 0);

// 需要在更新后立刻读取 DOM 时，才用 flushSync（会打断批处理）
function scrollToBottomAfterAdd(newMsg) {
  flushSync(() => {
    setMessages(prev => [...prev, newMsg]);
  });
  // 此时 DOM 已更新，可安全读取滚动高度
  listRef.current.scrollTop = listRef.current.scrollHeight;
}

import { useSyncExternalStore } from 'react';

// 订阅浏览器在线状态
function useOnlineStatus() {
  return useSyncExternalStore(
    (callback) => {
      window.addEventListener('online', callback);
      window.addEventListener('offline', callback);
      return () => {
        window.removeEventListener('online', callback);
        window.removeEventListener('offline', callback);
      };
    },
    () => navigator.onLine,       // 客户端快照
    () => true                    // 服务端快照（SSR）
  );
}

// 订阅一个极简自定义 store
function createStore(initial) {
  let state = initial;
  const listeners = new Set();
  return {
    getState: () => state,
    setState: (next) => {
      state = typeof next === 'function' ? next(state) : next;
      listeners.forEach(l => l());
    },
    subscribe: (l) => { listeners.add(l); return () => listeners.delete(l); }
  };
}

const counterStore = createStore(0);

function Counter() {
  const count = useSyncExternalStore(
    counterStore.subscribe,
    counterStore.getState
  );
  return <button onClick={() => counterStore.setState(c => c + 1)}>{count}</button>;
}

import React, { useState, useEffect } from 'react';

// 清理 fetch 请求，避免卸载后 setState 与竞态
function DataFetcher({ url }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    async function fetchData() {
      try {
        const response = await fetch(url, { signal: controller.signal });
        const json = await response.json();
        setData(json);
      } catch (error) {
        if (error.name !== 'AbortError') {
          console.error(error);
        }
      }
    }

    fetchData();
    // 卸载或 url 变化时中断上一次请求
    return () => controller.abort();
  }, [url]);

  return data ? <DataDisplay data={data} /> : <Loading />;
}

// 清理定时器与事件监听
function Clock() {
  const [now, setNow] = useState(Date.now());
  useEffect(() => {
    const timer = setInterval(() => setNow(Date.now()), 1000);
    const onResize = () => console.log('resize');
    window.addEventListener('resize', onResize);
    return () => {
      clearInterval(timer);              // 清定时器
      window.removeEventListener('resize', onResize); // 清监听
    };
  }, []);
  return <div>{new Date(now).toLocaleTimeString()}</div>;
}

// 启用 React Compiler 后（示意），下面的组件无需手写 useMemo/useCallback
// 编译器会自动为 expensiveList 和 handleClick 插入记忆化
function ProductList({ products, keyword }) {
  const expensiveList = products
    .filter(p => p.name.includes(keyword))
    .sort((a, b) => b.sales - a.sales);

  const handleClick = (id) => {
    console.log('clicked', id);
  };

  return (
    <ul>
      {expensiveList.map(p => (
        <ProductCard key={p.id} product={p} onClick={handleClick} />
      ))}
    </ul>
  );
}