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 工作组中参与讨论~

相关文章
|
11天前
|
前端开发 JavaScript
React 步骤条组件 Stepper 深入解析与常见问题
步骤条组件是构建多步骤表单或流程时的有力工具,帮助用户了解进度并导航。本文介绍了在React中实现简单步骤条的方法,包括基本结构、状态管理、样式处理及常见问题解决策略,如状态管理库的使用、自定义Hook的提取和CSS Modules的应用,以确保组件的健壮性和可维护性。
52 17
|
2月前
|
前端开发 JavaScript API
自定义React Hooks综合指南
本文介绍了React Hooks及其在组件开发中的作用,重点讲解了自定义Hook的创建和使用方法。通过实例展示了如何创建`useWindowWidth`、`useFetch`和`useForm`等自定义Hook,并分享了使用自定义Hook的最佳实践。文章强调了自定义Hook在提高代码复用性和组件可维护性方面的重要性。
76 0
|
7月前
|
JavaScript 前端开发 算法
React中的DOM diff算法是如何工作的
React的DOM diff算法通过对比新旧虚拟DOM树找到最小更新策略,提高组件更新效率。它生成并比较虚拟DOM,按类型、属性和"key"逐节点检查。不同类型节点直接替换,属性不同则更新属性,相同则递归比较子节点。确定DOM操作后批量执行,减少对真实DOM的访问,优化性能。然而,在复杂场景下可能有性能问题,可借助shouldComponentUpdate、memo或PureComponent等进行优化。
|
算法 前端开发 JavaScript
为什么 React 的 Diff 算法不采用 Vue 的双端对比算法?
都说“双端对比算法”,那么双端对比算法,到底是怎么样的呢?跟 React 中的 Diff 算法又有什么不同呢? 要了解这些,我们先了解 React 中的 Diff 算法,然后再了解 Vue3 中的 Diff 算法,最后讲一下 Vue2 中的 Diff 算法,才能去比较一下他们的区别。
425 0
|
前端开发
react组件优化-优化setState过程
react组件优化-优化setState过程
100 0
|
前端开发
【React工作记录八十五】React+Hook+ts+antDesign实现伪定时调用接口功能
【React工作记录八十五】React+Hook+ts+antDesign实现伪定时调用接口功能
85 0
|
前端开发
【React工作记录五十二】react对数组进行展开显示
【React工作记录五十二】react对数组进行展开显示
131 0
|
前端开发
【React工作记录五十】react中?.的使用
【React工作记录五十】react中?.的使用
71 0
|
前端开发 数据处理
【React工作记录四十四】react中filter数组的使用
【React工作记录四十四】react中filter数组的使用
273 0
|
前端开发 数据处理
【React工作记录四十七】react的对象属性替换处理
【React工作记录四十七】react的对象属性替换处理
87 0