React 19 有什么新功能？带有代码示例的快速指南

**React 19** 已经到来，它带来了新功能，使我们的应用更快、更智能，同时使开发更顺畅。下面简要介绍一下主要亮点，并附上代码片段，帮助您入门。🚀

1.增强的服务器组件

服务器组件现在更易于使用且功能更强大。您可以无缝混合服务器渲染和客户端渲染的组件。

这是一个简单的例子：

// Server Component
export default function ServerComponent() {
  return This is rendered on the server!;
}

// Client Component
import ServerComponent from './ServerComponent';

export default function ClientComponent() {
  return (
    
      
      This part is interactive on the client.
    
  );
}

2. 更智能的并发渲染

**React 19** 微调了并发渲染。使用 `useTransition`，您可以优先处理紧急更新，同时推迟其他更新。

例子：

const [isPending, startTransition] = useTransition();

function handleClick() {
  startTransition(() => {
    setExpensiveState(someLargeData);
  });
}

3. 惰性组件的自动捆绑

通过自动捆绑，延迟加载组件现在变得更简单，这确保只加载所需的代码。

例子：

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    Loading...

}> ); }

4. 更快补水

水合现在是选择性的，这意味着 React 只会水合最先可见的内容。无需额外的代码 — 开箱即用。

// In React 19, hydration automatically prioritizes critical content:
ReactDOM.hydrateRoot(document.getElementById('root'), );

5. 新 Hooks：useOptimistic 和 useEvent

`useOptimistic` 钩子通过管理临时状态简化了乐观的 UI 更新。

例子：

const [optimisticLikes, setOptimisticLikes] = useOptimistic(0, (prev, newLike) => prev + newLike);

function handleLike() {
  setOptimisticLikes(1); // Update UI instantly
  postLikeToServer();    // Sync with server in the background
}

`useEvent` 有助于稳定的事件处理程序，避免不必要的重新渲染。

例子：

const handleClick = useEvent(() => {
  console.log('Button clicked!');
});

结论

**React 19** 的核心在于速度、效率和开发者的幸福感。从更智能的 Hydration 到令人兴奋的新 Hooks。

您最喜欢哪个功能？在评论中分享您的想法！

更多功能 https://react.dev/blog/2024/04/25/react-19