React.JS 18新特性

21-09-11 banq

如果您是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 加载更快的页面。

 

猜你喜欢