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

相关文章
|
4天前
|
前端开发 JavaScript
使用 MobX 优化 React 代码
使用 MobX 优化 React 代码
38 0
|
4天前
|
前端开发 JavaScript API
React团队回应用Vite替换Create React App的建议
React团队回应用Vite替换Create React App的建议
|
4天前
|
缓存 JavaScript 算法
vue2和vue3之间diff算法的差异
vue2和vue3之间diff算法的差异
|
4天前
|
JavaScript 前端开发 算法
React中的DOM diff算法是如何工作的
React的DOM diff算法通过对比新旧虚拟DOM树找到最小更新策略,提高组件更新效率。它生成并比较虚拟DOM,按类型、属性和"key"逐节点检查。不同类型节点直接替换,属性不同则更新属性,相同则递归比较子节点。确定DOM操作后批量执行,减少对真实DOM的访问,优化性能。然而,在复杂场景下可能有性能问题,可借助shouldComponentUpdate、memo或PureComponent等进行优化。
|
9月前
|
前端开发
react组件优化-优化setState过程
react组件优化-优化setState过程
67 0
|
12月前
|
前端开发 Java
React 18 对 Hooks 的影响 :1
React 18 对 Hooks 的影响 :1
|
前端开发 算法 JavaScript
详解 React 16 的 Diff 策略
这是我 Deep In React 系列的第二篇文章,如果还没有读过的强烈建议你先读第一篇:详谈 React Fiber 架构(1)。
120 0
详解 React 16 的 Diff 策略
|
缓存 前端开发 JavaScript
从hr口中了解react的状态管理库(mobx, recoil), 立马过来学习之mobx
从hr口中了解react的状态管理库(mobx, recoil), 立马过来学习之mobx
|
前端开发
React工作19:react设置默认值
React工作19:react设置默认值
159 0
|
前端开发
React工作28:react设置默认值react中componentWillReceiveProps
React工作28:react设置默认值react中componentWillReceiveProps
63 0