Back to Details

optimizing-with-react-compiler

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

React Compiler Awareness

React Compiler 认知

React Compiler (available separately) automatically memoizes code, reducing need for manual optimization. (verify use in project before using this skill)
React Compiler（需单独获取）可自动对代码进行记忆化处理，减少手动优化的需求。（使用此技能前请先确认项目中是否已启用它）

What React Compiler Handles

React Compiler 能处理哪些内容

Automatically memoizes:
  • Component re-renders
  • Expensive calculations
  • Function references
  • Object/array creation
Before (Manual Memoization):
javascript
function Component({ items }) {
  const sortedItems = useMemo(() => {
    return [...items].sort((a, b) => a.name.localeCompare(b.name));
  }, [items]);

  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);

  return <List items={sortedItems} onClick={handleClick} />;
}
After (React Compiler):
javascript
function Component({ items }) {
  const sortedItems = [...items].sort((a, b) => a.name.localeCompare(b.name));

  const handleClick = () => {
    console.log('Clicked');
  };

  return <List items={sortedItems} onClick={handleClick} />;
}
自动记忆化处理以下内容：
  • 组件重渲染
  • 高开销计算
  • 函数引用
  • 对象/数组创建
手动记忆化的旧写法：
javascript
function Component({ items }) {
  const sortedItems = useMemo(() => {
    return [...items].sort((a, b) => a.name.localeCompare(b.name));
  }, [items]);

  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);

  return <List items={sortedItems} onClick={handleClick} />;
}
使用React Compiler后的新写法：
javascript
function Component({ items }) {
  const sortedItems = [...items].sort((a, b) => a.name.localeCompare(b.name));

  const handleClick = () => {
    console.log('Clicked');
  };

  return <List items={sortedItems} onClick={handleClick} />;
}

When Manual Memoization Still Needed

仍需手动记忆化的场景

Keep 
useMemo
when:
  • Extremely expensive calculations (> 100ms)
  • Third-party libraries require stable references
  • React Profiler shows specific performance issues
Keep 
React.memo
when:
  • Component re-renders are very expensive
  • Props rarely change but parent re-renders often
  • Verified performance improvement with Profiler
在以下情况保留
useMemo
：
  • 极高开销的计算（耗时>100ms）
  • 第三方库需要稳定引用
  • React Profiler显示存在特定性能问题
在以下情况保留
React.memo
：
  • 组件重渲染开销极大
  • Props很少变化但父组件频繁重渲染
  • 经Profiler验证能提升性能

Performance Best Practices

性能最佳实践

Do:
  • Trust React Compiler for most optimizations
  • Keep components small and focused
  • Keep state local
  • Use children prop pattern
Don't:
  • Add premature memoization
  • Over-engineer performance
  • Skip measuring actual impact
For comprehensive React Compiler information, see: 
research/react-19-comprehensive.md
lines 1179-1223.
推荐做法：
  • 多数优化场景信任React Compiler即可
  • 保持组件小巧且职责单一
  • 保持状态本地化
  • 使用子组件属性模式
不推荐做法：
  • 过早添加记忆化处理
  • 过度设计性能优化
  • 跳过实际影响的测量
如需了解React Compiler的全面信息，请参阅：
research/react-19-comprehensive.md
第1179-1223行。