React 性能优化全解析：从源码到面试

1
function App() {
2
  // 1. 状态变化
3
  const [count, setCount] = useState(0);
4

5
  // 2. Props 变化
6
  return <ChildComponent value={count} />;
7

8
  // 3. Context 变化
9
  const theme = useContext(ThemeContext);
10

11
  // 4. 父组件渲染
12
  return <ParentComponent />;
13
}

1
Reconciler（协调阶段）- 可中断
2
  ↓
3
render() 计算 Virtual DOM diff
4
  ↓
5
 Commit（提交阶段）- 同步执行
6
  ↓
7
  DOM 更新

1
// 伪代码：Fiber 的可中断执行
2
function workLoop() {
3
  while (nextWorkUnit) {
4
    // 执行一个工作单元
5
    performWork(nextWorkUnit);
6

7
    // 检查是否需要让出主线程
8
    if (shouldYield()) {
9
      // 中断，调度其他任务
10
      requestIdleCallback(workLoop);
11
      return;
12
    }
13
  }
14
}

1
// Scheduler 简化逻辑
2
function shouldYield() {
3
  const currentTime = getCurrentTime();
4
  return currentTime >= deadline;
5
}

1
// React 18 之前
2
button.addEventListener('click', () => {
3
  setCount(1);  // 直接触发重新渲染
4
  setFlag(true); // 再触发一次重新渲染
5
});
6
// 如果检测不到 React 上下文，会触发两次渲染

1
// React 18+
2
button.addEventListener('click', () => {
3
  setCount(1);   // 被批处理
4
  setFlag(true); // 被批处理
5
  setName('test'); // 被批处理
6
});
7
// 只会触发一次渲染

1
function App() {
2
  const [list, setList] = useState([]);
3

4
  const handleLoadMore = () => {
5
    // 大列表更新会分片执行
6
    const newList = generateLargeList();
7
    setList(newList);
8
  };
9
}

1
// 在 React 检测到的环境中（事件处理函数内）- 异步
2
function handleClick() {
3
  setCount(c => c + 1); // 异步，批量处理
4
  console.log(count);   // 打印的是旧值
5
}
6

7
// 在 React 检测不到的环境中（原生事件、setTimeout）- 同步
8
useEffect(() => {
9
  const timer = setInterval(() => {
10
    setCount(c => c + 1); // 同步更新
11
  }, 1000);
12
  return () => clearInterval(timer);
13
}, []);

1
setCount(1); // 触发更新
2
setCount(1); // 被合并，不触发更新
3
setCount(2); // 触发更新

1
function List({ items }) {
2
  return items.map(item => (
3
    <div key={item.id}>{item.name}</div>
4
  ));
5
}

1
// ❌ 错误：index 作为 key
2
items.map((item, index) => (
3
  <div key={index}>{item.name}</div>
4
));
5

6
// ✅ 正确：唯一 id 作为 key
7
items.map(item => (
8
  <div key={item.id}>{item.name}</div>
9
));

1
// 初始渲染
2
['A', 'B', 'C'].map((item, index) =>
3
  <div key={index}>{item}</div>
4
);
5
// 结果：A B C （key: 0, 1, 2）
6

7
// 插入 D 到最前面
8
['D', 'A', 'B', 'C'].map((item, index) =>
9
  <div key={index}>{item}</div>
10
);
11
// 结果：D A B C （key: 0, 1, 2）
12
// 问题：所有节点 key 都变了，React 认为是全量更新！

1
// 初始渲染
2
['A', 'B', 'C'].map(item =>
3
  <div key={item.id}>{item.name}</div>
4
);
5

6
// 插入 D 到最前面
7
[{id: 'd', name: 'D'}, ...].map(item =>
8
  <div key={item.id}>{item.name}</div>
9
);
10
// 结果：D A B C
11
// 优化：只有 D 是新节点，A B C 被复用

1
function Parent() {
2
  const [count, setCount] = useState(0);
3
  return (
4
    <div>
5
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
6
      <HeavyChild />  {/* 每次 count 变化都会重新渲染 */}
7
    </div>
8
  );
9
}

1
const Child = React.memo(({ name, age }) => {
2
  console.log('Child rendered');
3
  return <div>{name} - {age}</div>;
4
});
5

