React 19有哪些新特性？

写在前面

2024.12.5，React 团队在 react.dev/blog 上发表了帖子 react.dev/blog/2024/1… React 19 正式进入了 stable 状态
React 团队介绍了一些新的特性和 Breaking Changes，并提供了升级指南，

React 19: 新更新、新特性和新Hooks

React 19是React框架的最新版本，带来了许多令人兴奋的新更新、新特性和新Hooks。这些改进旨在提高开发效率、增强性能和简化代码结构。在本文中，我们将详细介绍React 19的主要更新和新特性，并提供实际的例子来帮助你更好地理解它们。

1. Concurrent React

Concurrent React是React 19中最重要的更新之一。它允许React在后台渲染多个版本的UI，以便在需要时快速切换。这意味着你的应用程序可以更快地响应用户输入和网络请求，提供更流畅的用户体验。

1.1 Suspense for Data Fetching

Suspense是Concurrent React的核心概念之一。它允许你在等待异步数据时显示一个加载指示器，而不是阻塞整个UI。以下是一个使用Suspense进行数据获取的示例：

import { Suspense } from 'react';function ProfilePage() {return (<Suspense fallback={<div>Loading...</div>}><ProfileDetails /></Suspense>);
}function ProfileDetails() {const user = useAsyncData(() => fetchUser());return <div>{user.name}</div>;
}function useAsyncData(loaderFn) {const [data, setData] = useState(null);const [error, setError] = useState(null);const [loading, setLoading] = useState(true);useEffect(() => {setLoading(true);loaderFn().then((data) => {setData(data);setLoading(false);}).catch((error) => {setError(error);setLoading(false);});}, [loaderFn]);if (loading) throw new Promise(() => {});if (error) throw error;return data;
}

在这个例子中，ProfileDetails组件使用useAsyncData Hook来获取用户数据。如果数据还在加载中，useAsyncData会抛出一个Promise，触发Suspense机制并显示加载指示器。

1.2 useTransition Hook

useTransition Hook是另一个重要的Concurrent React特性。它允许你在进行昂贵的UI更新时，暂停其他更新，以避免阻塞用户输入。以下是一个使用useTransition Hook的示例：

import { useTransition } from 'react';function SearchResults({ query }) {const [isPending, startTransition] = useTransition();const results = useSearchResults(query);return (<div>{isPending? (<div>Loading...</div>) : (<ul>{results.map((result) => (<li key={result.id}>{result.title}</li>))}</ul>)}</div>);
}

在这个例子中，SearchResults组件使用useTransition Hook来暂停其他更新，直到搜索结果加载完成。

2. Server Components

Server Components是React 19中引入的一种新型组件类型。它们允许你在服务器端渲染UI，并将其发送到客户端。这可以提高性能和SEO友好性。以下是一个简单的Server Component示例：

import { server } from 'react';function ServerComponent() {return <div>Hello, Server!</div>;
}export default server(ServerComponent);

在这个例子中，ServerComponent是一个Server Component，它将在服务器端渲染并发送到客户端。

3. Automatic Batching

在React 19中，所有的state更新都将被自动批处理。这意味着如果你在一个事件处理程序中多次调用setState，React将只会执行一次重新渲染操作。这可以大大提高性能。以下是一个示例：

function MyComponent() {const [count1, setCount1] = useState(0);const [count2, setCount2] = useState(0);function handleClick() {setCount1(count1 + 1);setCount2(count2 + 1);}return (<div><p>Count 1: {count1}</p><p>Count 2: {count2}</p><button onClick={handleClick}>Increment</button></div>);
}

在这个例子中，handleClick函数中有两个setState调用。但是，由于自动批处理，React只会执行一次重新渲染操作。

4. New Hooks

React 19还引入了一些新的Hooks，包括：

4.1 useId Hook

useId Hook生成一个唯一的ID，用于标识DOM元素或其他用途。以下是一个示例：

import { useId } from 'react';function MyComponent() {const id = useId();return <div id={id}>Hello, World!</div>;
}

在这个例子中，useId Hook生成一个唯一的ID，并将其分配给div元素的id属性。

4.2 useSyncExternalStore Hook

useSyncExternalStore Hook允许你在React组件中使用外部存储（如Redux或MobX）。以下是一个示例：

import { useSyncExternalStore } from 'react';
import { store } from './store';function MyComponent() {const state = useSyncExternalStore(store.subscribe, store.getState, store.getSnapshot);return <div>{state.count}</div>;
}

在这个例子中，useSyncExternalStore Hook订阅了Redux存储的更新，并在组件中使用最新的状态。

结论

React 19带来了许多令人兴奋的新更新、新特性和新Hooks。这些改进将帮助你构建更高效、更流畅和更可维护的React应用程序。通过使用Concurrent React、Server Components、自动批处理和新的Hooks，你可以提高你的开发效率和应用程序的性能。