React Compiler 优化中的副作用处理问题解析

背景介绍

React Compiler 是 React 团队开发的一款优化工具，旨在自动处理组件中的性能优化问题，减少开发者手动使用 useMemo 和 useCallback 的需要。但在某些特定场景下，这种自动优化可能会与开发者的预期产生偏差。

问题现象

在 React 19.0.0 版本中，开发者发现了一个关于 cookie 处理的性能优化问题。原本使用 useMemo 手动优化的代码：

function useCookies() {
  const cookie = document.cookie;
  return useMemo(() => {
    console.log("useCookies");
    const cookies = cookie.split("; ");
    const cookieMap = new Map<string, string>();

    for (const cookie of cookies) {
      const [key, value] = cookie.split("=");
      cookieMap.set(key, decodeURIComponent(value));
    }

    return cookieMap;
  }, [cookie]);
}

经过 React Compiler 编译后，useMemo 被移除，代之以编译器的内部缓存机制。但问题在于，document.cookie 是一个可变值，而编译器默认假设全局变量在渲染期间是安全的、不会变化的。

技术原理分析

React Compiler 的核心优化原理基于以下假设：

1. 组件应该是幂等的 - 给定相同的状态和 props，应该返回相同的结果
2. 全局变量（如 document）在渲染期间是安全的、不会变化的

基于这些假设，编译器会：

• 自动识别可以缓存的代码块
• 使用比 useMemo 更高效的内部缓存机制
• 减少不必要的重新计算

但在 document.cookie 这个特殊案例中，这些假设不成立，因为：

• cookie 可以在任何时候被修改
• 它不是 React 状态管理的一部分
• 它的变化不会触发 React 的重新渲染

解决方案

React 核心团队成员 Joseph Savona 提出了两种解决方案：

1. 正确的 React 方式

使用 useEffect 来监听 cookie 变化：

function useCookies() {
  const [cookies, setCookies] = useState(new Map());
  
  useEffect(() => {
    const cookie = document.cookie;
    const cookies = cookie.split("; ");
    const cookieMap = new Map();
    
    for (const cookie of cookies) {
      const [key, value] = cookie.split("=");
      cookieMap.set(key, decodeURIComponent(value));
    }
    
    setCookies(cookieMap);
  }, []); // 可能需要添加依赖项

  return cookies;
}

2. 转换为 React 状态

将 cookie 转换为 React 状态，让编译器能够正确追踪变化：

function useCookies() {
  const [cookie] = useState(document.cookie);
  const cookies = cookie.split("; ");
  const cookieMap = new Map<string, string>();

  for (const cookie of cookies) {
    const [key, value] = cookie.split("=");
    cookieMap.set(key, decodeURIComponent(value));
  }

  return cookieMap;
}

编译后的代码会正确缓存结果，只在 cookie 变化时重新计算。

最佳实践建议

1. 避免在渲染期间访问可变全局变量：如 cookie、localStorage 等
2. 使用 React 状态管理可变数据：让 React 能够追踪变化
3. 使用 useEffect 处理副作用：对于需要在渲染后执行的操作
4. 关注编译器更新：React 团队可能会将 document.cookie 加入"已知不安全API"列表

总结

这个案例展示了 React Compiler 强大优化能力的同时，也揭示了其背后的假设和限制。作为开发者，我们需要理解：

1. React 的幂等性原则是优化的基础
2. 编译器优化依赖于对代码行为的正确假设
3. 对于特殊场景（如可变全局变量），需要采用适当的 React 模式处理

通过这个案例，我们不仅学习了一个具体问题的解决方法，更重要的是理解了 React Compiler 的工作原理和适用边界，这对于编写高性能、可维护的 React 代码至关重要。