憧憬已久的React 18 Beta 来了

admin

行家益,吾卡颂。

通过「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/

【编辑保举】

鸿蒙官方战略配相符共建——HarmonyOS技术社区 美国当局认为按“F12”作恶,属于c走为,首诉发现漏洞的记者 被无视的风险:打印机坦然防护的七点提出 SQL Server也能安放在Linux环境?SQL Server 2019在CentOS7安放详解 什么?跳外都不清新的你还敢往面 BAT! Windows 11太难用?手把手教你将Windows 11变得更顺遂

Powered by 2021十大排行最污直播-日韩4438x全国最大-十大污的软 @2018 RSS地图 HTML地图

Copyright 站群 © 2013-2021 365建站器 版权所有