位置: IT常识 - 正文

React中的setState使用细节和原理解析(react中的key的作用)

编辑:rootadmin
React中的setState使用细节和原理解析 文章目录setState使用详解使用setState的原因setState的基本用法setState的异步更新setState获取异步结果setState一定是异步?setState使用详解

推荐整理分享React中的setState使用细节和原理解析(react中的key的作用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:React中的useImperativeHandle,React中的useImperativeHandle,React中的hooks,react中的key的作用,React中的useMemo,React中的hooks,React中的indexod函数的用法,React中的hooks,内容如对您有帮助,希望把文章链接给更多的朋友!

前面我们有使用过setState的基本使用, 接下来我们对setState使用进行详细的介绍

使用setState的原因

开发中我们并不能直接通过修改state的值来让界面发生更新:

因为我们修改了state之后,希望React根据最新的State来重新渲染界面,但是this.state这种方式的修改React并不知道数据发生了变化;

React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化(也就是说React并没有类似于Vue的数据劫持的);

我们必须通过setState来告知React数据已经发生了变化;

大家可能会有疑惑:在组件中并没有实现setState的方法,为什么可以调用呢?

原因很简单,setState方法是从Component中继承过来的。

我有找到对应的源码, 可以看到源码中, setState是放在Component的原型上的

setState的基本用法

setState常见的用法

用法一: 直接在setState函数中传入一个对象, 传入的该对象会和this.state的对象进行一个合并, 相同的属性会进行覆盖, 修改完成后等待任务队列批处理调用render函数实现页面更新

export class App extends Component { constructor() { super() this.state = { message: "Hello World" } } changeText() { this.setState({ message: "你好啊" }) } render() { const { message } = this.state return ( <div> <h2>{message}</h2> <button onClick={() => {this.changeText()}}>按钮</button> </div> ) }}

用法二: 在setState函数中传入一个回调函数, 要求传入的回调函数返回一个对象, React内部会将返回的这个对象和state对象进行合并

这样的做法有两个好处:

好处一: 可以在该回调函数中, 编写修改state数据的逻辑, 具有更强的内聚性

好处二: 当前回调函数会默认将state和props传入进来, 我们可以在回调函数中直接获取, 不需要再通过this.state或this.props的方式获取;

export class App extends Component { constructor() { super() this.state = { message: "Hello World" } } changeText() { this.setState((state, props) => { // 可以直接在回调函数中获取state和props console.log(state, props); // 对数据进行操作的逻辑 const message = state.message + "Hello React" // 该回调函数返回一个对象 return { message } }) } render() { const { message } = this.state return ( <div> <h2>{message}</h2> <button onClick={() => {this.changeText()}}>按钮</button> </div> ) }}setState的异步更新

setState的更新是异步的吗?

我们来验证一下是否真的是异步的, 如下代码, 在执行完setState后, 我们立即打印一下message的结果

export class App extends Component { constructor() { super() this.state = { message: "Hello World" } } changeText() { // 用法一 this.setState({ message: "你好啊" }) console.log(this.state.message) // Hello World } render() { const { message } = this.state return ( <div> <h2>{message}</h2> <button onClick={() => {this.changeText()}}>按钮</button> </div> ) }}

打印结果为Hello World, 并不是修改后的结果, 可见setState是异步的操作,我们并不能在执行完setState之后立马拿到最新的state的结果

那么为什么setState设计为异步呢?

React中的setState使用细节和原理解析(react中的key的作用)

setState设计为异步其实之前在GitHub上也有很多的讨论, 也有许多人会有同样的疑惑;

React核心成员(Redux的作者)Dan Abramov也有对应的回复,有兴趣的同学可以参考一下;

https://github.com/facebook/react/issues/11527#issuecomment-360199710;

个人总结在Dan Abramov的回答中有说到设计为异步的两个主要原因

原因一: setState设计为异步,可以显著的提升性能;

我们知道调用setState会让render函数重新执行, 如果每次调用 setState都进行一次更新,那么意味着render函数会被频繁调用,界面重新渲染,这样效率是很低的;

最好的办法应该是获取到多个更新,之后进行批量更新(或者说统一的更新);

而React中的做法也是如此, 在一个时间段中, 会获取多个更新, 再将多个更新放入一个任务队列中, 再对任务队列进行批处理; 如果还有其他更新不在当前时间段, 则在下一个时间段(或者其他时间段)的任务队列中进行批处理

例如下面代码, 当点击按钮时, render函数只会执行一次, 由此可见是有等待多个更新再进行批处理的export class App extends Component { constructor() { super() this.state = { message: "Hello World" } } changeText() { this.setState({ message: "你" }) this.setState({ message: "你好" }) this.setState({ message: "你好啊" }) } render() { console.log("render函数执行") const { message } = this.state return ( <div> <h2>{message}</h2> <button onClick={() => {this.changeText()}}>按钮</button> </div> ) }}

原因二: 如果同步更新了state,但是还没有执行render函数,那么state和props不能保持同步;

state和props不能保持一致性,会在开发中产生很多的问题;

例如一个数据message有被展示到页面中, 并且传入到子组件中展示, 此时通过setState修改message, 如果是同步的修改完成后, message的值就被改变了; 并且修改完成的后续代码有报错的情况, 在这个时候再进行调试的时候, 会出现页面中message的值被修改掉, 而传入到子组件的message并没有修改的情况, 导致于state和props中的数据不一致

setState获取异步结果

那么如何可以获取到更新后的值呢?

方式一:setState的回调

setState接受两个参数:第一个参数我们刚刚讲解过了, 第二个参数是一个回调函数,这个回调函数会在setState异步有了更新更新后会执行;

格式如下:setState(partialState, callback)

export class App extends Component { constructor() { super() this.state = { message: "Hello World" } } changeText() { // 参数二回调函数可以保证拿到的数据是更新后的 this.setState({ message: "你好啊" }, () => { console.log(this.state.message) // 你好啊 }) } render() { console.log("render函数执行") const { message } = this.state return ( <div> <h2>{message}</h2> <button onClick={() => {this.changeText()}}>按钮</button> </div> ) }}

当然,我们也可以在生命周期函数:

componentDidUpdate() { console.log(this.state.message);}setState一定是异步?

setState一定是异步操作吗? 其实在React 18之前分成两种情况:

情况一: 在组件生命周期或React的事件中,setState是异步;

情况二: 在setTimeout或者原生dom事件中,setState是同步;

changeText() { // setTimeout setTimeout(() => { this.setState({ message: "你好啊" }) console.log(message) // 你好啊 }, 0); }在原生dom事件回调和promise回调, 都是同步的, 这里不再演示****

在React18之后,默认所有的操作都被放到了批处理中(也就是默认所有操作都是异步处理的), 在官方文档中有说明

在React 18之后, 如果希望代码可以同步会拿到,则需要执行特殊的flushSync操作:

注意: 使用flushSync需要在react-dom包里面导入

import { flushSync } from 'react-dom';

flushSync要求传入一个回调函数, 把要更新的数据放在回调函数中, 这样就是同步的

flushSync(() => { this.setState({ message: "你好啊" })})// 这里获取就是同步的console.log(this.state.message) // 你好啊
本文链接地址:https://www.jiuchutong.com/zhishi/290706.html 转载请保留说明!

上一篇:LPIPS 图像相似性度量标准(感知损失)(图像相似性度量)

下一篇:RealSense D435i深度相机介绍(realsense d415参数)

  • qq的星星月亮太阳代表什么意思(qq的星星月亮太阳怎么弄)

    qq的星星月亮太阳代表什么意思(qq的星星月亮太阳怎么弄)

  • 惠普1005和m1005的区别(惠普m1005和1005w)

    惠普1005和m1005的区别(惠普m1005和1005w)

  • 微信怎么不发信息知道对方删没有(微信怎么不发信息看好友是否把你删除)

    微信怎么不发信息知道对方删没有(微信怎么不发信息看好友是否把你删除)

  • 抖音能回看直播吗(抖音能回看直播间吗)

    抖音能回看直播吗(抖音能回看直播间吗)

  • vga dvi hdmi的区别(vga和hdmi和dvi哪个效果好)

    vga dvi hdmi的区别(vga和hdmi和dvi哪个效果好)

  • 腾讯会议切出来会有显示吗(腾讯会议切出来会被发现吗)

    腾讯会议切出来会有显示吗(腾讯会议切出来会被发现吗)

  • 什么是宽带识别码(什么是宽带识别网)

    什么是宽带识别码(什么是宽带识别网)

  • 抖音作品可以小于8秒吗(抖音作品可以小窗口吗)

    抖音作品可以小于8秒吗(抖音作品可以小窗口吗)

  • 华为mate30pro输入法怎么设置(华为mate30pro输入法设置)

    华为mate30pro输入法怎么设置(华为mate30pro输入法设置)

  • 华为手机怎么下载小红书(华为手机怎么下载歌曲到u盘)

    华为手机怎么下载小红书(华为手机怎么下载歌曲到u盘)

  • 快手无网络连接怎么回事(快手无网络连接怎么办)

    快手无网络连接怎么回事(快手无网络连接怎么办)

  • 戴尔平板模式能触屏吗(戴尔平板电脑模式)

    戴尔平板模式能触屏吗(戴尔平板电脑模式)

  • 电脑钉钉如何发语音(电脑钉钉如何发起签到)

    电脑钉钉如何发语音(电脑钉钉如何发起签到)

  • 关闭垂直同步有什么用(关闭垂直同步对电脑有什么影响)

    关闭垂直同步有什么用(关闭垂直同步对电脑有什么影响)

  • nova6支持无线充电吗(nova6手机支持无线充电)

    nova6支持无线充电吗(nova6手机支持无线充电)

  • 微信键盘声音在哪开启(微信键盘声音在哪设置的)

    微信键盘声音在哪开启(微信键盘声音在哪设置的)

  • 小米手环4怎么控制家电(小米手环4怎么开机)

    小米手环4怎么控制家电(小米手环4怎么开机)

  • iqoopro怎么打开通话录音(iqoopro5g怎么开)

    iqoopro怎么打开通话录音(iqoopro5g怎么开)

  • 小爱音箱能连几个手机(小爱音箱能连几个蓝牙)

    小爱音箱能连几个手机(小爱音箱能连几个蓝牙)

  • 荔枝app怎么录节目(荔枝app怎么录制)

    荔枝app怎么录节目(荔枝app怎么录制)

  • 苹果耳机过了保修期能修吗(苹果耳机过了保修期怎么维修)

    苹果耳机过了保修期能修吗(苹果耳机过了保修期怎么维修)

  • 做淘宝客需要什么软件(店铺做淘宝客要花钱吗)

    做淘宝客需要什么软件(店铺做淘宝客要花钱吗)

  • 探探解除配对怎么恢复(探探解除配对怎么办)

    探探解除配对怎么恢复(探探解除配对怎么办)

  • appleipadair3尺寸(iphone air3尺寸)

    appleipadair3尺寸(iphone air3尺寸)

  • 苹果手机悬浮窗怎么关闭(苹果手机悬浮窗怎么添加应用)

    苹果手机悬浮窗怎么关闭(苹果手机悬浮窗怎么添加应用)

  • 图表样式在哪设置(图表样式在哪里)

    图表样式在哪设置(图表样式在哪里)

  • 一般纳税人增值税怎么做账务处理
  • 会计中级工作年限查得严么
  • 确认固定资产减值损失
  • 可供出售金融资产和交易性金融资产
  • 委外加工怎么做仓库账
  • 售后回租利息可以抵税吗
  • 受托代销商品款是什么科目
  • 财务上用替票合法么
  • 个税退税是公司退还是个人退
  • 小规模纳税人季度超过45万怎么交税
  • 往法人账户转备用金
  • 作废的支票银行怎么处理
  • 已贴花的凭证凡修改后所载金额增加的部分应补贴印花
  • 运保佣是什么
  • 存在标的的资产是什么意思
  • 企业支付员工一年多少钱
  • 商品破损了应该怎么赔偿
  • 土地资产类型
  • 员工证书补贴标准
  • 增值税减免明细表怎么填
  • 如何知道企业是查账征收还是核定征收
  • 三证合一后还要去税务局吗
  • 协议报价税率与开出的发票不一致怎么办?
  • 食品发票需要清关吗
  • 网络科技公司会计核算及账务处理
  • 公司帮别人代缴社保
  • 收入是零招待费怎么汇算
  • 高新企业研发人员
  • 公司之间过户车辆要交税吗
  • 投资预算的编制方法
  • 收到财政奖励扶持资金账务处理?
  • win10系统关机后自动开机怎么办
  • php如何实现伪静态
  • php获取指定日期的时间戳
  • QQPCTray.exe是什么进程 QQPCTray.exe文件介绍
  • 代理进口合同如何签署
  • 多枝发财树怎么修剪
  • php数组去重函数
  • 1.2版本的oppo手机解锁方法
  • 时间序列garch
  • xss漏洞利用的场景
  • 面试宝典下载
  • php数据库搭建
  • file读取文件内容
  • 非事业单位企业退休年龄
  • 怎么调整以前年度
  • 缴纳的印花税怎么入账
  • 增值税不超过10万免征
  • phpcms怎么用
  • mysql写日志机制
  • 差额征税扣除额的具体规定
  • 企业办理税务注销需要什么资料
  • CMS不要让MySQL为你流泪
  • 营业执照变更需要本人到场吗
  • 小规模纳税人能开3%的专票吗
  • 小规模季度开票不超过多少
  • 补缴税款计入什么科目
  • 印花税缴纳时间点
  • 一般纳税人支出都要交税吗
  • 其他债权投资的特征有哪些
  • 预付账款余额在贷方为
  • 工资补偿款是什么意思
  • 员工工资计入成本怎么做账
  • 技术支持费用属于什么费用
  • 收购发票使用范围及预警怎么写
  • 农业机耕属于种植业吗
  • 企业会计账簿设计的原则
  • win10安装mysql5.6
  • Windows Server 2016技术第三预览版10537英文版ISO镜像下载泄露
  • server2008开机启动项设置
  • wintogo.exe
  • msmpeng.exe是什么程序
  • window系统桌面
  • linux 多网卡配置
  • jquery的认识和使用
  • python爬虫过程
  • unity人物面板
  • html5游戏引擎排行
  • jquery给div添加样式
  • 社保所属期起和所属期止是什么意思区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设