React 18 Beta 来了
大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,目前近3000人参与。
经过「React18工作组」几个月工作,11月16日v18
终于从Alpha
版本更新到Beta
版本。
本文会解释:
这次更新带来的变化
对开发者的影响
如何安装
v18 Beta
v18
稳定版何时会来
带来的变化
经过与社区不断沟通,Beta
版将有如下三个API
变动:
useSyncExternalStore
将替代useMutableSource
用于订阅外部源,见:#86讨论[1]
用法类似如下:
import {useSyncExternalStore} from 'react';// 基础用法,getSnapshot返回一个缓存的值
const state = useSyncExternalStore(store.subscribe, store.getSnapshot);// 根据数据字段,使用内联的getSnapshot返回缓存的数据
const selectedField = useSyncExternalStore(store.subscribe, () => store.getSnapshot().selectedField);
useId
用于在客户端与服务端之间产生唯一ID
,避免SSR hydrate
时元素不匹配,见#111讨论[2]
用法类似如下:
function Checkbox() {const id = useId();return (<><label htmlFor={id}>Do you like React?</label><input type="checkbox" name="react" id={id} /></>);
);
useInsertionEffect
用于插入全局DOM
节点,见#110讨论[3]
useInsertionEffect
工作原理类似useLayoutEffect
,区别在于回调执行时还不能访问ref
中的DOM
节点。
你可以在这个Hook
内操作全局DOM
节点(比如<style>
或SVG<defs
)。
操作CSS
的库(比如CSS-IN-JS
方案)可以用这个Hook
插入全局<style>
。
用法类似如下:
function useCSS(rule) {useInsertionEffect(() => {if (!isInserted.has(rule)) {isInserted.add(rule);document.head.appendChild(getStyleForRule(rule));}});return rule;
}
function Component() {let className = useCSS(rule);return <div className={className} />;
}
至此,v18
的特性已经完备,正式版发布之前不会再新增API
。
对开发者的影响
React
团队已经在多个应用的生产环境测试了Beta
版本几个月,并且相信他足够稳定。所以,开发者已经可以升级至v18 Beta
版本。
Beta
作为「预发布版本」,与最终的正式版的区别是:可能还有少许bug
,但整体稳定。
社区中兼容v18
的知名项目包括:
Next.js
Gatsby
React Redux
React Testing Library
安装Beta
安装命令如下:
# npm
npm install react@beta react-dom@beta
# yarn
yarn add react@beta react-dom@beta
稳定版何时回来
根据Andrew
的回复,正式版最早发布时间可能会在22年1月底。
总结
不管是新文档[4]还是Beta
版,可以发现下半年React
团队节奏明显加快了。
从v15
升级到v16
启用Fiber
架构那天开始,React
团队就在为并发更新
的稳定努力了。
这一天,终于不远了......
参考资料
[1]
#86讨论: https://github.com/reactwg/react-18/discussions/86
[2]
#111讨论: https://github.com/reactwg/react-18/discussions/111
[3]
#110讨论: https://github.com/reactwg/react-18/discussions/110
[4]
新文档: http://beta.reactjs.org/
最近组建了一个江西人的前端交流群,如果你是江西人可以加我微信 ruochuan12 私信 江西 拉你进群。
推荐阅读
1个月,200+人,一起读了4周源码
我历时3年才写了10余篇源码文章,但收获了100w+阅读
老姚浅谈:怎么学JavaScript?
我在阿里招前端,该怎么帮你(可进面试群)
················· 若川简介 ·················
你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》10余篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,最近组织了源码共读活动,帮助1000+前端人学会看源码。公众号愿景:帮助5年内前端人走向前列。
识别上方二维码加我微信、拉你进源码共读群
今日话题
略。分享、收藏、点赞、在看我的文章就是对我最大的支持~
React 18 Beta 来了相关推荐
- 【做第一批吃螃蟹的人】试用 React 18 !
React 团队最近发布了 React 18 的 alpha 版本.这个版本主要是增强 React 应用程序的 并发渲染 能力,你可以在 React 18 中尝试体验以下几个新特性: 新的 React ...
- linux卸载kodi,如何在Ubuntu上安装Kodi 18 Beta
Kodi的Beta版周期很长.很棒,因为它有助于将错误排除在生产版本之外,而且还可以保留数月的新功能.值得庆幸的是,Kodi开发人员提供了可供测试和使用的"unstable"软件包 ...
- React 18 带给我们的惊喜
大家好,我是若川.持续组织了8个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
- React 18 RC 版本发布啦,生产环境用起来!
大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
- React 18 的七大更新点你知道几个?
欢迎和号主[前端点线面]进群盘算法,此外本号干货满满:14个门类(100+篇原创)内容(又干又硬).<前端百题斩>pdf(助力薪资double).20+篇思维导图(知识系统化.记忆简单化) ...
- react脚手架创建项目报错,ReactDOM.render is no longer supported in React 18.
react脚手架创建项目报错,ReactDOM.render is no longer supported in React 18. 最近新写一个react的项目,但是发现已经更新到了18.0的版本, ...
- 报错Warning: ReactDOM.render is no longer supported in React 18.Use createRoot instead.Until you...
报错不影响正常渲染页面,报错图示: 翻译如下: 反应域.React 18中不再支持渲染.改用createRoot.在你切换到新的API之前,你的应用程序将表现得像运行React 17.了解更多信息:h ...
- 关于React18控制台报错:ReactDOM.render is no longer supported in React 18 Use createRoot instead. Until.....
React团队在3月29日新推出了React v18.0版本,现在npm 默认的就是18版本,由于React 18 不再支持 ReactDOM.render.控制台会抛出: Warning: Reac ...
- React报错:Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until y
新建的React项目,启动后控制台警告如下: Warning: ReactDOM.render is no longer supported in React 18. Use createRoot i ...
最新文章
- win2008 IIS7中启用JS的gzip压缩的方法
- 删库不跑路,MySQL 数据库恢复教程
- 红帽发布了下一代OpenShift Online
- zookeeper在Dubbo中的作用
- Polycarp Restores Permutation
- 大话ion系列(四)
- Dotnet Core Public API的安全实践
- 间接寻址级别不同_被遗忘的利息税,国债与存款的利率区别,同大额存单的4点大不同...
- 坐标定位手机元素_CSS 是如何影响浏览器元素在文档中的排列?
- arduino安卓手机版_剥离安卓!华为鸿蒙系统手机版正式发布:这两大机型率先升级...
- 蓝桥杯题目练习 提升篇 [蓝桥杯2018初赛]三体攻击
- 2022南京商业贷款提前还款
- la是什么牌子_la bruket是什么牌子_哪个国家的_什么档次
- 掘金企服:ICP经营许可证和ICP备案的区别 1
- Git 的暂存区(staging area)理解
- swarm mysql集群_docker搭建基于percona-xtradb-cluster方案的mysql集群
- 【区块链实战】什么是区块链,为什么会产生区块链技术
- 微信客户端配置信息存储解决方案
- 撕掉代工标签,能否迎来芯片市场的“权力转移”?
- RFID动物耳标识读器在科学养猪中的应用
热门文章
- RabbitMQ(2) 一般介绍
- Android隐藏软键盘收回软键盘
- spring boot 读取 application.properties 初始化bean
- Magento--判断checkout中是否使用了coupon code
- C#中Brush、Color、String相互转换
- python类库31[文件和目录os+os.path+shutil]
- Go学习笔记—标准库Context
- Spring security/Shiro ---登陆成功后返回登陆前界面<页面重定向>
- 安卓APP_ Fragment(1)—— Fragment概念、基础用法、动态变换、管理栈
- java list 自定义类型转换_使用Java Stream API将List按自定义分组规则转换成Map的一个例子...