React 18 带来了什么—将在官方支持React状态保持
最新回答
人不喂鸡天猪地灭
2020-11-03 08:32:55
React 18 带来的主要变化与特性
React 18 引入了一系列重要的变化和新特性，旨在提升开发者的体验和应用的性能。以下是对React 18主要变化的详细解析：
一、平滑升级与开箱即用的功能
React 18 提供了平滑的升级路径，开发者只需对代码进行少量修改，即可享受React 18带来的新特性。例如，在umi框架中，通过修改一行代码即可支持React 18。升级后，项目无需进行业务侧代码的修改，即可正常运行。
React 18开箱即用的功能包括：
- 自动批处理以减少渲染：批处理使React能够将多个状态更新分组到单个重新渲染中，从而获得更好的性能。在React 18中，增加了对网络请求、promise、setTimeout等事件的自动批处理支持。
- Suspense的SSR支持：React 18提供了全新的SSR架构，通过使用新的API pipeToNodeWritable，开发者可以在服务端将组件渲染成Html并发送给用户，提升页面加载速度和用户体验。
二、并发渲染（Concurrent Rendering）
React 18加入了一个主要的可选机制——并发渲染。这里的“并发”指的是单线程可以被中断，渲染可以在多个渲染任务之间交错进行，如用户交互、网络请求、计时器、动画和浏览器布局/绘制等。并发渲染的主要工作分配大致如下：
- 当渲染任务遭遇到更高级的渲染任务时，将会被中断，然后优先执行优先级更高的任务，再任务完成之后，再回到原来的渲染任务上。
React 18提供了以下新的API来支持并发渲染：
- startTransition：用于包裹一些setState，声明它们是不太重要的渲染行为。例如，在搜索场景中，可以使用startTransition来包裹搜索结果的更新，以便在用户输入时实时显示输入内容，同时异步更新搜索结果。
- useDeferredValue：用于推迟更新屏幕上不太重要的部分（此特性在React 18发布时可能尚未放出文档）。
- SuspenseList：用于协调加载指示器出现的顺序（此特性在React 18发布时可能尚未放出文档）。预计与懒加载的优先级有关，可能是指定哪些加载优先执行。
三、其他重要特性
- StrictMode严格模式：在React 18中，StrictMode严格模式被默认开启。该模式会对新挂载的组件进行多次调用加载-卸载，以确保它们的状态正确。此外，React 18还保留了快速刷新（Fast Refresh）功能，开发时可以保持组件状态，同时提供即时反馈。
- Offscreen：新的Offscreen API允许React通过隐藏组件而不是卸载组件来保持其状态。为此，React将调用与卸载时相同的生命周期钩子，但也会保留React组件和DOM元素的状态。Offscreen功能可以用于预渲染页面，提前渲染用户即将到达的页面，提升用户体验。需要注意的是，Offscreen功能可能不会在React 18的初始版本中发布，而可能在后续的18.x小版本中添加。
四、图片展示
以下是React 18中SSR功能相关的图片展示，用于说明React 18在SSR方面的改进：
五、总结
React 18带来了许多重要的变化和新特性，包括平滑升级、开箱即用的功能、并发渲染以及其他值得关注的特性。这些特性旨在提升开发者的体验和应用的性能。随着React 18的正式发布和更多文档的放出，开发者将能够更深入地了解和利用这些新特性来构建更高效、更用户友好的应用。
热门标签
