Jan 20, 2026 • 8 min read • @Higher

深入浅出 React 19：编译器与新 Hook

#React #Frontend #JavaScript

React Compiler 来了

React 19 最大的亮点莫过于 React Compiler (代号 React Forget)。它能够自动优化组件的重新渲染，让我们告别 useMemo 和 useCallback 的手动优化。

以前的优化方式

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

现在的 React 19

你只需要写普通的 JavaScript 代码，编译器会自动处理依赖和缓存：

const expensiveValue = computeExpensiveValue(a, b);

新的 `use()` Hook

use() 是一个新的 API，可以在组件内部读取 Promise 或 Context。

import { use } from 'react';

function Comments({ commentsPromise }) {
  // `use` 会暂停组件渲染，直到 Promise 解析
  const comments = use(commentsPromise);
  return comments.map(comment => <p key={comment.id}>{comment.text}</p>);
}

评论