6
// 使用
7
<Child name="Alice" age={25} />;

1
// 简化的 memo 原理
2
function memo(Component) {
3
  return function MemoizedComponent(props) {
4
    const renderCount = useRef(0);
5

6
    if (!is(props, prevProps)) {  // Object.is() 比较
7
      renderCount.current++;
8
      prevProps = props;
9
    }
10

11
    return <Component {...props} />;
12
  };
13
}

1
// ❌ 即使值相同，props 仍被认为变化
2
<Child value={{ name: 'Alice' }} />  // 新对象，引用不同
3

4
// ✅ 可以避免重新渲染
5
const value = useMemo(() => ({ name: 'Alice' }), []);
6
<Child value={value} />

1
function ExpensiveList({ items, filter }) {
2
  const filteredItems = useMemo(() => {
3
    console.log('Filtering...');  // 依赖未变化时不执行
4
    return items.filter(item => item.name.includes(filter));
5
  }, [items, filter]);
6

7
  return filteredItems.map(item => <div key={item.id}>{item.name}</div>);
8
}

1
// React 源码简化版
2
function mountMemo(nextCreate, deps) {
3
  const hook = mountWorkInProgressHook();
4
  const nextDeps = deps === undefined ? null : deps;
5

6
  hook.memoizedState = nextCreate();
7
  hook.memoizedState = [hook.memoizedState, nextDeps];
8

9
  return hook.memoizedState;
10
}
11

12
function updateMemo(nextCreate, deps) {
13
  const hook = updateWorkInProgressHook();
14
  const prevDeps = hook.memoizedState[1];
15

16
  if (objectIs(prevDeps, deps)) {
17
    return hook.memoizedState[0];  // 依赖未变，返回缓存
18
  }
19

20
  const nextValue = nextCreate();  // 依赖变化，重新计算
21
  hook.memoizedState = [nextValue, deps];
22

23
  return nextValue;
24
}

1
function objectIs(x, y) {
2
  return (x === y) || (x !== x && y !== y);  // 处理 NaN
3
}

1
const handleClick = useCallback((event) => {
2
  console.log('Clicked', event);
3
}, []);
4

5
// 等价于
6
const handleClick = useMemo(() => (event) => {
7
  console.log('Clicked', event);
8
}, []);

1
// ❌ 假优化：memo 的子组件接收到的 props 虽然引用没变，
2
//        但 Parent 重新渲染时 Child 仍会被比较
3
const Child = React.memo(({ onClick }) => <button onClick={onClick}>Click</button>);
4

5
function Parent() {
6
  const [count, setCount] = useState(0);
7

8
  // handleClick 引用每次渲染都变化
9
  const handleClick = useCallback(() => {
10
    console.log('clicked');
11
  }, []);
12

13
  return (
14
    <div>
15
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
16
      <Child onClick={handleClick} />
17
    </div>
18
  );
19
}

1
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
2

3
function App() {
4
  return (
5
    <div>
6
      <React.Suspense fallback={<Loading />}>
7
        <HeavyComponent />
8
      </React.Suspense>
9
    </div>
10
  );
11
}

1
<React.Suspense fallback={<Spinner />}>
2
  <Dashboard />        {/* 可以立即渲染 */}
3
  <HeavyChart />      {/* 动态加载，显示 Spinner */}
4
  <RecentActivity />  {/* 可以立即渲染 */}
5
</React.Suspense>

1
class ErrorBoundary extends React.Component {
2
  state = { hasError: false };
3

4
  static getDerivedStateFromError() {
5
    return { hasError: true };
6
  }
7

8
  render() {
9
    if (this.state.hasError) {
10
      return <FallbackUI />;
11
    }
12
    return this.props.children;
13
  }
14
}
15

16
<ErrorBoundary>
17
  <React.Suspense fallback={<Loading />}>
18
    <SlowComponent />
19
  </React.Suspense>
20
</ErrorBoundary>

1
// 简化版的 Lazy 组件实现
2
function lazy(ctor) {
3
  return {
4
    $$typeof: REACT_LAZY_TYPE,
5
    _payload: { status: 'pending', result: null },
6
    _init: function() {
7
      // 实际加载组件
8
      const promise = ctor();
9
      promise.then(
10
        (module) => {
11
          const factory = module.default;
12
          this._payload.status = 'resolved';
13
          this._payload.result = factory;
14
        },
15
        (error) => {
16
          this._payload.status = 'rejected';
17
          this._payload.result = error;
18
        }
19
      );
20
      return promise;
21
    }
22
  };
23
}

