React 18 有哪些新特性？
React 18 alpha 版本刚刚发布。React 18 的主题是通过引入开箱即用的功能和基于“并发渲染”的改进，消除卡顿的用户体验，从而提升 UI 性能。React 18 引入的破坏性变更极少。
让我们来看看 React 18 的主要更新：
根 API
React 18 引入了 Root API ReactDOM.createRoot。在 React 18 之前，我们通常直接ReactDOM.render将组件渲染到页面上。从 React 18 开始，我们将使用 `ReactDOM.createRoot` 创建一个根元素，然后将该根元素传递给渲染函数。好消息是，您当前的代码ReactDOM.render仍然可以正常工作，但是，我们强烈建议您开始过渡到使用`ReactDOM.createRoot`，createRoot因为从 React 18 开始，`ReactDOM.createRoot`render将被标记为默认的根元素deprecated。当前版本ReactDOM.render仅用于方便过渡到 React 18。
React 17：
import ReactDOM from 'react-dom';
import App from 'App';
const container = document.getElementById('app');
ReactDOM.render(<App />, container);
React 18：
import ReactDOM from 'react-dom';
import App from 'App';
const container = document.getElementById('app');
// create a root
const root = ReactDOM.createRoot(container);
//render app to root
root.render(<App />);
自动批处理（开箱即用，可选择退出）：
批量处理是将多个状态更新合并为一个事件，以避免多次重新渲染的过程。以前，React 只会对由 React 事件系统管理的单个事件回调中发生的状态更新进行批量处理，而不会对事件之外发生的状态更新进行批量处理。
但是，启用自动批处理后，所有更新，即使是在 Promise 和 setTimeout 中，都会被批处理。请查看以下示例 -
function handleClick() {
console.log("=== click ===");
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!)
const timeoutCallback = () => {
// Previously, batching didn't work inside timeouts, fetch, promises.
// These two setStates causesd re-render in React 17.
// With React 18, these are now batched.
setCount((c) => c + 1);
setFlag((f) => !f);
};
setTimeout(timeoutCallback, 1000);
}
选择退出：您可以通过以下方式选择退出自动批处理：flushSync
开始过渡（可选）
startTransition可用于标记无需紧急资源更新的 UI 更新。例如：在自动补全字段中输入内容时，会同时发生两件事——闪烁的光标会以视觉方式反馈您正在输入的内容，后台的搜索功能会搜索已输入的数据。
向用户展示视觉反馈非常重要，因此也十分紧迫。搜索操作则不那么紧急，因此可以标记为非紧急。而这正是它startTransition发挥作用的地方。
通过将非紧急的 UI 更新标记为“过渡”，React 可以知道哪些更新需要优先处理，从而更容易优化渲染并消除过时的渲染。标记为非紧急的更新startTransition可能会被紧急更新（例如点击或按键）中断。
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);
});
它与防抖动或setTimeout有何不同？
-
与 setTimeout 不同，startTransition 会立即执行。setTimeout 具有固定的延迟时间，而 startTransition 的延迟时间取决于设备速度以及其他紧急渲染操作。
-
与 setTimeout 不同，startTransition 更新可以被中断，并且不会冻结页面。
-
使用 startTransition 标记后，React 可以跟踪待处理状态。
如何升级到 React 18？
npm install react@alpha react-dom@alpha
将 React.render 改为 React.createRoot
const rootElement = document.getElementById("root");
ReactDOM.createRoot(<App />, rootElement).render(<App />);
请查看 React 工作组 GitHub 上的完整更新列表。
文章来源：https://dev.to/shrutikapoor08/what-s-new-in-react-18-1713