位置: IT常识 - 正文

React18升级和React18新特性(react 16.8 新特性)

编辑:rootadmin
React18升级和React18新特性 背景:

React官方在2022年3月29日React18版本正式发布了。

可以在官网看到,react 17 的发布时间是 2020 年 10 月 20 号,距离 React 18 发布足足间隔一年半,并且v17中只有三个小版本,分别是17.0.0、17.0.1、17.0.2:

并且一直到React18发布,React17都没有任何更新,可以说React17只是作为React18的垫脚石。

升级原因:React18的并发更新和自动批处理可以提升项目性能。

2. 提高项目的兼容性

在项目使用React17的时候,如果依赖的组件使用的React18版本可能导致项目因为版本不匹配而发生错误甚至奔溃(亲测有效)。而项目如果使用了React18,依赖的其他组件使用React18或者React17都可以很好的兼容。

升级:新项目: 直接使用npm 或这 yarn安装即可。npm install react react-dom --saveyarn install react react-dom --save老项目: 将package.json中的react版本改为18,删除node_modules文件

再执行npm install即可。

项目中的需要修改的地方:

1. 挂在组件时:ReactDOM.render// React 17import React from 'react';import ReactDOM from 'react-dom';import App from './App';const root = document.getElementById('root')!;//React 18// React 18import React from 'react';import ReactDOM from 'react-dom/client';import App from './App';const root = document.getElementById('root')!;ReactDOM.createRoot(root).render(<App />);2. 卸载组件时: unMountComponentAtNode升级为root.unmount// React 17ReactDOM.unmountComponentAtNode(root);// React 18root.unmount();3. 删除了render中的回调函数。

如果项目中有在render中用到了回调函数,迁移到对应组件的useEffect中即可。

// React 17const root = document.getElementById('root')!;ReactDOM.render(<App />, root, () => {console.log('渲染完成');});// React 18const AppWithCallback: React.FC = () => {useEffect(() => {console.log('渲染完成');}, []);return <App />;};const root = document.getElementById('root')!;ReactDOM.createRoot(root).render(<AppWithCallback />);4. typeScript中需要手动定义children

在项目中定义props类型的时候,如果需要获取字组件children需要显示的定义它。

5. setState自动批处理

什么是批处理?

批处理就是多个状态更新合并成一个次更新。(视图层将多次渲染合并成一次渲染)

在React18以前

我们只在React18中进行批处理。默认情况下,在promise、setTimeout、原生事件处理函数中、或任何其它事件内的更新都不会进行批处理。

在React18以后

所有更新都会自动进行批处理。多次更新将会合并成一次更新,从而降低渲染次数提高性能。

改动点:

如果项目中有通过promise、setTimeout、原生事件处理函数去解决批处理的问题在React18中将不会生效了。

如果再想退出批处理,需要使用flushSync

