位置: IT常识 - 正文

React 18 特性(react 16新特性)

编辑:rootadmin
原文链接 2022 年 3 月 29 日,React 18 正式版发布了。 新增了以下这些新功能 Concurrent Mode 并发模式 在 CM 模式下,React 在执行过程中,每执行一个 Fiber,都会看看有没有更高优先级的更新,如果有,则当前低优先级的的更新会被暂停,待高优先级任务执行完 ...

推荐整理分享React 18 特性(react 16新特性),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react17新增特性,react新特性,react16.8新特性,react 17,react18新特性,react18特性,react新特性17,react18特性,内容如对您有帮助,希望把文章链接给更多的朋友!

原文链接

2022 年 3 月 29 日,React 18 正式版发布了。

新增了以下这些新功能

Concurrent Mode 并发模式

在 CM 模式下,React 在执行过程中,每执行一个 Fiber,都会看看有没有更高优先级的更新,如果有,则当前低优先级的的更新会被暂停,待高优先级任务执行完之后,再继续执行或重新执行。

startTransition

React 的状态更新可以分为两类:

紧急更新(Urgent updates):比如打字、点击、拖动等,需要立即响应的行为,如果不立即响应会给人很卡,或者出问题了的感觉过渡更新(Transition updates):将 UI 从一个视图过渡到另一个视图。不需要即时响应,有些延迟是可以接受的。

默认的setState是紧急更新,startTransition包裹的setState是非紧急更新。React 会在高优先级更新渲染完成之后,才会启动低优先级更新渲染,并且低优先级渲染随时可被其它高优先级更新中断。

// 紧急的setInputValue(e.target.value);startTransition(() => { setSearchQuery(input); // 非紧急的});自动批处理 Automatic Batching

批处理是指 React 将多个状态更新,聚合到一次 render 中执行,以提升性能。

React 18 特性(react 16新特性)

在 React 18 之前,React 只会在事件回调中使用批处理,而在 Promise、setTimeout、原生事件等场景下,是不能使用批处理的。

而在 React 18 中,所有的状态更新,都会自动使用批处理,不关心场景。

