React 18 来了！有什么新功能？

React 核心团队近期发布了 React 18 的 alpha 版本，该版本更加注重用户体验和内部架构的改进，包括对并发特性的适配。

我们可以使用以下命令立即安装 React 18：

npm install react@alpha 

还有 ReactDOM，

npm install react-dom@alpha

什么是新的？

1. 新的 Root API：

我们通常会创建一个类似他的 Root DOM 层级，并附加 React App。现在，这种方式已被弃用，并被称为“Legacy Root API”。

import React from 'react';
import ReactDOM from 'react-dom';

const container = document.getElementById('root') 

ReactDOM.render(<App />, container);

相反，Root API在 React18 中引入了一个新功能，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'App'

const container = document.getEleementById('root')

const root = ReactDOM.createRoot(container)

root.render(<App />)

React18 将同时发布Legacy Root API，New Root API以保持 React 17（或更早版本）应用程序向 React 18 的平稳过渡。

使用新 Root API 覆盖旧 Root API：

有相当多的改进：

a.)易于使用水合物函数，因为我们可以将可选的布尔值直接传递给根。

旧版 Root API：

import ReactDOM from 'react-dom'
import App from 'App'

const container = document.getElementById('app');


ReactDOM.hydrate(<App />, container)

新的 Root API：

import ReactDOM from ‘react-dom’;
import App from 'App';

const container = document.getElementById('root');


const root = ReactDOM.createRoot(container, { hydrate: true });

root.render(<App />);

点击此处了解更多关于补水的信息

b.) 渲染回调的改进：

在旧版 Root API 中，我们可以传递一个渲染回调函数。这是一个匿名函数，在根组件挂载后进行渲染/运行。

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'App'

const container = document.getElementById('root')

ReactDOM.render(<App />, container, function(){
    console.log('render only after initial component rendering')
})

console.log('render at very last')

这种方法在 New Root API 中已经发生了变化，React 团队建议使用requestIdleCallback甚至原生的回调，而不是使用回调setTimeout

2.startTransition API：

这是此版本中引入的新 API，它有助于保持当前网页的响应能力，并能够同时进行大量非阻塞 UI 更新。

一个重要的用例是startTransition，当用户开始在搜索框中输入内容时，输入值必须立即更新，而搜索结果可能需要等待几毫秒（正如用户所期望的那样）。

此 API 提供了一种区分快速更新和延迟更新的方法。
延迟更新（即从一个 UI 视图过渡到另一个 UI 视图）称为过渡更新。

对于输入、悬停、点击等紧急更新，我们通常像这样调用道具/功能：

setText(input)

对于非紧急或繁重的 UI 更新，我们可以将其包装在startTransitionAPI 中，如下所示：

startTransition(() => {

  setText(input);
});

3. 严格模式中的严格效果：

<StrictMode />React 18 将与 Mode 一同发布Strict Effects。就像 一样Strict Mode，这将用于开发版本和改进的 DX。

当组件被包装在严格效果中时，React 将确保“有意”运行两次副作用以检测异常行为/模式，这通常是使用useEffect安装和清理功能时的痛点。

运行两次效果有点像，
mount -> unmount -> mount

4. SSR改进：

在此版本中，服务器端渲染进行了架构上的彻底改进，包括缩短了首次加载屏幕的时间。
在简易版本（直到 React 17）中，服务器端渲染必须加载整个页面才能开始渲染页面。

这在 React18 中发生了变化，现在我们可以使用将 React 组件分解成更小的块<Suspense />。

现在称之为selective hydration。假设屏幕上有 4 到 5 个不同的组件，现在将一个组件包裹起来，一旦代码加载完成，就会开始为该组件进行数据同步，并且不会阻塞页面的其余部分。通过这种策略，页面上更重要的部分/组件可以首先进行交互（在极慢的连接速度下），而其他组件将继续进行数据同步，从而提供良好的用户体验。

<Layout>
  <Suspense fallback={<LoadingSpinner />}>
    <DelayedComponent />
  <Suspense />
<Layout />

在这里，<Delayed />组件只有在获取数据后才会被解析，直到获取到数据后，组件才会恢复到<LoadingSpinner />。

我们可以使用<Suspense />多个组件在不同时间获取数据，保持重要组件的交互。

5.悬念列表：

React 18 的另一个并发功能是“协调”获取大量数据的组件在屏幕上出现的顺序。

A<SuspenseList />接受revealOrderprop，其值为向前、向后或一起

<SuspenseList revealOrder="forwards">
  <Suspense fallback={<LoadingSpinner />}>
    <CardComponent id={1} />
  </Suspense>
  <Suspense fallback={<LoadingSpinner />}>
    <CardComponent id={2} />
  </Suspense>
 </SuspenseList>

此时，卡片组件将按正向显示（直到数据获取完毕，才会返回到 LoadingSpinner 组件）。同样，backwards卡片组件将按反向显示，而 together 属性将使所有内容“一起”渲染。

* 6. useDeferredValue : *

useDeferredValue接受一个状态值和一个以毫秒为单位的超时值，并返回该值的“延迟版本”。该值滞后于指定的超时秒数。

const deferredValue = useDeferredValue(value, { timeoutMs: 3000 });

这可能是文本输入字段的一个用例。文本输入会立即渲染到屏幕上，但是<CardLists />文本属性接收一个 auseDeferredValue并返回一个 a defferedText，这会延迟 3 秒。这会导致卡片列表组件延迟，但用户仍然能够快速地使用文本输入字段。

function App() {
  const [text, setText] = useState("");
  const deferredText = useDeferredValue(text, { timeoutMs: 2000 }); 

  return (
    <div className="App">
    <input value={text} onChange={handleChange} />

      <CardLists text={deferredText} />
    </div>
  );
 }

总结

React18 主要关注并发功能，而不是全面的并发模式（从 React16 开始就被大肆宣传），原因是应用程序和库的作者可以平稳过渡，而不会发生任何重大变化。

React 18 目前处于 alpha 版本，尚不适合投入生产，因此 API 可能会不断改进，直到今年年底（预计）发布稳定版本。关于 React 18 的文章到此结束。

** 我多年来收集的一些重要资源：**

1. https://chan.dev/posts/concurrent-mode-is-dead/
2. https://dev.to/cassidoo/react-18-alpha-is-out-now-what-2apj
3. https://github.com/reactwg/react-18/discussions/4
4. https://github.com/reactwg/react-18/discussions/37

_ 喜欢这篇文章吗？有什么建议或只是想打个招呼？欢迎在Twitter上联系我_

最初由Abhinav Anshul为JavaScript Works撰写