import React, { useState } from 'react';import { flushSync } from 'react-dom';const App: React.FC = () => {const [count1, setCount1] = useState(0);const [count2, setCount2] = useState(0);return (<divonClick={() => {flushSync(() => {setCount1(count => count + 1);});// 第一次更新flushSync(() => {setCount2(count => count + 1);});// 第二次更新}}><div>count1: {count1}</div><div>count2: {count2}</div></div>);};export default App;6. react组件返回空值

在react17中,如果你需要返回一个空组件,ract只允许你返回null。如果你显示的返回了undifined控制台则会在运行时抛出一个错误。

在react18中,不在见出啊因返回undifined而导致奔溃。即能返回null,也能返回undifned。

Concurrent Mode(并发模式)

并发模式可帮助应用保持响应,并根据用户的设备性能和网速进行适当的调整,该模式通过使渲染可中断来修复阻塞渲染限制。在 Concurrent 模式中,React 可以同时更新多个状态。

react17 和 react18的区别就是:从同步不可中断更新变成了异步可中断更新。

开启并发模式:

在React18中提供了新的root Api,我们只需要把render改成ReactDOM.createRoot(root).render(<App />) 就可以开启并发模式。

开启并发模式就一定开启并发更新吗?

No!在React18中开启并发模式不一定开启并发更新,而是否开启并发更新的依据是是否使用并发特性。

并发特性指的是开启并发模式才能使用的特性,比如下面介绍的:

startTranstionuseTranstionuseDeferredValue

结论:

并发更新的意义就是交替执行不同的任务,当预留的时间不够用时,React将线程控制交给浏览器,等待下一帧时间的到来,然后继续被中断的工作。

并发模式是实现并发更新的基本前提。时间切片是实现并发更新的基本手段。

Transition:

在大屏幕视图更新的时,startTransition 能够保持页面有响应,这个 api 能够把 React 更新标记成一个特殊的更新类型 transitions ,在这种特殊的更新下,React 能够保持视觉反馈和浏览器的正常响应。

1. startTransition:

startTransition(scope)

scope 是一个回调函数,里面的更新任务都会被标记成过渡更新任务,过渡更新任务在渲染并发场景下,会被降级更新优先级,中断更新。

使用:

startTransition(()=>{/* 更新任务 */func()})

startTranstion的回调包裹的setState触发的渲染标记为不紧急渲染。这些渲染可能被其他紧急渲染所抢占。

2. useTranstion

在低优先级还没执行的时候,怎么知道过渡任务处于什么状态,这时候就可以使用useTranstion这个Hooks。useTranstion执行返回一个数组,数组有两个状态值。

第一个状态值: 当处于过渡状态的标记。

第二个状态值: 可以理解为startTranstion,将任务标记为过渡任务。

import { useTranstion } from 'react';const [isPending, startTrastion] = useTranstion();3. useDeferredValue

返回一个延时响应的值可以让一个state延时生效,只有当前没有紧急更新的任务时,该值才会变为最新的值。和startttanstion一样都是标记为非紧急更新。

useTranstion和useDeferredValue异同:

相同点: useDeferredValue本质上和内部实现与useTranstion一样都是标记成了过度更新任务。

不同点:useTranstion是把startTranstion内部的更新任务变成了过度任务transtion,而useDeferredValue是把原值通过过度任务得到新的值,这个值作为延时状态,一个是处理逻辑,一个是生产一个新的状态。

例子

输入框输入一个内容,更新10000条列表内容。在chrome仓库看执行栈。

使用并发特性:

我们可以看到使用并发特性

此时我们的任务被拆分到每一帧不同的task中,JS脚本执行的时间大体在5ms左右,这样浏览器就有剩余的时间执行页面的样式布局和页面重绘。

使用普通更新:

我们可以看到只有一次页面的重绘,其他几次输入都因为输入触发js的执行而阻塞了更新。

新的api一, useIdconst id = useId();

支持同一个组件在客户端和服务端生成相同的唯一的 ID,避免 hydration 的不兼容,这解决了在 React 17 及 17 以下版本中已经存在的问题。因为我们的服务器渲染时提供的 HTML 是无序的,useId 的原理就是每个 id 代表该组件在组件树中的层级结构。

二, useSyncExternalStore

useSyncExternalStore是一个新的api,经历了一次修改,由useMutableSource改变而来,主要用来解决外部数据撕裂的问题。

三, useInsertionEffect

在dom生成之后,useLayoutEffect之前,它的工作原理大致合useLayoutEffect相同,只是此时无法访问DOM节点的引用,一般用于提前注入<style>脚本。

react17-react18

参考地址: react/CHANGELOG.md at main · facebook/react · GitHub

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

上一篇:【CSS】课程网站 网格商品展示 模块制作 ③ ( 清除浮动需求 | 没有设置高度的盒子且内部设置了浮动 | 使用双伪元素清除浮动 )(css教程网站)

下一篇:Vue3通透教程【十三】TS简单类型详解

  • iphone如何阻止陌生来电(iphone如何阻止陌生人来电)

    iphone如何阻止陌生来电(iphone如何阻止陌生人来电)

  • 微信怎么发笔记详情(微信怎么发笔记视频到朋友圈)

    微信怎么发笔记详情(微信怎么发笔记视频到朋友圈)

  • sd wan到底是什么(sd-wan sdn)

    sd wan到底是什么(sd-wan sdn)

  • 单模双芯和单模单芯光纤的区别(单模双芯和单模单芯那个好)

    单模双芯和单模单芯光纤的区别(单模双芯和单模单芯那个好)

  • 没拼单成功前怎么退款(没拼单成功怎么申请退款)

    没拼单成功前怎么退款(没拼单成功怎么申请退款)

  • 笔记本连不上wi-fi怎么回事(笔记本连不上wifi显示无法连接到这个网络)

    笔记本连不上wi-fi怎么回事(笔记本连不上wifi显示无法连接到这个网络)

  • 音箱aux接口怎么用(音箱aux接口是什么意思)

    音箱aux接口怎么用(音箱aux接口是什么意思)

  • 华为mate30录屏怎么录内部声音(华为mate30录屏怎么录)

    华为mate30录屏怎么录内部声音(华为mate30录屏怎么录)

  • cpu掉电容为什么还能用(cpu掉电容)

    cpu掉电容为什么还能用(cpu掉电容)

  • 华为手机有个眼睛的符号是什么(华为手机有个眼睛里面有个月亮)

    华为手机有个眼睛的符号是什么(华为手机有个眼睛里面有个月亮)

  • 手机打开短信总是闪退(手机短信一打开就停止运行)

    手机打开短信总是闪退(手机短信一打开就停止运行)

  • cdrom驱动器能读取dvd吗(cd-rom驱动器在哪找)

    cdrom驱动器能读取dvd吗(cd-rom驱动器在哪找)

  • 如何撤回抖音发布的视频(如何撤回抖音发的语音邀请聊天记录)

    如何撤回抖音发布的视频(如何撤回抖音发的语音邀请聊天记录)

  • 安卓手机用久了很卡怎么办(安卓手机用久了卡顿怎么办)

    安卓手机用久了很卡怎么办(安卓手机用久了卡顿怎么办)

  • airpods声音突然变大(airpods声音突然很大)

    airpods声音突然变大(airpods声音突然很大)

  • 蓝牙耳机需要对着手机说话吗(要使用蓝牙耳机)

    蓝牙耳机需要对着手机说话吗(要使用蓝牙耳机)

  • 手机分享热点会中毒吗(手机分享热点会不会给手机带来厉害)

    手机分享热点会中毒吗(手机分享热点会不会给手机带来厉害)

  • 拼多多个人钱包在哪里(拼多多个人中心多多钱包)

    拼多多个人钱包在哪里(拼多多个人中心多多钱包)

  • 智慧团建密码怎么找回(智慧团建密码怎么老是不对)

    智慧团建密码怎么找回(智慧团建密码怎么老是不对)

  • 计算机上ce键叫什么(计算机上的ce键是干什么用的)

    计算机上ce键叫什么(计算机上的ce键是干什么用的)

  • xr能用无线充电器吗(xr能用无线充电器充电吗)

    xr能用无线充电器吗(xr能用无线充电器充电吗)

  • 苹果xr耳机可以正反插吗(苹果xr可以用耳机转接头吗)

    苹果xr耳机可以正反插吗(苹果xr可以用耳机转接头吗)

  • 微信勿扰模式什么意思(微信勿扰模式什么效果)

    微信勿扰模式什么意思(微信勿扰模式什么效果)

  • 黄钻掉后如何保留背景(黄钻掉了还能隐身访问吗)

    黄钻掉后如何保留背景(黄钻掉了还能隐身访问吗)

  • 苹果x人脸识别坏了能修吗(苹果X人脸识别坏了修多少钱)

    苹果x人脸识别坏了能修吗(苹果X人脸识别坏了修多少钱)

  • Win11小组件打不开怎么办?Win11小组件打不开的解决方法(win11小组件加载内容出现错误)

    Win11小组件打不开怎么办?Win11小组件打不开的解决方法(win11小组件加载内容出现错误)

  • 如何把文档转换为PDF格式(如何把文档转换成二维码)

    如何把文档转换为PDF格式(如何把文档转换成二维码)

  • 鸿蒙怎么设置默认音乐软件?鸿蒙设置默认音乐软件(鸿蒙怎么设置默认系统)

    鸿蒙怎么设置默认音乐软件?鸿蒙设置默认音乐软件(鸿蒙怎么设置默认系统)

  • 应交增值税一般纳税人的账怎么做
  • 牲畜资产科目包括哪些
  • 结转和结转到的区别
  • 销售商品收到转账支票计入什么科目
  • 增值税发票什么时候认证
  • 企业所得税预缴计算方法
  • 外贸企业的会计
  • 填写银行结算凭证的有关印鉴,应集中由谁保管
  • 建筑施工企业的法定代表人对本企业的安全生产负责
  • 原材料的运输
  • 高工资怎么说
  • 商业收入会计分录
  • 汽车固定资产清理账务处理
  • 供应商不给我们开发票,我怎么入账
  • 会计账簿的定义及其作用
  • 营业外收入用不用交企业所得税
  • 营改增后发票
  • 子女继承房地产怎么交税
  • 到期一次还本付息债券
  • 文化事业建设费税率
  • 股东以车辆出资 涉及哪些税费
  • 支付罚款的支出计入什么科目
  • 长期股权投资是什么科目
  • 财务报表第一季度引用的期初数是第四季度还是年报
  • 怎么知道一个公众号有多少人关注
  • 分配车间管理人员薪酬会计分录
  • 股东分红怎么处理
  • win8换成win7重装系统
  • 辅导期纳税人增值税专用发票数量不得超过
  • PHP:pg_connection_reset()的用法_PostgreSQL函数
  • 长期借款利息和短期借款利息都应计入财务费用
  • dl是什么文件
  • 软件开发中的业务一般指什么
  • php floor()
  • 公司偷税漏税有哪些表现形式
  • 审计项目种类
  • 购进的产品样品怎么入账
  • vue使用什么语言
  • 图片美白ps
  • python3.9.4怎么用
  • 暂估入账会计科目
  • 防洪保安资金可以抵扣个税吗
  • 企业多久报一次工伤保险
  • mybatis怎么用
  • 销售净额等于净利润吗
  • 房地产开发企业土地出让金扣除政策
  • 家庭保洁服务包括什么
  • 资产减值准备的计提影响递延所得税资产吗
  • 维修设备增值税税率
  • 物流公司驾驶员安全教育培训
  • 纳税期限与申报期限的区别
  • 支付结算办法是部门规章吗
  • 以现金形式发工资违法吗
  • 未分配利润核销不良贷款
  • 增值税年末必须要交吗
  • 发现错账后进行错账更正的方式
  • 外派人员房租
  • 总分类账的记账
  • sql server.
  • 遗失的美好什么意思?
  • win10注册表主键
  • xp系统浏览器收藏夹文件位置
  • win2003好用吗
  • 让Windows Server 2008设备驱动安装图文教程
  • 如何设置个性化桌面
  • 苹果电脑的重新启动在哪里
  • 怎么从win8装回win7
  • linux修改分组
  • windows累积更新失败怎么办
  • win7电脑dns错误不能上网怎么办
  • linux系统ll
  • js canvas压缩图片
  • javascript中的数字型可以用来保存整数或浮点数(小数)
  • gridview行数
  • jquery获取值的几种方法
  • javascript网页游戏制作教程
  • python2编码问题
  • javascript面向过程
  • 责令立即改正和责令限期整改
  • 涉农项目有哪些项目
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设