React 18已经发布，新特性一览，带你快速了解。
React 18已经发布，新特性一览，带你快速了解。
2022-3-29，React 18发布，带来一些行的 API 特性，本文带你一览新特性。
新增的hooks API
1.useId
useId是新增的用于生成唯一ID值的hook钩子，可客户端和服务器端都可以使用，同时避免 dehydrate 过程中数据不匹配的问题。它主要用于与需要唯一 ID 的可访问性 API 集成的组件库。这解决了 React 17 及更低版本中已经存在的问题，但在 React 18 中更为重要，因为新的流式服务器渲染器如何无序交付 HTML。
2.startTransition 和 useTransition
startTransition 和 useTransition 让您将一些状态更新标记为不紧急。默认情况下，其他状态更新被认为是紧急的。React 将允许紧急状态更新（例如，更新文本输入）以中断非紧急状态更新（例如，呈现搜索结果列表）
3.useDeferredValue
useDeferredValue 让您推迟重新渲染树的非紧急部分。它类似于去抖动，但与之相比有一些优点。没有固定的时间延迟，因此 React 将在第一次渲染反映在屏幕上后立即尝试延迟渲染。延迟渲染是可中断的并且不会阻止用户输入。
4.useSyncExternalStore
useSyncExternalStore 是一个新的钩子，它允许外部存储通过强制对存储的更新同步来支持并发读取。在实现对外部数据源的订阅时，它消除了对 useEffect 的需要，并且推荐用于任何与 React 外部状态集成的库。
5.useInsertionEffect
useInsertionEffect 是一个新的钩子，它允许 CSS-in-JS 库解决在渲染中注入样式的性能问题。除非您已经构建了 CSS-in-JS 库，否则我们不希望您使用它。这个钩子将在 DOM 发生变异之后运行，但在布局效果读取新布局之前。这解决了 React 17 及更低版本中已经存在的问题，但在 React 18 中更为重要，因为 React 在并发渲染期间屈服于浏览器，使其有机会重新计算布局
React DOM Client
这些新的 API 现在从 react-dom/client 导出:
1.createRoot
创建根以渲染或卸载的新方法。使用它来代替 ReactDOM.render。React 18 中的新功能没有它就无法工作。
2.hydrateRoot
hydrate 服务器渲染应用程序的新方法。将它与新的 React DOM 服务器 API 结合使用，而不是 ReactDOM.hydrate。React 18 中的新功能没有它就无法工作。
createRoot 和 hydraRoot 都接受一个名为 onRecoverableError 的新选项，以防您希望在 React 从渲染期间的错误中恢复或日志记录的水合时收到通知。默认情况下，React 将在旧版浏览器中使用 reportError 或 console.error
React DOM Server
这些新的 API 现在从 react-dom/server 导出，并且完全支持在服务器上流式传输 Suspense：
1.renderToPipeableStream
用于 Node 环境中的流式传输。
2.renderToReadableStream
适用于现代边缘运行时环境，例如 Deno 和 Cloudflare worker。
现有的 renderToString 方法继续工作，但不鼓励。
弃用的一些特性
1.react-dom：ReactDOM.render 已被弃用。使用它会警告：在 React 17 模式下运行您的应用程序。
2.react-dom: ReactDOM.hydrate 已被弃用。使用它会警告：在React 17 模式下运行您的应用程序。
3.react-dom: ReactDOM.unmountComponentAtNode 已被弃用。
4.react-dom: ReactDOM.renderSubtreeIntoContainer 已被弃用。
5.react-dom/server: ReactDOMServer.renderToNodeStream 已被弃用。
破坏性的更改
1.自动批处理：此版本引入了性能改进，改变了 React 批处理更新的方式以自动执行更多批处理。有关更多信息，请参阅 React 18 中的自动批处理: https://github.com/reactwg/react-18/discussions/21 以减少渲染。在极少数需要退出的情况下，将状态更新包装在 flushSync 中。
2.Stricter Strict Mode：未来，React 将提供一个功能，让组件在卸载之间保留状态。为了做好准备，React 18 为严格模式引入了一个新的仅限开发的检查。React 将自动卸载并重新安装每个组件，每当一个组件第一次挂载时，在第二次挂载时恢复之前的状态。如果这破坏了您的应用程序，请考虑删除严格模式，直到您可以修复组件以恢复使用现有状态重新安装。
3.一致的 useEffect 计时：如果在离散的用户输入事件（例如单击或 keydown 事件）期间触发更新，React 现在总是同步刷新效果函数。以前，行为并不总是可预测或一致的。
4.更严格的补水错误：由于缺少或额外的文本内容而导致的补水不匹配现在被视为错误而不是警告。React 将不再尝试通过插入或删除客户端上的节点来“修补”单个节点以尝试匹配服务器标记，并将恢复到客户端渲染到树中最近的 <Suspense> 边界。这确保了水合树是一致的，并避免了可能5.由水合不匹配引起的潜在隐私和安全漏洞。
挂起树总是一致的：如果一个组件在它完全添加到树之前挂起，React 不会将它以不完整的状态添加到树中或触发它的效果。相反，React 将完全丢弃新树，等待异步操作完成，然后从头开始重新尝试渲染。React 将同时呈现重试尝试，并且不会阻塞浏览器。
6.带有悬念的布局效果：当树重新暂停并恢复为回退时，React 现在将清理布局效果，然后在边界内的内容再次显示时重新创建它们。这修复了与 Suspense 一起使用时组件库无法正确测量布局的问题。
7.新的 JS 环境要求：React 现在依赖于现代浏览器功能，包括 Promise、Symbol 和 Object.assign。如果您支持旧版浏览器和设备（例如 Internet Explorer），它们本身不提供现代浏览器功能或具有不兼容的实现，请考虑在捆绑的应用程序中包含全局 polyfill。
其他
客户端
1.组件现在可以呈现未定义：如果您从组件返回未定义，React 不再抛出。这使得允许的组件返回值与组件树中间允许的值一致。我们建议使用 linter 来防止在 JSX 之前忘记返回语句等错误。
2.在测试中，行为警告现在是可选的：如果您正在运行端到端测试，则行为警告是不必要的。我们引入了一种选择加入机制，因此您只能在有用且有益的单元测试中启用它们。
3.未安装组件上的 setState 没有警告：以前，当您在未安装的组件上调用 setState 时，React 会警告内存泄漏。此警告是为订阅添加的，但人们主要在设置状态很好的情况下遇到它，并且变通方法会使代码变得更糟。我们已删除此警告。
4.不抑制控制台日志：当您使用严格模式时，React 会渲染每个组件两次，以帮助您发现意外的副作用。在 React 17 中，我们抑制了两个渲染之一的控制台日志，以使日志更易于阅读。为了回应社区对此令人困惑的反馈，我们已经删除了抑制。相反，如果你安装了 React DevTools，第二个日志的渲染将显示为灰色，并且会有一个选项（默认关闭）来完全抑制它们。
5.改进的内存使用：React 现在会在卸载时清理更多内部字段，从而降低应用程序代码中可能存在的未修复内存泄漏的影响。
服务端
1.renderToString：在服务器上挂起时将不再出错。相反，它将为最近的 <Suspense> 边界发出回退 HTML，然后重试在客户端上呈现相同的内容。仍然建议您改用像 renderToPipeableStream 或 renderToReadableStream 这样的流式 API。
2.renderToStaticMarkup：在服务器上挂起时将不再出错。相反，它将为最近的 <Suspense> 边界发出回退 HTML，并在客户端上重试渲染。
写在最后
以上就是本次 18版本更新的所有内容，更多更新详情参考：React 18 更新日志(https://github.com/facebook/react/blob/main/CHANGELOG.md)