1
┌────────────────────────┐
2
│ 可视区域               │
3
│ ┌──────────────────┐  │
4
│ │  visible items  │  │  ← 只渲染这 20 条
5
│ └──────────────────┘  │
6
│                        │
7
│    ┌──────────────┐    │
8
│    │ Buffer items │    │  ← 额外渲染少量 buffer
9
│    └──────────────┘    │
10
└────────────────────────┘
11
        ↓ 滚动
12
┌────────────────────────┐
13
│ 滚动后位置             │
14
│ ┌──────────────────┐  │
15
│ │  new visible     │  │  ← 复用之前的 DOM 节点
16
│ └──────────────────┘  │
17
└────────────────────────┘

1
import { FixedSizeList } from 'react-window';
2

3
function VirtualList({ items }) {
4
  return (
5
    <FixedSizeList height={400} itemCount={items.length} itemSize={50}>
6
      {({ index, style }) => (
7
        <div style={style}>
8
          {items[index].name}
9
        </div>
10
      )}
11
    </FixedSizeList>
12
  );
13
}

1
function calculateVisibleRange(scrollTop, containerHeight, itemHeight) {
2
  const startIndex = Math.floor(scrollTop / itemHeight);
3
  const visibleCount = Math.ceil(containerHeight / itemHeight);
4

5
  return {
6
    startIndex,
7
    endIndex: startIndex + visibleCount
8
  };
9
}

1
function TabSwitch() {
2
  const [activeTab, setActiveTab] = useState('list');
3
  const [isPending, startTransition] = useTransition();
4
  const [content, setContent] = useState([]);
5

6
  const handleTabChange = (tab) => {
7
    setActiveTab(tab);  // 立即更新 Tab 高亮
8
    startTransition(() => {
9
      setContent(generateLargeContent(tab));  // 内容渲染低优先级
10
    });
11
  };
12

13
  return (
14
    <div>
15
      <TabBar active={activeTab} onChange={handleTabChange} />
16
      {isPending ? <Spinner /> : <Content data={content} />}
17
    </div>
18
  );
19
}

1
const SyncLane = 0b0001;
2
const InputContinuousLane = 0b0100;
3
const DefaultLane = 0b1000;
4
const TransitionLane = 0b10000000;

1
// useDeferredValue 示例
2
function SearchResults({ query }) {
3
  const deferredQuery = useDeferredValue(query);
4

5
  // deferredQuery 会滞后更新，允许 UI 先响应输入
6
  const results = useMemo(() =>
7
    searchDatabase(deferredQuery), [deferredQuery]);
8

9
  return (
10
    <div>
11
      <input value={query} onChange={e => setQuery(e.target.value)} />
12
      {results.map(r => <ResultItem key={r.id} {...r} />)}
13
    </div>
14
  );
15
}

1
function Component() {
2
  useLayoutEffect(() => {
3
    // 1. DOM 更新后
4
    // 2. 浏览器绘制前
5
    // 3. 同步执行，会阻塞绘制
6
  }, []);
7

8
  useEffect(() => {
9
    // 1. DOM 更新后
10
    // 2. 浏览器绘制后
11
    // 3. 异步执行，不阻塞绘制
12
  }, []);
13

14
  return <div>Content</div>;
15
}

1
DOM 更新 → useLayoutEffect 同步执行 → 浏览器绘制 → useEffect 异步执行
2
           ↑ 这里会阻塞                              ↑ 这里不会阻塞

1
function Component() {
2
  useEffect(() => {
3
    // ❌ 问题：先绘制，再修改 DOM
4
    element.style.opacity = '0.5';  // 触发回流重绘
5
  }, []);
6

7
  useLayoutEffect(() => {
8
    // ✅ 正确：在绘制前修改
9
    element.style.opacity = '0.5';
10
  }, []);
11
}

1
const state = useSyncExternalStore(
2
  subscribe,      // 订阅数据变化
3
  getSnapshot,    // 获取当前数据快照
4
  getServerSnapshot  // 服务端渲染时的快照
5
);

