React v18.0有什么新特性?

当React 18在一年前发布时，开发团队承诺将采取循序渐进的策略。现在，一年后，这正是他们所做的，你可以升级你的应用程序到最新版本。

从React 17升级到18只需要一个简单的步骤: 安装最新版本:

npm install react@18 react-dom@18

让我们深入了解一下React 18.0的新特性和更新

Legacy Root API vsNew Root API

LegacyRootAPI:这是使用ReactDOM.render调用的现有API。这将创建一个运行在“遗留”模式下的根，其工作方式与React 17完全相同。在发布之前，React团队会向这个API添加一个警告，表明它已被弃用，并切换到New Root API。
NewRootAPI:使用ReactDOM.createRoot调用New Root API。这将创建一个运行在React 18中的Root，它添加了React 18的所有改进，并允许您使用并发特性。这将是向前发展的Root API。用法:


//React 17
import * as ReactDOM from "react-dom"
import App from "App"

// The <App/> component is directly attached to a DOM element with 
the id of 'app':
ReactDOM.render(<App />, document.getElementById("app"))

New Root API使用ReactDom.createRoot()。创建一个新的根元素，React应用会在其中呈现:

//React 18
import * as ReactDOM from "react-dom"
import App from "App"
// Create a root by using ReactDOM.createRoot():
const root = ReactDOM.createRoot(document.getElementById("app"))
// Render the main <App/> element to the root:
root.render(<App/>)

在Legacy Root API中的Hydrating vs.在New Root API中的Hydrating

import ReactDOM from 'react-dom'
import App from 'App'
//React 17
const container = document.getElementById('app');
ReactDOM.hydrate(<App />, container)

//React 18const 
container = document.getElementById('root');
const root = ReactDOM.createRoot(container, { hydrate: true });
root.render(<App />);

并发特性

在具有并发渲染的React 18中，React可以中断、暂停、恢复或放弃渲染。这使得React能够快速响应用户交互，即使它正在执行繁重的渲染任务。

在React 18之前，渲染是一个单一的、不间断的、同步的事务，一旦渲染开始，就不能被中断。

并发性是React呈现机制的基本更新。并发性允许React中断呈现。

React 18介绍了并发渲染的基础，以及由并发渲染支持的悬疑、流服务器渲染和转换等新特性。

React 18将是React发布的第一个支持并发特性的版本，包括:

startTransition: 让你在耗时严重的的状态转换期间保持UI的响应。

对于新更新，每个状态更新都被划分为以下两类中的一类:紧急更新或转换更新(简称转换)。紧急更新是指用户直觉上希望在心跳中做出反应的操作，如鼠标点击或按键。转换更新是一些小延迟是可以接受的，并且在很多时候是可以预期的，比如搜索查询。startTransitionAPI将其内部的setState调用标记为转换，这意味着它们是可中断的。转换更新也是同步运行的，但是UI在运行时不会被阻塞

import { startTransition } from "react"
// Urgent update that shows whatever is typed by the user:
setInputValue(inputData);

// Transition updates are marked with startTransition:
startTransition(() => {
// A non-urgent, interruptable update of the search query:
setSearchQuery(inputData);
})

如果setSearchQuery(input)没有标记为转换更新，则在每次输入更改后都将锁定UI。现在它被标记为非紧急，用户可以搜索一些内容，改变意见，并决定在UI根据输入更改更新之前导航到另一个页面，而不必等待不感兴趣的UI更新。

你甚至可以跟踪一个转换更新的挂起状态，如果你愿意，可以使用useTransitionhook向用户显示一个加载界面:

import { useTransition } from "react"
const [isPending, startTransition] = useTransition()
// For example, you can show a loading spinner when it's pending:
{
isPending ? <LoadingSpinner /> : null
}

useDeferredValuehook帮助您在保持页面响应的同时，将UI的某些部分的更新延迟到指定的时间段。您还可以给它一个可选的超时。React将尝试尽快更新延迟的值。如果它在给定的超时时间内没有做到这一点，那么它将强制进行更新，从而阻塞进程中的UI。换句话说，延迟值是通过过渡更新而不是紧急更新来更新的，从而使UI在过程中保持响应性

import { useDeferredValue } from "react"

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

useId:我们可以使用这个新钩子在服务器和客户端创建一个新的标识符。

function Checkbox() {
const id = useId();
return (
<>
<label htmlFor={id}>Do you follow This Dot on Twitter?</label>
<input id={id} type="checkbox" name="react"/>
</>
);
};

Automatic batching

React只重新渲染UI一次。这意味着React将所有更改一起批处理(或分组)，所以它不需要进行一次状态更新并重新呈现UI，然后再进行后续的状态更新并再次呈现UI，而是同时进行状态更新并只重新呈现一次UI。

