React18 Alpha提前看

简介: 本文适合对React18感兴趣的小伙伴进行阅读

一、前言


本文基于开源项目:

https://github.com/facebook/react

https://github.com/reactwg/react-18/discussions

 

广东靓仔之前写过的《React17在我看来是这样的》这篇文章,有提到React17是React的一个基石版本,为之后React18铺垫。React官方团队在6月8号发布了《React18发布计划》


React 18 预计的发布时间表如下:

  • Alpha 版本:  现在是可以使用的
  • 公开的 Beta 版:  预计在几个月后
  • RC 版本:  至少在 Beta 版发布后的几周
  • 正式版:在 RC 版本发布之后的几周


从上面官方公开的计划,我们可以预测,今年年底React18会发布一个稳定的版本。


二、React 18工作组


   React团队建了个React18工作组,让社区提供反馈,提出问题。我们可以到Github上面看看组员们提出问题以及他们分享的想法。

image.png


https://github.com/reactwg/react-18/discussions


三、React18 alpha版本


们可以在npm把 React 18的Alpha拉下来,进行查看。

npm install react@alpha react-dom@alpha


要安装最新的 React 18 alpha,所以官方建议我们使用@alpha标签。

并发模式

React 18 将添加新功能,例如:

  • startTransition
  • useDeferredValue
  • 并发Suspense
  • 语义SuspenseList

 

为了支持这些功能,React 添加了协作多任务、基于优先级的渲染、调度和中断等概念。


大家也可以开始用用,下面两个:

1、useMutableSource

2、useOpaqueIdentifier

如果对 CSS-in-JS 解决方案感兴趣的话,可以着重看useOpaqueIdentifier  Stylesheets API(样式表 API


四、如何参与讨论组


   React官方团队本次先邀请了React 社区的专家、开发者、库作者和教育者,之后会逐步邀请更多人参与。


感兴趣的小伙伴可以到下面链接参与交流:

image.png


https://github.com/reactwg/react-18/discussions


五、总结


   正如官方介绍的那样,如果我们正在学习、教学或使用 React 来构建面向用户的应用程序,我们稍微知道下这些消息就可以拉,等稳定后再进行学习即可。如果出于好奇,我们可以到 React 18 工作组中参与讨论~

相关文章
|
27天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
1月前
|
前端开发 JavaScript 算法
React 渲染优化策略
【10月更文挑战第6天】React 是一个高效的 JavaScript 库,用于构建用户界面。本文从基础概念出发,深入探讨了 React 渲染优化的常见问题及解决方法,包括不必要的渲染、大量子组件的渲染、高频事件处理和大量列表渲染等问题,并提供了代码示例,帮助开发者提升应用性能。
52 6
|
前端开发
react组件优化-优化setState过程
react组件优化-优化setState过程
88 0
|
前端开发
【React工作记录八十五】React+Hook+ts+antDesign实现伪定时调用接口功能
【React工作记录八十五】React+Hook+ts+antDesign实现伪定时调用接口功能
82 0
|
前端开发
【React工作记录六十一】react children初步理解
【React工作记录六十一】react children初步理解
64 0
|
前端开发
【React工作记录五十】react中?.的使用
【React工作记录五十】react中?.的使用
69 0
|
前端开发
【React工作记录五十二】react对数组进行展开显示
【React工作记录五十二】react对数组进行展开显示
126 0
|
前端开发 Java
React 18 对 Hooks 的影响 :1
React 18 对 Hooks 的影响 :1
120 0
|
前端开发 算法 JavaScript
详解 React 16 的 Diff 策略
这是我 Deep In React 系列的第二篇文章,如果还没有读过的强烈建议你先读第一篇:详谈 React Fiber 架构(1)。
161 0
详解 React 16 的 Diff 策略
|
前端开发