介绍

React 编译器的自动记忆化主要专注于 提高更新性能（重新渲染现有组件），因此它聚焦于以下两种使用场景：

1. 跳过组件的级联重新渲染
   • 重新渲染 <Parent /> 会导致其组件树中的许多组件重新渲染，即使只有 <Parent /> 发生了变化
2. 跳过 React 外部的昂贵计算
   • 例如，在组件或 Hook 中调用 expensivelyProcessAReallyLargeArrayOfObjects() 这个处理大数据数组的函数

优化重新渲染

React 允许你将 UI 表达为其当前状态的函数（更具体地说：其 props、state 和 context）。在其当前的实现中，当一个组件的状态发生变化时，React 会重新渲染该组件 及其所有子组件，除非你使用了 useMemo()、useCallback() 或 React.memo() 进行手动记忆优化。例如，在以下示例中，每当 <FriendList> 的状态变化时，<MessageButton> 都会重新渲染：

function FriendList({ friends }) {
  const onlineCount = useFriendOnlineCount();
  if (friends.length === 0) {
    return <NoFriends />;
  }
  return (
    <div>
      <span>{onlineCount} online</span>
      {friends.map((friend) => (
        <FriendListCard key={friend.id} friend={friend} />
      ))}
      <MessageButton />
    </div>
  );
}

See this example in the React Compiler Playground

React Compiler automatically applies the equivalent of manual memoization, ensuring that only the relevant parts of an app re-render as state changes, which is sometimes referred to as “fine-grained reactivity”. In the above example, React Compiler determines that the return value of <FriendListCard /> can be reused even as friends changes, and can avoid recreating this JSX and avoid re-rendering <MessageButton> as the count changes.

Expensive calculations also get memoized

React Compiler can also automatically memoize expensive calculations used during rendering:

// **Not** memoized by React Compiler, since this is not a component or hook
function expensivelyProcessAReallyLargeArrayOfObjects() { /* ... */ }

// Memoized by React Compiler since this is a component
function TableContainer({ items }) {
  // This function call would be memoized:
  const data = expensivelyProcessAReallyLargeArrayOfObjects(items);
  // ...
}

See this example in the React Compiler Playground

However, if expensivelyProcessAReallyLargeArrayOfObjects is truly an expensive function, you may want to consider implementing its own memoization outside of React, because:

• React Compiler only memoizes React components and hooks, not every function
• React Compiler’s memoization is not shared across multiple components or hooks

So if expensivelyProcessAReallyLargeArrayOfObjects was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend profiling first to see if it really is that expensive before making code more complicated.