你必须了解的 React 18 新特性
由于更新经常包括完全改变特性的修改，甚至删除某些特性并添加其他特性，一些开发人员可能会发现很难在不同版本的库之间进行转换。最好使用库的最新版本，以获得尽可能好的性能。
这篇文章将讨论 React 18 是什么，React 17 的问题，React 18 的新特性，以及为什么你应该使用最新版本。
1. React 18是什么？
在我们讨论“React 18有什么新功能”之前，React 18 是什么意思？任何 18.0.0 以上但不包括 19.0.0 的 React 库的稳定版本都被称为 React 18。
React 18 的创建在 React 应用程序中引入了并发渲染。React 一直在关注 DOM 渲染，并为开发人员提供控制和跟踪组件生命周期的工具。有了一些新功能，React 18 现在可以调整渲染过程，以适应客户端设备。
2. 升级到 React 18
React 社区提供了多种安装选项。要在应用程序中安装 React 18，可以在 HTML 脚本标记中使用 CDN URL 作为源（src）。
<!-- 注意:部署时，将 "development.js" 替换为 "production.min.js" -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- 加载我们的 React 组件 -->
<script src="app.js"></script>
</body>
通过在工作目录的终端中执行以下命令，你可以使用 NPM 或 Yarn 升级或安装 React 18，用于单页面和绑定应用程序。NPM：
代码语言：javascript复制npm install react react-dom
Yarn：
代码语言：javascript复制yarn add react react-dom
上面的命令将自动检测并安装或升级开发环境中最新的 React 和 React DOM 版本。
3. React 17 的问题
React 社区已经注意到库中存在一些需要改进的问题。如果 React 17 功能完美，React 18 和更高版本就不需要发布了。
根据 React 18.0.0 的更新日志，React 17 或更早版本的以下问题得到了解决：
- 如果返回
undefined，Render 将抛出一个错误：当组件返回undefined值时，应用程序将中断。
应用程序显示以下错误：
image.png
你还会注意到控制台中的以下错误：
image.png
- 卸载组件的
setState给出一个警告：在试图更新卸载组件的状态时，React 可能会警告你内存泄漏。
image.png
- 严格模式控制台日志消除：从社区反馈中，我们注意到在使用严格模式时，控制台日志消息的消除会造成混乱，因为只显示一个而不是两个。
- 内存消耗：React 17 和更早的版本存在内存泄漏问题，特别是在未挂载的组件中。
4. React 18 发生了什么变化？
React 18 更加强调应用程序并发性。这个想法包括「自动批处理」和「过渡」等功能，以及 createRoot、hydrateRoot、renderToPipeableStream 和 renderToReadableStream 等 API。它还包括 useId、useTransition、useDeferredValue、useSyncExternalStore 和 useInsertionEffect 等 hooks，以及 Strict Mode 的更新和 ReactDOM.render 和 renderToString 的弃用。
让我们更深入地看看这些变化
