React 18 新特性详解#

React 18 是 React 的一个重要版本更新，带来了许多令人兴奋的新特性和改进。本文将详细介绍 React 18 的主要新特性，帮助你更好地理解和使用这些功能。

并发渲染（Concurrent Rendering）#

并发渲染是 React 18 的核心特性，它允许 React 准备多个版本的 UI 同时进行。这意味着 React 可以中断渲染过程，优先处理更重要的更新，然后再恢复被中断的渲染。

1
// 启用并发模式
2
import { createRoot } from 'react-dom/client';
3

4
const container = document.getElementById('root');
5
const root = createRoot(container);
6
root.render(<App />);

自动批处理（Automatic Batching）#

React 18 改进了批处理机制，现在可以在更多场景下自动批处理状态更新，减少不必要的重新渲染。

1
// React 17: 会导致两次渲染
2
function handleClick() {
3
  setCount(c => c + 1);
4
  setFlag(f => !f);
5
}
6

7
// React 18: 自动批处理，只渲染一次
8
function handleClick() {
9
  setCount(c => c + 1);
10
  setFlag(f => !f);
11
}
12

13
// 即使在异步操作中也能自动批处理
14
function handleClick() {
15
  fetchSomething().then(() => {
16
    setCount(c => c + 1);
17
    setFlag(f => !f);
18
  });
19
}

新的 Hooks#

useTransition#

useTransition 用于标记非紧急的状态更新，让 React 优先处理更重要的更新。

1
import { useTransition } from 'react';
2

3
function SearchComponent() {
4
  const [isPending, startTransition] = useTransition();
5
  const [input, setInput] = useState('');
6
  const [list, setList] = useState([]);
7

8
  const handleChange = (e) => {
9
    const value = e.target.value;
10
    setInput(value);
11

12
    startTransition(() => {
13
      const filtered = largeList.filter(item => item.includes(value));
14
      setList(filtered);
15
    });
16
  };
17

18
  return (
19
    <div>
20
      <input value={input} onChange={handleChange} />
21
      {isPending && <div>加载中...</div>}
22
      <ul>{list.map(item => <li key={item}>{item}</li>)}</ul>
23
    </div>
24
  );
25
}

useDeferredValue#

useDeferredValue 用于延迟更新某个值，类似于防抖，但由 React 内部优化。

1
import { useDeferredValue } from 'react';
2

3
function SearchResults({ query }) {
4
  const deferredQuery = useDeferredValue(query);
5

6
  return (
7
    <div>
8
      <Results query={deferredQuery} />
9
    </div>
10
  );
11
}

useId#

useId 用于生成唯一的 ID，特别适用于可访问性属性。

1
import { useId } from 'react';
2

3
function Form() {
4
  const id = useId();
5

6
  return (
7
    <div>
8
      <label htmlFor={id}>邮箱</label>
9
      <input id={id} type="email" />
10
    </div>
11
  );
12
}

Suspense 改进#

React 18 对 Suspense 进行了重要改进，现在支持服务端渲染。

1
import { Suspense } from 'react';
2

3
function App() {
4
  return (
5
    <Suspense fallback={<Loading />}>
6
      <DataComponent />
7
    </Suspense>
8
  );
9
}

严格模式变化#

React 18 的严格模式会双重调用组件的 effects，帮助开发者发现副作用问题。

1
// 开发模式下，effect 会被调用两次
2
useEffect(() => {
3
  console.log('Effect 被调用');
4
  return () => {
5
    console.log('Cleanup 被调用');
6
  };
7
}, []);

新的客户端和服务器 API#

createRoot#

新的 createRoot API 替代了旧的 render 方法。

1
import { createRoot } from 'react-dom/client';
2

3
const root = createRoot(document.getElementById('root'));
4
root.render(<App />);

hydrateRoot#

用于服务端渲染的 hydration。

1
import { hydrateRoot } from 'react-dom/client';
2

3
hydrateRoot(document.getElementById('root'), <App />);

移除的 API#

React 18 移除了一些过时的 API：

ReactDOM.render → 使用 createRoot
ReactDOM.hydrate → 使用 hydrateRoot
unmountComponentAtNode → 使用 root.unmount()
render 的回调参数

流式服务端渲染（Streaming SSR）#

React 18 支持流式服务端渲染，允许服务器逐步发送 HTML 片段。

1
import { renderToPipeableStream } from 'react-dom/server';
2

3
app.get('/', (req, res) => {
4
  const stream = renderToPipeableStream(<App />, {
5
    onShellReady() {
6
      res.statusCode = 200;
7
      res.setHeader('Content-type', 'text/html');
8
      stream.pipe(res);
9
    },
10
  });
11
});

总结#

React 18 带来了许多重要的改进和新特性，特别是并发渲染和自动批处理，这些都将显著提升 React 应用的性能和用户体验。升级到 React 18 后，你可以逐步采用这些新特性，让应用更加高效和流畅。

注意：React 18 是向后兼容的，你可以逐步迁移，不必一次性更新所有代码。