React 18 Beta 来了

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,目前近3000人参与。

经过「React18工作组」几个月工作,11月16日v18终于从Alpha版本更新到Beta版本。

本文会解释:

  • 这次更新带来的变化

  • 对开发者的影响

  • 如何安装v18 Beta

  • v18稳定版何时会来

dce33a3f2b82988f78fd33a099f47930.png

带来的变化

经过与社区不断沟通,Beta版将有如下三个API变动:

  1. 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);
  1. 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} /></>);
);
  1. 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月底。

56a425385faa89c82bffa00fae94d2c1.png

总结

不管是新文档[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?

我在阿里招前端,该怎么帮你(可进面试群)

101319ce2cd8f91e762c44bcdb078206.gif

················· 若川简介 ·················

你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》10余篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,最近组织了源码共读活动,帮助1000+前端人学会看源码。公众号愿景:帮助5年内前端人走向前列。

203ec5e61be2c5724e26d752164c1bd5.png

识别方二维码加我微信、拉你进源码共读

今日话题

略。分享、收藏、点赞、在看我的文章就是对我最大的支持~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275211.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

osg着色语言着色_探索数字着色

osg着色语言着色Learn how to colorize icons with your NounPro subscription and Adobe Illustrator.了解如何使用NounPro订阅和Adobe Illustrator为图标着色。 For those who want to level up their black and white Noun Project icons with a splash of color, unlockin…

CSS3实践之路(一):CSS3之我观

CSS 的英文全称Cascading Style Sheets&#xff0c;中文意思是级联样式表,通过设立样式表&#xff0c;可以统一地控制HMTL中各DOM元素的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表&#xff0c;可以扩充精确指定网页元素位置&#xff0c;外观以及创建…

18个项目必备的JavaScript代码片段——数组篇

大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12 参与&#xff0c;目前近3000人参与&#xff0c;0-5年工作经验的都可以参与学习。1.chunk转换二维数组将数组&#xff08;array&#xff09;拆分成多个数组&#xff0c;并将这些…

美学评价_卡美学的真正美

美学评价In collectible card games like Hearthstone, Legends of Runeterra, and Magic: The Gathering, the aesthetic of the cards is indubitably one of the greatest highlights for many, if not all players. Although the game loop is reliant on physically build…

好程序员web前端分享CSS Bug、CSS Hack和Filter学习笔记

为什么80%的码农都做不了架构师&#xff1f;>>> CSS Bug、CSS Hack和Filter学习笔记 1)CSS Bug:CSS样式在各浏览器中解析不一致的情况&#xff0c;或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug. 2)CSS Hack: CSS中&#xff0c;Hack是指一种兼容CSS在不同…

ux和ui_设计更好的结帐体验-UX / UI案例研究

ux和uiPlated Cuisine is a food ordering and delivery app for Plated Cuisine Restaurant founded and managed by Rayo Odusanya.Plated Cuisine是由Rayo Odusanya创建和管理的Plated Cuisine Restaurant的食品订购和交付应用程序。 A short background about Rayo Rayo O…

Django中ajax发送post请求,报403错误CSRF验证失败解决办法

今天学习Django框架&#xff0c;用ajax向后台发送post请求&#xff0c;直接报了403错误&#xff0c;说CSRF验证失败&#xff1b;先前用模板的话都是在里面加一个 {% csrf_token %} 就直接搞定了CSRF的问题了&#xff1b;很显然&#xff0c;用ajax发送post请求这样就白搭了&…

如何在EXCEL中添加下拉框

筛选主要是将已有列的信息以下拉框的形式显示出来 选中数据栏中的筛选按钮即可生成 如果是想添加未有信息则如下图步骤 首先&#xff0c;选择你要出现下拉的区域&#xff0c;在数据栏中的选择数据有效性 然后&#xff0c;下面对话框中&#xff0c;有效性条件中按如下设置即可&a…

每次新增页面复制粘贴?100多行源码的 element-ui 的新增组件功能教你解愁

1. 前言大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以点此加我微信ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。已进行三个月了&#xff0c;很多小伙伴表示收获颇丰。想学源码&#xff0c;极力推荐之前我…

原子设计_您需要了解的有关原子设计的4件事

原子设计重点 (Top highlight)Industries such as Architecture or Industrial Design have developed smart modular systems for manufacturing extremely complex objects like airplanes, ships, and skyscrapers. Inspired by this, Atomic Design was proposed as a syst…

C#中的Clipboard与ContextMenuStrip应用举例

今天&#xff0c;突然想起了怎样在一个文本中实现复制、剪切与粘贴的功能&#xff0c;并给这些功能添加右键的快捷方式。于是&#xff0c;就用自己的VS2008写了一个简单的小应用&#xff0c;以熟悉C#中剪贴板与快捷菜单的使用。 首先&#xff0c;我们不难发现&#xff0c;剪贴板…

控制台ui_设计下一代控制台UI

控制台ui游戏UX (GAMES UX) Yesterday’s Sony presentation showed us the final look of the PlayStation 5, as well as an impressive of next-gen games that will be released with it. What we didn’t get to see, however, is the new operating system and it’s use…

写给前端新手看的一些模块化知识

大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以点此加我微信ruochuan12 进群参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。已进行三个月了&#xff0c;很多小伙伴表示收获颇丰。一、 为什么需要模块化以前没有模块化时…

代码实现照片素描_我的代码素描之旅

代码实现照片素描In 2018 I started the process of consistently creating and posting my code sketches online. These are small animations I make with code and post on instagram. Through these sketches I tried to visually express my ideas using color, animatio…

真效率神器,UI稿智能转换成前端代码,准确率极高

大家好&#xff0c;我是若川。在这充满网络促销活动的几个月&#xff0c;倍感压力的&#xff0c;除了你的口袋&#xff0c;是否还有程序员的发量呢&#xff1f;每年的双十一、双十二购物狂欢节&#xff0c;各大电商平台都会上线让消费者充满购买欲望的活动页面&#xff0c;而这…

几个用于序列化的代码片段

参考JavaScriptSerializer,一般用来做JSON格式化http://msdn.microsoft.com/zh-cn/library/system.web.script.serialization.javascriptserializer.aspx http://msdn.microsoft.com/zh-cn/library/system.web.script.serialization.javascriptconverter.aspxDataContractSeria…

桌面图标摆放图案_用图标制作醒目的图案

桌面图标摆放图案Level up your video calls with a custom backdrop created using Noun Project icons.使用使用Noun Project图标创建的自定义背景来升级视频通话。 The only thing more visually pleasing than a well-designed icon is a neat, eye-catching pattern made…

3个多月,近3000人参与的源码共读,诚邀加入~

大家好&#xff0c;我是若川。众所周知&#xff0c;从8月份开始&#xff0c;我组织了源码共读活动&#xff0c;每周学习200行左右的源码&#xff0c;到现在持续了3个多月&#xff0c;坚持答疑解惑。帮助了不少人&#xff0c;还是挺开心的。另外&#xff0c;涌现了很多优秀的读者…

“这张图告诉你什么?”

For data to be impactful, it must be understood.为了使数据具有影响力&#xff0c;必须理解它。 I’ve happily spent hundreds and hundreds of hours of my life watching users misunderstand data visualizations. I’m strangely hooked on it.我快乐地度过了数百个小…

我们从 UmiJS 迁移到了 Vite

大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以点此加我微信ruochuan12 进群参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。已进行三个月了&#xff0c;很多小伙伴表示收获颇丰。我们从 UmiJS迁移到 Vite 已经上线半年…