批处理是一种很好的机制，可以避免不必要的UI重渲染，但React 17只在事件处理程序中这样做。承诺链、异步代码或事件处理程序的使用打破了这种行为。使用React 18，批处理在本地事件处理程序、promise和asynchr中自动完成

  // React 17: Re-rendering happens after both of the states are updated
  // This is also done in React 18 by default.
  setIsLoggedIn(loggedIn => !loggedIn);
  setCount(count => count+ 1);
}
// For the following code blocks, React 18 does automatic batching, but React 17 doesn't.
// 1. Promises:
function handleClickEvent() {
  fetchData().then(() => {
    setIsLoggedIn(loggedIn => !loggedIn)
    setCount(count => count+ 1)
  })
}
// 2. Asynchronous code:
setInterval(() => {
  setIsLoggedIn(loggedIn => !loggedIn)
  setCount(count => count+ 1)
}, 3000)
// 3. Native event handlers:
element.addEventListener("click", () => {
  setIsLoggedIn(loggedIn => !loggedIn)
  setCount(count => count+ 1)
})

新的Suspense SSR 和选择性的Hydration

服务器端渲染，也被称为SSR，是一种渲染网页的方式，它让你直接从服务器上的React组件生成HTML并与用户共享HTML。用户甚至可以在JavaScript包加载和运行之前通过SSR预览页面。但是有时候，后端上的JavaScript需要很长时间来处理，这个时间被称为水化时间(呈现React组件和向服务器端呈现的HTML文档添加事件处理程序的过程被称为水化时间)。
React 18将对React SSR的性能进行架构改进。新的更新将允许流媒体HTML直接在服务器上，即，服务器发送组件的片段，因为他们被渲染使用另一个组件被称为Suspense，这决定应用程序的哪些部分可能需要更长的加载和什么应该被直接渲染。使用选择性Hydration。一旦浏览器获得了它的内容和JavaScript代码，每个准备好的组件就会开始渲染。

< SuspenseList > < /SuspenseList >

< SuspenseList >允许您协调它包装的子树的悬念节点内容的出现顺序，即使数据以不同的顺序到达。通常，如果您有多个兄弟悬念边界，它们将尽可能地解决。但是，您可能希望以特定的顺序加载组件，而不管它们以何种顺序解析自己。

import { Suspense, SuspenseList } from "react";<SuspenseList revealOrder="forwards">
<Suspense fallback="Loading first item...">
<FirstItem />
</Suspense>
<Suspense fallback="Loading second item...">
<SecondItem />
</Suspense>
<Suspense fallback="Loading third item...">
<ThirdItem />
</Suspense>
</SuspenseList>

在上面的例子中，即使第三项先加载，它也会渲染Loading third item… ，直到第一项加载完毕。加载第一项时，将呈现第一项，以及第二项和第三项的回退。只有当加载第二个项目时，才能呈现所有三个项目。

revealOrderprop可以向前、向后或同时接受这些值。forward和backward允许内部的悬念边界按照forward和backward顺序进行解析。而together则等待所有边界都解决后再进行渲染。

你也可以给Suspense列表一个tail。tail可以采取崩溃和隐藏的价值。默认情况下，SuspenseList渲染所有回退。然而，如果你不想渲染任何回退，你可以使用tail="hidden"道具，如果你只想渲染最多一个回退，你可以使用tail="collapse "道具。通过这种方式，您可以创建许多备用方案，而不必担心装载区域的混乱

5. Strict模式

React 18中的严格模式将模拟安装、卸载和重新安装组件的前一个状态。这为将来的可重用状态奠定了基础，在此状态下，React可以在卸载之前使用相同的组件状态重新挂载树，从i而立即挂载以前的屏幕。
Strict模式模式将确保组件对多次安装和卸载的效果有弹性。

6. 组件现在可以渲染未定义

如果你从组件返回undefined, React不再抛出错误。允许的组件返回与组件树中间允许的值一致的值。React团队建议使用linter来防止诸如在JSX之前忘记返回语句之类的错误。

在未挂载的组件上没有setState警告

以前，当您在未挂载的组件上调用setState时，React会对内存泄漏发出警告。这个警告是为订阅添加的，但人们主要是在设置状态良好的情况下遇到它的，而解决方法会使代码恶化。

总结

React 18引入了开箱即用的改进，以及看起来令人难以置信的新特性。它为React.js应用程序开发开辟了新的可能性。

更多内容请查看该链接：therahulsarkar.medium.com/whats-new-i…

Reactv18.0有什么新功能?