function handleClick() { setCount(c => c + 1); setFlag(f => !f); // React 只会 re-render 一次,这就是批处理}setTimeout(() => { setCount(c => c + 1); setFlag(f => !f); // React 只会 re-render 一次,这就是批处理}, 1000);

如果你在某种场景下不想使用批处理,你可以通过 flushSync来强制同步执行

import { flushSync } from 'react-dom';function handleClick() { flushSync(() => { setCounter(c => c + 1); }); // React 更新一次 DOM flushSync(() => { setFlag(f => !f); }); // React 更新一次 DOM}

注意:自动批处理情况下在 Class 组件中,如果你在两次 setState 中间读取了 state 值,会出现不兼容的情况

// 不兼容handleClick = () => { setTimeout(() => { this.setState(({ count }) => ({ count: count + 1 })); // 在 React17 及之前,打印出来是 { count: 1, flag: false } // 在 React18,打印出来是 { count: 0, flag: false } console.log(this.state); this.setState(({ flag }) => ({ flag: !flag })); });};// 更改后兼容handleClick = () => { setTimeout(() => { ReactDOM.flushSync(() => { this.setState(({ count }) => ({ count: count + 1 })); }); // 在 React18,打印出来是 { count: 1, flag: false } console.log(this.state); this.setState(({ flag }) => ({ flag: !flag })); });};流式 SSR

SSR 一次页面渲染的流程大概为:

服务器 fetch 页面所需数据数据准备好之后,将组件渲染成 string 形式作为 response 返回客户端加载资源客户端合成(hydrate)最终的页面内容

而在 React 18 中,基于全新的 Suspense,支持了流式 SSR,也就是允许服务端一点一点的返回页面。

在 React 18 中,我们通过 Suspense包裹,可以告诉 React,我们不需要等这个组件,可以先返回其它内容,等这个组件准备好之后,单独返回。

更多关于流式 SSR 的讲解可见:https://github.com/reactwg/react-18/discussions/37

新 HooksuseDeferredValue

useDeferredValue 可以让一个 state 延迟生效,只有当前没有紧急更新时,该值才会变为最新值。useDeferredValue 和 startTransition 一样,都是标记了一次非紧急更新。

useId

支持同一个组件在客户端和服务端生成相同的唯一的 ID,避免 hydration 的不兼容。原理是每个 id 代表该组件在组件树中的层级结构。

useSyncExternalStore

useSyncExternalStore 能够让 React 组件在 Concurrent Mode 下安全地有效地读取外接数据源。在 Concurrent Mode 下,React 一次渲染会分片执行(以 fiber 为单位),中间可能穿插优先级更高的更新。假如在高优先级的更新中改变了公共数据(比如 redux 中的数据),那之前低优先的渲染必须要重新开始执行,否则就会出现前后状态不一致的情况。useSyncExternalStore 一般是三方状态管理库使用,一般我们不需要关注。

useInsertionEffect

这个 Hooks 只建议 css-in-js库来使用。这个 Hooks 执行时机在 DOM 生成之后,useLayoutEffect 生效之前,一般用于提前注入

本文链接地址:https://www.jiuchutong.com/zhishi/313160.html 转载请保留说明!

上一篇:vue3中使用scss加上scoped导致样式失效问题(vue动态修改scss变量)

下一篇:dedecms提示:Deprecated: __autoload() is deprecated, use spl_au(dedecms配置)

  • 个人所得税纳税记录
  • 房产契税什么时候交的小知识
  • 公司注销了账本还需保留吗
  • 增值税普通发票和电子普通发票的区别
  • 增值税少企业所得税多说明什么
  • 开专票还是开普发票
  • 劳务费发票可以抵扣进项税吗
  • 城建税 申报表
  • 忘记先抄税再申报了怎么办
  • 跨月的普通发票怎么开
  • 公司内部食堂招待费账务处理
  • 出售房产税收
  • 慈善会可以开什么票据
  • 如何区分餐费发票和停车费发票?
  • 单品销售的方法
  • 增值税专票盖章正确位置
  • 非同一控制下企业合并的交易费用
  • 技术服务费收入属于提供劳务收入吗
  • 购入的商品用于捐赠怎么做分录
  • 费用计入资产
  • 支付个人利息没有取得发票
  • 王者荣耀电脑版操作
  • 分级核算下的建议有哪些
  • php中cookie的值存储在哪
  • php和mysql web开发怎么样
  • nvm安装及全局配置node
  • PHP:imagepolygon()的用法_GD库图像处理函数
  • opencv 边缘
  • css给div加边框
  • 完美解决win10间歇性掉线
  • 不按发票金额付款说明
  • 增值税专用发票的税率是多少啊
  • 以前年度损益调整结转到本年利润吗
  • 多缴所得税怎么算
  • 关于DEDECMS移动data后网站地图无法生成的解决方法
  • 小微企业可以不交税吗
  • 计提贷款准备金公式
  • 异地多缴纳预缴税怎么退
  • 营改增后企业的税负控制
  • 业委会究竟在小区起什么作用
  • 付的房屋租金计入什么会计科目
  • 收据不能入账如何处理
  • 股东分红要不要纳税?
  • 公司购买股票会计分录怎么做
  • 冲销坏账怎么做分录
  • 员工奖励账务处理流程
  • 资金周转率计算公式
  • 内账收入按含税还是不含税入
  • 银行贷款利息支出税前扣除标准
  • 银行收取服务费
  • 政府会计制度累计盈余为负数
  • 商品和服务税收分类编码是什么
  • 没收到电费账单怎么办
  • 支票有效期10天是自然日还是工作日
  • 资产负债表怎么算
  • sql语句汇总数据
  • 在mysql中,创建数据库的基本语法格式是
  • mysql启动错误1067 进程意外终止
  • win8开始菜单怎么设置
  • 64位ubuntu8.04 安装QQ
  • linux操作系统安装包
  • win7蓝屏代码0x0000007e
  • win7开始菜单没有搜索框
  • win10系统自带功能
  • 浅谈特殊儿童的融合教育论文
  • jQuery插件安装教程
  • 粉碎文件的快捷键
  • css网页布局中注释是什么
  • u3d transform
  • 原生js常用的方法
  • python拷贝列表
  • jquery通配符选择器
  • 辽宁省农村合作医疗2024怎么缴费
  • csp2020成绩查询
  • 四川地方税务局网址是什么
  • 医院法制科工作职责
  • 内蒙古网上税务登记流程
  • 个体工商户地税没有注销有影响吗
  • 青岛市高新区是红岛吗
  • 自然人扣缴客户端重新安装后信息怎么同步
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设