后端开发教程 - Java、Spring Boot 实战 - msg200.com
你准备好迎接 React 18 了吗？
嘿，程序员们！
如果你是一名 React 开发者，那么你可能已经听说过 React 的最新版本——React 18 Alpha。团队仍在努力进行更新，还有很多内容需要完善，所以在本文中，让我们看看这个版本中发生了什么，并将其分解成简单的内容。
每次有版本更新时，我们首先想到的是最新一组更改是否会破坏您当前的设置，或者您是否必须学习完全不相关的新概念？
答案是否定的，我们将能够采用 React 18 而无需重写，并按照自己的节奏尝试新功能。
React 18 – 我们能期待什么？
1.开箱即用的改进（包括自动批处理），
2.新的流式服务器渲染器，内置对 React.lazy 的支持，
3.其他并发功能，如 startTransition、useDeferredValue，
4.新的根 API。
此版本更侧重于用户体验和内部架构的改进，包括对并发特性的适配。
然而，React 18 中最重要的新增功能似乎是并发渲染和相关的并发模式。
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>
);
}
这对性能非常有利，因为它避免了不必要的重新渲染。
然而，React 过去在执行批处理时并不一致。这是因为 React 过去只在浏览器事件（例如点击）期间进行批处理更新，但这里我们在事件处理完毕后（在 fetch 回调中）更新状态：
function App() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
function handleClick() {
fetchSomething().then(() => {
// React 17 and earlier does NOT batch these because
// they run *after* the event in a callback, not *during* it
setCount(c => c + 1); // Causes a re-render
setFlag(f => !f); // Causes a re-render
});
}
return (
<div>
<button onClick={handleClick}>Next</button>
<h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
</div>
);
}
如果我不想批处理怎么办？
通常情况下，批处理是安全的，但有些代码可能需要在状态改变后立即从 DOM 中读取数据。对于这些用例，你可以使用 ReactDOM.flushSync() 来退出批处理：
import { flushSync } from 'react-dom'; // Note: react-dom, not react
function handleClick() {
flushSync(() => {
setCounter(c => c + 1);
});
// React has updated the DOM by now
flushSync(() => {
setFlag(f => !f);
});
// React has updated the DOM by now
}
2. 服务器端渲染
服务器端渲染是一种在服务器上将 JS 数据渲染为 HTML 的方式，以节省前端的计算量。在大多数情况下，这可以提高页面的初始加载速度。
React 通过 4 个连续步骤执行服务器端渲染：
- 在服务器上，获取每个组件的数据。
- 在服务器上，整个应用程序被呈现为 HTML 并发送到客户端。
- 在客户端，获取整个应用程序的 JavaScript 代码。
- 在客户端，JavaScript 将 React 连接到服务器生成的 HTML，这被称为Hydration。在简易版本中（直到 React 17），SSR 必须先加载整个页面才能开始对页面进行 Hydration 操作。
这在 React18 中发生了变化，现在我们可以使用。
流式 HTML
<Suspense fallback={<Spinner />}>
{children}
</Suspense>
通过将组件包装在 中，我们告诉 React 它不需要等待评论开始为页面的其余部分流式传输 HTML。相反，React 将发送占位符（一个旋转按钮）。
当服务器上的评论数据准备就绪时，React 会将额外的 HTML 发送到同一个流中，以及一个最小的内联脚本标签，以将该 HTML 放在“正确的位置”。
选择性水合
在 React 18 之前，如果应用程序的完整 JavaScript 代码尚未加载，则无法启动 Hytion。对于较大的应用程序，此过程可能需要一段时间。
让你在子组件加载之前补充应用程序。
通过将组件包裹在 中，您可以告诉 React 它们不应阻止页面其余部分的流式传输，甚至不应阻止数据同步。这意味着您不再需要等待所有代码加载完毕才能开始数据同步。React 可以在加载过程中同步各个部分。
3. startTransition
startTransition 的一个重要用例是当用户开始在搜索框中输入内容时。输入值必须立即更新，而搜索结果可能需要等待几毫秒（正如用户所期望的那样）。
此 API 提供了一种区分快速更新和延迟更新的方法。延迟更新（即从一个 UI 视图过渡到另一个 UI 视图）称为过渡更新。
对于输入、悬停、点击等紧急更新，我们通常像这样调用道具/功能：
setText(input)
对于非紧急或繁重的 UI 更新，我们可以将其包装在 startTransition API 中，如下所示：
startTransition(() => {
setText(input);
});
4. 新的 Root API
我们通常会创建一个像这样的 Root 级别 DOM，并附加到 React App 中。现在，它已被弃用，并被称为“旧版 Root API”。
import React from 'react';
import ReactDOM from 'react-dom';
const container = document.getElementById('root')
ReactDOM.render(<App />, container);
相反，React18 中引入了一个新的 Root API，如下所示：
import React from 'react';
import ReactDOM from 'react-dom';
import App from 'App'
const container = document.getElementById('root')
const root = ReactDOM.createRoot(container)
root.render(<App />)
React18 将附带旧版 Root API 和新版 Root API，以保持 React 17（或更旧版本）应用程序向 React 18 的平稳过渡。
总结 总而言之
，React 18 带来的功能如下：
- 使用 Transition API 进行并发控制，
- 自动批处理函数调用和事件以提高应用内性能，以及
- 使用 Suspense 后，SSR 的页面加载速度会更快。
非常感谢你阅读这篇文章！希望它能对你有所帮助。
祝你编程愉快💜
