React 18 新特性
这里介绍一下React18的4个新特性:
- Automatic batching
- Concurrent APIs
- SSR for Suspense
- New Render API
Automatic bacthing
在 React 中使用setState来进行dispatch组件的State变化,当setState在组件中被调用后,并不会立即触发重新渲染。React 会执行全部事件处理函数,然后触发一个单独的re-render,合并所有的更新。
比如在点击+1的例子中,如果方法里连续触发三次setState,最终React会将更新函数放到一个队列里,然后合并队列触发setState的re-render,这就是batching的含义。
这样既可以减少程序数据状态存在中间值导致的不稳定性,也可以提高渲染性能。
在React 18 之前,如果在回调函数的异步调用中,执行setState,由于丢失上下文,无法做合并处理,所以每次setState调用都会触发一次re-render。
function handleClick() {// React 18 之前的版本(/*...*/).then(() => {setCount(c => c + 1); // 立刻重新渲染setShow(show => !show); // 立刻重新渲染});
}
而 React 18中,任何情况下都可以合并渲染!
如果仍然希望setState之后立即重新渲染,只需要使用flushSync
包裹。
function handleClick() {// React 18fecth(/*...*/).then(() => {ReactDOM.flushSync(() => {setCount(c => c + 1); // 立刻重新渲染setFlag(f => !f);})})
}
Automatic batching 机制让我们有能力对渲染顺序和节奏进行一些基础的把控。例如在Canvas画布编辑场景中,我们可以加载完主节点框架之后立刻进行渲染,而每个节点的内容则可以进行合并渲染,尽可能加快用户看到可编辑页面的时间,同时避免http异步函数引起的频繁渲染的性能开销。
Concurrent APIs
官方明确指出了React 18 中并不存在 Concurrent Mode,只有用于并发渲染的并发新特性,开发者希望能够在Web Platform引入并发渲染,来实现多个渲染任务的并行渲染,其中Suspense就是基于此诞生的。
React18支持并发特性的三个API
- startTransition()
- useDeferredValue()
- useTransition()
startTransition()
import { startTransition } from 'react';// 紧急更新
setInputValue(input)// 标记回调函数内的更新为 非紧急更新
startTransition(() => {setSearchQuery(input)
})
所以,startTransition的作用就是:被startTransition包裹的setState触发的渲染被标记为不紧急渲染,意味着它们可以被其他紧急渲染所抢占,这种渲染优先级的调整手段可以帮助我们解决各种性能伪瓶颈,提升用户体验。
useDeferredValue()
这个hook适用于设置延迟值
function Page() {const [filters, mergeFilter] = useMergeState(defaultFilters);const deferedFilters = React.useDeferredValue(filters);return (<><Filters filters={filters} /><List filters={deferedFilters}></>)
}
useDeferredValue() 会将List组件的渲染变得更加平滑,深层次看来是 defered value 引起的渲染会被标记为不紧急渲染,会被filters引起的渲染进行抢占,进而达到用户快速输入搜索等场景下页面抖动或卡顿问题。
SSR for Suspense
早在2018年,React就推出了Suspense的基础版本。可以在客户端配合React.lazy动态加载代码,实现数据拉取和状态控制的关注点分离(即当子组件未加载完成时,父组件填充fallback声明的组件),但是不能在服务器端进行加载。
<Suspense fallback={<Loading />}><Header /><Suspense fallback={<ListPlaceholder />}><ListLayout /></Suspense>
</Suspense>
在React18中,Suspense可以运行在服务器端,Server Rendering的性能不再受制于性能最差的组件(木桶效应)。
在React 18 之前,Server Rendering的流程就是服务端请求所有数据,然后发送HTML到客户端或者说浏览器,然后由客户端的hydrate内容(可以搜索同构渲染进行学习),每个环节必须按部就班的执行。当Suspense可以在服务器端使用之后,一旦某个组件加载慢,就可以将fallback的内容传输到客户端(例如loading态),保证用户可以尽可能早的可进行交互。
更加优秀的是,hydrate可以通过用户的行为来调整优先级。例如Profile组件和正在Loading的组件同时处于Suspense的流程中,此时用户点击评论组件,React将会优先hydrate评论组件,尽可能优先满足用户交互体验。
回归到代码实现细节,整体框架上服务器和客户端的连接必然趋向于持续性的长连接,因此res.send需要变为res.socket,pipeToNodeWritable替换renderToString并配合Suspense即可。
New Render API
新的更友好的语义化render方式。
const container = document.getElementById('app');// 旧的render API
ReactDOM.render(<App />, container);// 新的 createRoot API
const root = ReactDOM.createRoot(container);
root.render(<App />);
Client 端提供了 新 水合 Hydrate API
const root = ReactDOM.createRoot(container, <App tab="home" />)
以及新的 useId() API来为组件生成唯一ID。
由于Suspense和并发渲染在React 18的大规模使用,一些具有External stores的API比如全局变量、document对象如何在并发场景下保持一致性呢?
React 18 提供了useSyncExternalStore这个hook,来保证External stores的一致性。
useSyncExternalStore(// 注册回调函数subscribe: (callback) => Unsubscribe,// 获取快照函数getSnapshot: () => state
) => state
具体使用方式例子:
const store = {state: { count: 0 },setState: (fn) => {store.state = fn(store.state); // 需要不可变的更新store.listeners.forEach(listener => listender());},listeners: new Set(),subscribe: (callback) => {store.listeners.add(callback);return () => store.listeners.delete(callback);},getSnapshot: () => {const snap = Object.freeze(store.state);return snap;}
}// use external store
const Component = () => {const snap = useSyncExternalStore(store.subscribe, store.getSnapshot);return <div>{snap.count}</div>
}
React 18 新特性相关推荐
- React 18 新特性(三):渐变更新
文章目录 前言 一.startTransition:渐变更新 举个例子 模拟代码实现这个例子 启用渐变更新 二.useDeferredValue:返回一个延迟响应的值 三.useTransition ...
- 你必须了解的 React 18 新特性
你必须了解的 React 18 新特性 你必须了解的 React 18 新特性 1. React 18是什么? 2. 升级到 React 18 3. React 17 的问题 4. React 18 ...
- [react] 请描述下你对react的新特性Hooks的理解?它有哪些应用场景?
[react] 请描述下你对react的新特性Hooks的理解?它有哪些应用场景? 在 React 中使用 class 继承 React.Component,就可以在类里面使用各种各样的钩子函数,比如 ...
- [react] React16新特性有哪些?
[react] React16新特性有哪些? 1.使用Error Boundary处理错误组件 2.render支持2种新的返回类型(数组.字符串) 3.使用createProtal 将组件渲染到当前 ...
- 深入React v16新特性(二)
前言 之前写了深入React v16 新特性(一),如果之前没看过的可以先阅读,里面先介绍的 v16 比较简单基础的 API,代码仓库在这篇文章里有.本篇内容有: 生命周期函数的改变 深入 React ...
- go每日新闻(2021-12-01)——Go 1.18新特性前瞻:原生支持Fuzzing测试
每日一谚: Go's package system teach us to prioritize the consumer of our code. go中文网每日资讯–2021-12-01 一.Go ...
- Go1.18 新特性:多模块(Multi-Module)工作区模式
文章目录 背景 举例:未发布的 module Go1.18 新特性:多模块(Multi-Module)工作区模式 Go1.18 工作区模式 初始化一个新的工作区 go work use 添加新的模块到 ...
- QQ音乐:React v16 新特性实践
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由QQ音乐技术团队发表于云+社区专栏 自从去年9月份 React 团队发布了 v16.0 版本开始,到18年3月刚发布的 v16.3 版 ...
- react v18新特性 分享
Concurrency React 博客部分翻译 并发本身不是一个特性.这是一种新的幕后机制,使 React 能够同时准备多个版本的 UI.您可以将并发视为一个实现细节--它之所以有价值,是因为它解锁 ...
- Go1.18 新特性:高效复制,strings, bytes 库新增 Clone 功能
大家好,期盼已久的 Go1.18 上周已经发布,今天给大家带来一个 1.18 版本新特性中的优化相关的内容,是与 strings 和 bytes 标准库有关. 背景 想要更快捷复制 在日常编程中,字节 ...
最新文章
- ThreadPoolExecutor使用介绍
- WINCE6.0显示驱动模型介绍
- 面向任务的 Git 学习法
- Java基础—序列化关键字transient
- Flink专题-Source
- POC of settype read harmonization - using description settype as example
- Phaserjs V2的state状态解析及技巧
- php 静态成员(static)抽象类(abstract)和接口(interface)
- C:\WINDOWS\system32\drivers\etc\hosts
- h264解码延迟优化_OPPO Enco Free真无线双发耳机提速120ms,延迟优于苹果华为
- Axure简易计算器
- C++11线程的生命周期
- 多用途通讯录短信定位获取系统(安卓Android+苹果IOS+双端)带视频教程
- 垂钓之王hd_它的专业人士指南,以阻止网络钓鱼
- laya龙骨换装_FairyGUI - 骨骼动画
- 人脸识别技术入驻了哪些行业
- 解决搜狗输入法总是自动切换皮肤
- wince投屏苹果手机_全民最大党sjm:汽车上没有HDMI插口,怎么投屏?
- 订单数据表SQL语句练习
- STM32CubeMX学习笔记(27)——FatFs文件系统使用(操作SD卡)
热门文章
- 第一阶段✦第二章☞信息系统集成及服务管理
- 【Web前端】儿童摄影网——网页制作代码
- scrapy框架简介和基础应用
- 雨木林风linux系统,雨林木风开源系统下载-ylmf.os(雨林木风开源系统)v4.0 正式版 - 极光下载站...
- html移动图片广告代码,右下角弹出广告代码 控制div移动 1)div是否
- 状态监测与故障智能诊断技术在能源动力机械内燃机的应用
- 首次!让我们出一个基于延迟的同行 IP 库数据评估来打个样~
- stay here forever中文歌词
- 原创度检测工具-免费原创度检测软件-在线伪原创免费工具
- 志强:微商微信如何引流加人?