1
function useStore(store) {
2
  const state = useSyncExternalStore(
3
    store.subscribe,
4
    () => store.getSnapshot().data,
5
    () => INITIAL_SERVER_STATE  // SSR 时使用
6
  );
7

8
  return state;
9
}
10

11
// Redux 集成
12
const useReduxSelector = (selector) => {
13
  return useSyncExternalStore(
14
    store.subscribe,
15
    () => selector(store.getState()),
16
  );
17
};

1
// 编译前
2
function Component({ items, filter }) {
3
  const filtered = items.filter(item => item.id === filter);
4
  return filtered.map(item => <div key={item.id}>{item.name}</div>);
5
}
6

7
// 编译器自动添加 memoization
8
function Component({ items, filter }) {
9
  const filtered = $useMemo(items, filter, () =>
10
    items.filter(item => item.id === filter)
11
  );
12
  return filtered.map(item => <div key={item.id}>{item.name}</div>);
13
}

1
const ThemeContext = createContext('light');
2

3
// Provider
4
function App() {
5
  const [theme, setTheme] = useState('light');
6

7
  return (
8
    <ThemeContext.Provider value={theme}>
9
      <Toolbar />
10
    </ThemeContext.Provider>
11
  );
12
}
13

14
// 消费者
15
function Toolbar() {
16
  const theme = useContext(ThemeContext);
17
  // theme 变化时，这里会重渲染
18
}

1
const UserContext = createContext(null);
2
const ThemeContext = createContext(null);
3

4
// 只消费需要的 Context
5
function Toolbar() {
6
  const theme = useContext(ThemeContext); // 只在这个变化时重渲染
7
}

1
function App() {
2
  const [user, setUser] = useState(null);
3
  const [theme, setTheme] = useState('light');
4

5
  const userValue = useMemo(() => ({ user, setUser }), [user]);
6
  const themeValue = useMemo(() => ({ theme, setTheme }), [theme]);
7

8
  return (
9
    <UserContext.Provider value={userValue}>
10
      <ThemeContext.Provider value={themeValue}>
11
        <Dashboard />
12
      </ThemeContext.Provider>
13
    </UserContext.Provider>
14
  );
15
}

1
// ❌ 粗糙的 State 组织
2
const [state, setState] = useState({
3
  user: null,
4
  posts: [],
5
  comments: [],
6
  loading: false,
7
});
8

9
// ✅ 合理的拆分
10
const [user, setUser] = useState(null);
11
const [posts, setPosts] = useState([]);
12
const [comments, setComments] = useState([]);
13
const [loading, setLoading] = useState(false);

1
function ChatRoom() {
2
  // ✅ 消息列表单独管理，滚动位置独立管理
3
  const [messages, setMessages] = useState([]);
4
  const [scrollPosition, setScrollPosition] = useState(0);
5

6
  // ❌ 不需要拆分的例子
7
  const [position, setPosition] = useState({ x: 0, y: 0 });
8
  // position.x 和 position.y 总是一起使用，合并更合理
9
}

1
// ✅ 好：重渲染逻辑隔离
2
function App() {
3
  const [count, setCount] = useState(0);
4

5
  return (
6
    <div>
7
      <ExpensiveChart data={someData} />
8
      <Counter count={count} onIncrement={() => setCount(c => c + 1)} />
9
    </div>
10
  );
11
}
12

13
// ❌ 差：Counter 重渲染会导致 App 重新渲染，进而导致 Chart 重渲染
14
function App() {
15
  const [count, setCount] = useState(0);
16
  return <Counter count={count} onIncrement={() => setCount(c => c + 1)} />;
17
}

1
// Presentational Component - 容易被 memo 优化
2
const UserAvatar = React.memo(({ user }) => (
3
  <img src={user.avatar} alt={user.name} />
4
));
5

6
// Container Component - 管理状态
7
function UserProfile({ userId }) {
8
  const user = useUser(userId);
9
  return <UserAvatar user={user} />;
10
}

1
// React.memo：防止整个组件重渲染
2
const Child = React.memo(({ name }) => <div>{name}</div>);
3

4
// useMemo：防止计算结果重复计算
5
const expensive = useMemo(() => computeExpensive(items), [items]);