期待已久的React 18 Beta 来了

开发 前端
React团队已经在多个应用的生产环境测试了Beta版本几个月,并且相信他足够稳定。所以,开发者已经可以升级至v18 Beta版本。

[[435280]]

大家好,我卡颂。

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

本文会解释:

  • 这次更新带来的变化
  • 对开发者的影响
  • 如何安装v18 Beta
  • v18稳定版何时会来

带来的变化

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

useSyncExternalStore将替代useMutableSource 用于订阅外部源,见:#86讨论[1]

用法类似如下:

  1. import {useSyncExternalStore} from 'react'
  2.  
  3. // 基础用法,getSnapshot返回一个缓存的值 
  4. const state = useSyncExternalStore(store.subscribe, store.getSnapshot); 
  5.  
  6. // 根据数据字段,使用内联的getSnapshot返回缓存的数据 
  7. const selectedField = useSyncExternalStore(store.subscribe, () => store.getSnapshot().selectedField); 

useId用于在客户端与服务端之间产生唯一ID,避免SSR hydrate时元素不匹配,见#111讨论[2]

用法类似如下:

  1. function Checkbox() { 
  2.   const id = useId(); 
  3.   return ( 
  4.     <> 
  5.       <label htmlFor={id}>Do you like React?</label> 
  6.       <input type="checkbox" name="react" id={id} /> 
  7.     </> 
  8.   ); 
  9. ); 

useInsertionEffect用于插入全局DOM节点,见#110讨论[3]

useInsertionEffect工作原理类似useLayoutEffect,区别在于回调执行时还不能访问ref中的DOM节点。

你可以在这个Hook内操作全局DOM节点(比如<style>或SVG<defs)。

操作CSS的库(比如CSS-IN-JS方案)可以用这个Hook插入全局<style>。

用法类似如下:

  1. function useCSS(rule) { 
  2.   useInsertionEffect(() => { 
  3.     if (!isInserted.has(rule)) { 
  4.       isInserted.add(rule); 
  5.       document.head.appendChild(getStyleForRule(rule)); 
  6.     } 
  7.   }); 
  8.   return rule
  9. function Component() { 
  10.   let className = useCSS(rule); 
  11.   return <div className={className} />; 
  12. }

至此,v18的特性已经完备,正式版发布之前不会再新增API。

对开发者的影响

React团队已经在多个应用的生产环境测试了Beta版本几个月,并且相信他足够稳定。所以,开发者已经可以升级至v18 Beta版本。

Beta作为「预发布版本」,与最终的正式版的区别是:可能还有少许bug,但整体稳定。

社区中兼容v18的知名项目包括:

  • Next.js
  • Gatsby
  • React Redux
  • React Testing Library

安装Beta

安装命令如下:

  1. # npm 
  2. npm install react@beta react-dom@beta 
  3. # yarn 
  4. 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/

 

责任编辑:姜华 来源: 魔术师卡颂
相关推荐

2009-10-12 14:31:24

红帽虚拟化

2021-07-19 22:31:39

微信微信客服移动应用

2020-12-09 11:10:58

GitHub代码开发者

2021-11-09 09:00:00

Docker开发工具

2021-03-18 16:16:48

高德地图AR步行导航

2013-09-16 11:10:30

2022-09-26 09:39:30

LinuxsystemdWSL

2021-08-16 12:20:03

Debian 11Linux软件包

2020-11-17 06:04:59

ZigC语言

2019-01-16 15:15:33

GitHub微软私有仓库

2010-06-30 09:26:43

Firefox 4.0

2021-06-16 06:05:25

React18React

2021-10-10 22:16:24

iOS苹果系统

2021-07-18 22:31:29

微信功能手机

2009-08-04 13:20:12

2021-05-22 22:54:22

微信直播文档

2009-03-19 20:41:31

VirtualBox GuestsOpenGL 3D

2017-08-31 16:26:43

微软

2020-09-25 15:15:29

LinuxKubernetes开源

2012-01-12 10:02:59

Windows 8 B登场
点赞
收藏

51CTO技术栈公众号