React18新增特性released的使用

目录

• 新功能：Automatic Batching
• 新功能：Transitions
• 新的Suspense功能
• 新的客户端和服务器Rendering APIs
• React DOM Client
• React DOM Server
• 新的Strict Mode Behaviors
• 新Hooks

React 18 中的新增功能

新功能：Automatic Batching

批处理是指 React 将多个状态更新分组到单个重新呈现中以获得更好的性能。在没有自动批处理的情况下，我们只在 React 事件处理程序中批处理更新。默认情况下，promises、setTimeout、本机事件处理程序或任何其他事件内部的更新不会在 React 中进行批处理。使用自动批处理时，将自动批处理这些更新：

// Before: only React events were batched.
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will render twice, once for each state update (no batching)
}, 1000);

// After: updates inside of timeouts, promises,
// native event handlers or any other event are batched.`
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}, 1000);

新功能：Transitions

Transitions是 React 中的一个新概念，用于区分紧急和非紧急更新。

紧急更新反映了直接交互，如打字、单击、按下等。

过渡更新将 UI 从一个视图转换为另一个视图。

紧急更新，如打字，点击或按下，需要立即响应，以匹配我们对物理对象行为方式的直觉。否则他们会觉得"错了"。但是，过渡是不同的，因为用户不希望在屏幕上看到每个中间值。

例如，当您在下拉列表中选择筛选器时，您希望筛选器按钮本身在单击时立即响应。但是，实际结果可能会单独转换。一个小小的延迟是难以察觉的，而且往往是意料之中的。如果在结果渲染完成之前再次更改滤镜，则只需查看最新结果即可。

通常，为了获得最佳用户体验，单个用户输入应同时导致紧急更新和非紧急更新。您可以在输入事件中使用 startTransition API 来通知 React 哪些更新是紧急的，哪些是"转换"：

import {startTransition} from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});

startTransition 中包装的更新将作为非紧急更新进行处理，如果出现更紧急的更新（如单击或按键），则会中断。如果一个过渡被用户打断（例如，通过连续键入多个字符），React 将抛出未完成的陈旧的渲染工作，只渲染最新的更新。

useTransition：用于启动转换的挂钩，包括用于跟踪挂起状态的值。

startTransition：一种在无法使用挂钩时启动转换的方法。

转换将选择加入并发渲染，从而允许中断更新。如果内容重新挂起，过渡还会告诉 React 继续显示当前内容，同时在后台呈现过渡内容（有关详细信息，请参阅悬念 RFC）。

在此处查看有关过渡的文档.

新的Suspense功能

Suspense 允许您以声明方式指定组件树的某个部分的加载状态（如果该部分尚未准备好显示）：

<Suspense fallback={<Spinner />}>
  <Comments /></Suspense>

Suspense 使"UI 加载状态"成为 React 编程模型中的第一类声明性概念。这使我们能够在其上构建更高级别的功能。

几年前，我们推出了限量版的悬疑。但是，唯一受支持的用例是使用 React.lazy 进行代码拆分，并且在服务器上渲染时根本不支持。

在 React 18 中，我们在服务器上添加了对 Suspense 的支持，并使用并发渲染功能扩展了其功能。

React 18 中的悬念在与过渡 API 结合使用时效果最佳。如果在转换期间挂起，React 将阻止已经可见的内容被回退替换。相反，React 将延迟渲染，直到加载了足够的数据以防止错误的加载状态。

新的客户端和服务器Rendering APIs

在此版本中，我们借此机会重新设计了用于在客户端和服务器上呈现的 API。这些更改允许用户在升级到 React 18 中的新 API 时，在 React 17 模式下继续使用旧 API。

React DOM Client

这些新的 API 现在从 react-dom/client 导出:

createRoot：用于创建要render或unmount的根的新方法。使用它而不是 ReactDOM.render。React 18 中的新功能没有它就无法正常工作。

