React.JS 18新特性


如果您是React开发人员，那么您可能已经听说过React-React 18 Alpha的最新版本。该团队仍在进行更新，还有很多事情要做，因此在本文中，让我们看看版本中发生了什么并将其分解为简单的内容。
 
1. 自动批处理
React 18 通过默认执行更多批处理来增加开箱即用的性能改进，无需在应用程序或库代码中手动批处理更新。
批处理是 React 将多个状态更新分组到单个重新渲染中以获得更好的性能。简单来说，批处理（分组）意味着将多个状态更新组合到一个渲染中。每当您使用 setState 更改任何函数内的变量时，React 会收集所有 setState，然后一起执行它们，而不是在每个 setState 上进行渲染。这称为批处理。

function 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>
  );
}

这对性能非常有用，因为它避免了不必要的重新渲染。
 
2.服务端渲染
服务端渲染是一种在服务器端将JS数据渲染成HTML的方式，以节省前端的计算量。在大多数情况下，这会导致更快的初始页面加载。
React 分 4 个连续步骤执行服务端渲染：
  1. 在服务器上，为每个组件获取数据。
  2. 在服务器上，整个应用程序被渲染为 HTML 并发送到客户端。
  3. 在客户端，获取整个应用程序的 JavaScript 代码。
  4. 在客户端，JavaScript 将 React 连接到服务器生成的 HTML，即Hydration。在普通版本中（直到 React 17），SSR 必须先加载整个页面，然后才能开始对页面进行保湿。

这在 React18 中发生了变化，现在我们可以使用将 React 组件分解成更小的块 .
 
3.流式 HTML
通过将组件包装其中：
<Suspense fallback={<Spinner />}>
  {children}
</Suspense>

我们告诉 React 它不需要等待为页面的其余部分流式传输 HTML，这时React 将发送占位符（一个spinner）。
当数据在服务器上准备好时，React 会将额外的 HTML 发送到同一个流中，以及一个最小的内联脚本标签，以将该 HTML 放在“正确的位置”。
  
4. 选择性的Hydration
在 React 18 之前，如果应用程序的完整 JavaScript 代码尚未加载，则 hydration 无法启动。对于较大的应用程序，此过程可能需要一段时间。
让您可以在加载子组件之前为应用程序添加hydration 。
通过将组件包装在其中，您可以告诉 React，它们不应该阻止页面的其余部分进行流式传输——甚至是hydration 。这意味着您不再需要等待所有代码加载完毕才能开始hydrating。React 可以在加载部件时对其进行hydrate 。
   
总结总结一下，React 18 带来的特性是：

  1. 使用 Transition API 进行并发控制，
  2. 自动批处理函数调用和事件以提高应用程序内性能，以及
  3. 使用 Suspense 为 SSR 加载更快的页面。