跳到主要内容

React 19

关于 React 19 相关知识点总结, 持续更新中…

主要更新内容​

React 19 带来了许多重要的更新和改进，主要包括：

  • 新的 Hooks API
  • 改进的 Suspense 功能
  • 性能优化
  • 更好的开发者体验
  • 新的渲染优化机制

新特性详解​

1. use Hook​

use Hook 是 React 19 引入的一个重要新特性，它允许你在组件内直接使用 Promise。

import { use } from 'react';

function UserProfile({ promise }) {
  const user = use(promise);
  return <h1>{user.name}</h1>;
}

使用场景示例：

async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

function Profile({ id }) {
  const user = use(fetchUser(id));
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
    </div>
  );
}

2. 改进的 Suspense​

React 19 中的 Suspense 支持更多场景，包括服务器组件和数据获取。

import { Suspense } from 'react';

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <ProfilePage />
    </Suspense>
  );
}

// 支持嵌套 Suspense
function ProfilePage() {
  return (
    <div>
      <ProfileHeader />
      <Suspense fallback={<PostsLoading />}>
        <ProfilePosts />
      </Suspense>
    </div>
  );
}

3. 自动批处理优化​

React 19 扩展了自动批处理的范围，提升了性能：

function TodoApp() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  async function handleClick() {
    // React 19 会自动批处理这些更新
    setCount(c => c + 1);
    setFlag(f => !f);
    // 只会触发一次重渲染
  }

  return (
    <button onClick={handleClick}>
      Count: {count}, Flag: {flag.toString()}
    </button>
  );
}

4. 新的 Hooks​

useOptimistic​

用于乐观更新UI：

function MessageThread({ thread }) {
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    thread.messages,
    (state, newMessage) => [...state, newMessage]
  );

  async function sendMessage(text) {
    addOptimisticMessage({ text, sending: true });
    await submitMessage(text);
  }

  return (
    <div>
      {optimisticMessages.map(message => (
        <Message {...message} />
      ))}
    </div>
  );
}

useFormStatus​

用于处理表单状态：

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending}>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  );
}

function Form() {
  return (
    <form action={async (formData) => {
      await submitForm(formData);
    }}>
      <input name="name" />
      <SubmitButton />
    </form>
  );
}

5. 性能优化​

React 19 引入了多项性能优化措施：

// 使用 memo 和 新的优化机制
const MemoizedComponent = memo(function MyComponent({ data }) {
  return (
    <div>
      {/* React 19 改进了重渲染检测 */}
      <ExpensiveTree data={data} />
    </div>
  );
});

// 使用新的 Asset Loading 优化
function App() {
  return (
    <Suspense fallback={<Loading />}>
      {/* React 19 会自动优化资源加载 */}
      <LazyComponent />
    </Suspense>
  );
}

最佳实践​

  1. 使用新的 Hooks API 时，确保遵循 Hooks 规则
  2. 合理使用 Suspense 和错误边界
  3. 利用自动批处理优化性能
  4. 适当使用新的优化 API

注意事项​

  • React 19 需要 Node.js 18.0 或更高版本
  • 某些第三方库可能需要更新才能兼容
  • 建议逐步迁移而不是一次性升级
  • 注意处理异步操作的新模式

升级指南​

  1. 更新依赖：
npm install react@19 react-dom@19
  1. 检查并更新不兼容的代码：
// 旧代码
componentDidCatch(error, info) {
  logError(error, info);
}

// 新代码
function ErrorBoundary({ children }) {
  return (
    <Suspense fallback={<Error />}>
      {children}
    </Suspense>
  );
}
  1. 利用新特性优化应用性能和用户体验。

参考资源​