hydrateRoot：冻结服务器呈现的应用程序的新方法。将它而不是 ReactDOM.hydrate 与新的 React DOM Server API 结合使用。React 18 中的新功能没有它就无法正常工作。

createRoot 和 hydrateRoot 都接受一个名为 onRecoverableError 的新选项，以防您希望在 React 从渲染或用于日志记录的水化错误中恢复时收到通知。默认情况下，React 将在较旧的浏览器中使用 reportError 或 console.error。

React DOM Server

这些新的 API 现在从 react-dom/server 导出，并且完全支持服务器上的流式 Suspense：

renderToPipeableStream：用于在 Node 环境中进行流式处理。

renderToReadableStream：适用于现代边缘运行时环境，如 Deno 和 Cloudflare worker。

现有的 renderToString 方法继续工作，但不鼓励使用。

新的Strict Mode Behaviors

以后我们希望添加一个功能，允许 React 在保留状态的同时添加和删除 UI 的各个部分。例如，当用户离开屏幕并返回时，React 应该能够立即显示上一个屏幕。为此，React 将使用与以前相同的组件状态卸载和重新挂载树。

此功能将为 React 应用程序提供更好的开箱即用性能，但要求组件能够灵活应对多次装载和破坏的效果。大多数效果无需任何更改即可工作，但有些效果假定它们只安装或销毁一次。

为了帮助解决这些问题，React 18 在严格模式下引入了一个新的仅限开发的检查。每当组件首次装载时，此新检查将自动卸载并重新装载每个组件，并在第二次装载时恢复以前的状态。

在此更改之前，React 将挂载组件并创建效果：

React mounts the component.

• Layout effects are created.
• Effects are created.

在 React 18 中的严格模式中，React 将模拟在开发模式下卸载和重新挂载组件：

React mounts the component.

• Layout effects are created.
• Effects are created.

React simulates unmounting the component.

• Layout effects are destroyed.
• Effects are destroyed.

React simulates mounting the component with the previous state.

• Layout effects are created.
• Effects are created.

新Hooks

useId

useId 是一个新的钩子，用于在客户端和服务器上生成唯一 ID，同时避免水化不匹配。它主要用于与需要唯一 ID 的辅助功能 API 集成的组件库。这解决了 React 17 及更低版本中已经存在的问题，但在 React 18 中更为重要，因为新的流式处理服务器呈现器如何无序地交付 HTML。

useTransition

useTransition 和 startTransition 允许您将某些状态更新标记为不紧急。默认情况下，其他状态更新被视为紧急。React 将允许紧急状态更新（例如，更新文本输入）以中断非紧急状态更新（例如，呈现搜索结果列表）。

useDeferredValue

useDeferredValue 允许您推迟重新呈现树的非紧急部分。它类似于去抖动，但与它相比具有一些优点。没有固定的时间延迟，所以 React 会在第一个渲染反映在屏幕上后立即尝试延迟渲染。延迟的渲染是可中断的，并且不会阻止用户输入。

useSyncExternalStore

useSyncExternalStore 是一个新的挂钩，它允许外部存储通过强制对存储的更新进行同步来支持并发读取。在实现对外部数据源的订阅时，它消除了对 useEffect 的需求，并且建议用于与 React 外部的状态集成的任何库。

注意：useSyncExternalStore 旨在供库使用，而不是应用程序代码。

useInsertionEffect

useInsertionEffect 是一个新的钩子，它允许 CSS-in-JS 库解决在渲染中注入样式的性能问题。除非你已经构建了一个CSS-in-JS库，否则我们不希望你使用它。此挂钩将在 DOM 发生突变后运行，但在布局效果读取新布局之前运行。这解决了 React 17 及更低版本中已经存在的问题，但在 React 18 中更为重要，因为 React 在并发渲染期间让位于浏览器，使其有机会重新计算布局。

注意：useInsertionEffect 旨在供库使用，而不是应用程序代码。

到此这篇关于React18新增特性released的使用的文章就介绍到这了,更多相关React18 released内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！