React 18探秘（上）

React 17 那篇没有任何新特性的博客还历历在目，半年多后，终于等来了 17 铺路许久的 18 发布计划，本来想赶紧看看都有些啥，无奈事情略多，一直拖到现在，最近有点点时间，看看 18 给我们带来了什么。

17 发布消息出来的那会我一直好奇这个没有新特性的发布目的是啥，一通搜索之后得到了一些答案：17 在给未来的 Concurrent Mode 铺路，为大家做好未来渐进式升级的准备。 React 的 Concurrent Mode 在下一盘大棋，一盘包括了 RN / Web / SSR / Server Component 的大棋。而这次 18 的发布计划虽然还是没能发布 Concurrent Mode，但也透露了一些未来 Concurrent Mode 的样子。

根据发布计划来看，这次 18 的主要功能可以分成三类：

1. 一些开箱即用的改进，比如自动批量更新
2. 一些新的 API，比如 startTransition
3. 以及新的流式服务端渲染

值得注意的是，这次虽然是一个大版本更新，但是 Concurrent Mode 是一个可选项，博客中提到大部分项目可以做到只消耗一个下午的时间就能完成升级。

自动批量更新

自动批量更新(Automatic batching)是里面最容易理解和使用的新功能。在聊这个功能之前，我们得先理解什么是批量更新(batching)。

我们假设有一段下面的代码：

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

  function handleClick() {
    setCount(c => c + 1); // Does not re-render yet
    setFlag(f => !f); // Does not re-render yet
    // React will only re-render once at the end (that's batching!)
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={
  { color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

如果你在更新 state 的时候是在同一个事件回调里的，那么 React 不会依次更新这些 state，因为这样的更新意味着有多少 state 就会有多少次 re-render。从性能角度考虑，由于这些 state 都是在同一个事件回调中更新的，所以可以认为他们可以一起更新，于是 React 就让这些 state 一次性一起更新了。

但是如果此时的更新发生在 fetch data 或者是 setTimeout 的回调里，那么 React 就不会做这样的优化了，即使那个更新依然在事件回调里：

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

  function handleClick() {
    fetchSomething().then(() => {
      // React 17 and earlier does NOT batch these because
      // they run *after* the event in a callback, not *during* it
      setCount(c => c + 1); // Causes a re-render
      setFlag(f => !f); // Causes a re-render
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Next&