React之setState原理分析

最新推荐文章于 2024-03-27 19:20:55 发布
VIP文章 最新推荐文章于 2024-03-27 19:20:55 发布
阅读量2.4k 收藏 10
点赞数 4
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web2022050901/article/details/126370801
版权

1、setState异步更新

  • 我们都知道，React通过this.state来访问state，通过this.setState()方法来更新state。当this.setState()方法被调用的时候，React会重新调用render方法来重新渲染UI
  • 首先如果直接在setState后面获取state的值是获取不到的。在React内部机制能检测到的地方， setState就是异步的；在React检测不到的地方，例如setInterval,setTimeout，setState就是同步更新的

因为setState是可以接受两个参数的，一个state，一个回调函数。因此我们可以在回调函数里面获取值

  • setState方法通过一个队列机制实现state更新，当执行setState的时候，会将需要更新的state合并之后放入状态队列，而不会立即更新this.state
  • 如果我们不使用setState而是使用this.state.key来修改，将不会触发组件的re-render。
  • 如果将this.state赋值给一个新的对象引用，那么其他不在对象上的state将不会被放入状态队列中&
最低0.47元/天 解锁文章
蚂蚁二娘
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React：setState详解
01-02
react之setState遇到的坑、解释setState为什么是异步的、怎样变成同步setState。。。。。。
深入研究React中setState
08-28
主要介绍了深入研究React中setState源码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
setState详解
热门推荐
sysuzhyupeng的博客
03-18 4万+
我们都知道，React通过this.state来访问state，通过this.setState()方法来更新state。当this.setState()方法被调用的时候，React会重新调用render方法来重新渲染UIsetState异步更新React初学者常会写出this.state.value = 1这样的代码，这是完全错误的写法。注意：一定不要直接修改this.state setState
React的setState
最新发布
qq_42774794的博客
03-27 606
setState()将对组件 state 的更新排入队列，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。这是用于更新用户界面以响应事件处理器和处理服务器数据的主要方式setState()并不总是立即更新组件。它会批量推迟更新。这使得在调用setState()后立即读取this.state成为了隐患。为了消除隐患，请使用或者setState的回调函数（），这两种方式都可以保证在应用更新后触发除非返回false，否则setState()将始终执行重新渲染操作。
React - setState 原理
kelly0721的博客
09-12 1658
setState 原理
React State 原理理解
YuLong的博客
01-12 1311
文章目录 setState：React 项目中 UI 的改变来源于 state 改变，类组件中 setState 是更新组件，渲染视图的主要方式。 用法：setState(obj,callback) 第一个参数： 当 obj 是一个对象，则为即将合并的 state 当 obj 是一个函数，那么当前组件的 state 和 props 将作为参数，返回值用于合并新的 state 第二个参数 callback ：callback 为一个函数，函数执行上下文中可以获取当前 setState 更新后的最新
React中的setState使用细节和原理解析
m0_71485750的博客
10-01 1万+
例如一个数据message有被展示到页面中, 并且传入到子组件中展示, 此时通过setState修改message, 如果是同步的修改完成后, message的值就被改变了;并且修改完成的后续代码有报错的情况, 在这个时候再进行调试的时候, 会出现页面中message的值被修改掉, 而传入到子组件的message并没有修改的情况, 导致于state和props中的数据不一致。而React中的做法也是如此, 在一个时间段中, 会获取多个更新, 再将多个更新放入一个任务队列中, 再对任务队列进行批处理;
详解setState 方法
Dear
08-02 7728
文章目录为什么要是用 setStatesetState 异步更新为什么要异步更新如何获取更新后的值同步 or 异步setState的合并数据的合并多个setState合并setState性能优化react 更新机制diff算法的作用传统 diff算法react diff算法对比不同类型的元素对比同一类型的元素对子节点进行递归keys的优化在最后位置插入数据在前面插入数据 为什么要是用 setState 当我们希望通过点击一个按钮从而改变一个文本时，就需要使用到 setState方法，比如： import R
setState原理
程序媛的梦工厂
09-03 3274
setSate接受两个参数，一个是state，另一个是回调函数 注意点： 主要是通过队列机制实现state更新，当执行setState的时候，会将需要更新的state合并后放入状态队列中，而不会立即更新this.state。队列机制主要实现了批量更新state。 如果我们不使用setState更新，而是直接采用this.state来修改，state不会被放入状态队列中，下次调用setState时...
React中this.setState方法原理解析（详解）
weixin_46726346的博客
08-30 1740
而这一篇文章，主要是简单的实现一下this.setState方法，为了实现该方法，就要知道this.setState方法具有什么特点。
React解密：React中setState的运行原理是什么
lee前端技术站
08-26 1152
我们知道react中更新state的时候，会调用setState方法。那么调用setState方法为什么就能更新组件的state呢，其原理又是什么呢？下面我们就来讲讲setState的原理： setState()将对组件 state 的更改排入队列批量推迟更新，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。其实setState实际上不是异步，只是代码执行顺序不同，有了异步的感觉。 setState(stateChange | updater [, callback]) .
【React源码笔记】setState原理解析
Johan666的博客
06-18 1351
React把组件看成是一个State Machines状态机，首先定义数值的状态state，通过用户交互后状态发生改变，然后更新渲染UI。也就是说更新组件的state，然后根据新的state重新渲染更新用户的界面。而在编写类组件时，通常分配state的地方是construtor函数。 刚开始热情满满学习的时候，总是从React官方文档开始死磕，看到state那一块，官方文档抛出了“ 关于 setState()你应该了解的三件事 “几个醒目的大字： （1）不要直接修改state （2）state的更新可能是异
详解React中setState回调函数
08-27
主要介绍了详解React中setState回调函数，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
深入掌握 react的 setState的工作机制
08-29
本篇文章主要介绍了深入掌握 react的 setState的工作机制，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈使用React.setState需要注意的三点
08-28
本篇文章主要介绍了浅谈使用React.setState需要注意的三点，提出了三点对 React 新手来说是很容易忽略的地方，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
React-50：setState
臧小川的博客
09-02 270
对象形式 也是最经常用到的 import React, { Component } from 'react'; export default class Demo extends Component { state = { count: 0 }; add = () => { //对象式的setState //1.获取原来的count值 const { count } = this.state; //2.更新状态 this.setState({ c.
setState是同步还是异步的？
油墨香^-^的博客
10-12 1128
组件中的所有函数在执行时临时设置一个变量isBatchingUpdates = true，当遇到setState时，如果isBatchingUpdates是true，那么setState就是异步的，如果是false，那么setState就是同步的。2 当函数遇到setTimeout、setInterval时isBatchingUpdates = false。setState在合成事件和生命周期函数中是异步的，在原生事件和定时器中都是同步的。是同步也是异步、合成事件、生命周期函数、原生事件、定时器。
setState是同步还是异步
Ll1994693的博客
09-24 2006
如果判断是异步，那么react’就会收集setState，也就是收集我们定义的收集器，将我们的setState每个都push到定义的批量更新对象（updateQueue）的数组中，然后等事件函数结束的时候重置这个变量标志，才会取出之前缓存的setState，进行一次执行。相反，他们会先让你完成你的订单，让你修改它，甚至接受桌子上其他人的订单。那么在setState的时候，会判断该变量标识的值，如果是fasle，也就是setState同步更新，如果是同步，那么直接更新组件。绑定事件的时候 加上批量处理逻辑。
react的setstate原理
Android 学习笔记
06-14 1144
setState方法同步还是异步？ 在React生命周期内，也可以理解主线程中 setState就是异步的；子线程或者说异步任务中，例如setInterval,setTimeout里，setState就是同步更新的。 上图是setState的流程图，我们是结合很经典的例子，更浅显易懂的说明 当第一次调用setState，newState被放入pending队列，此时batch u...
react setstate原理
07-28
回答: React中的setState方法是用来更新组件的状态的。根据引用\[1\]，setState是异步的，所以在设置setState后，无法立即通过this.state获取最新状态。如果要获取最新的状态，需要在setState的回调函数中获取。另外，根据引用\[2\]，setState方法会合并调用，即多次调用setState会被合并成一次更新。在React的生命周期和合成事件执行前后都有相应的钩子，分别是pre钩子和post钩子，根据引用\[3\]，pre钩子会调用batchedUpdate方法将isBatchingUpdates变量置为true，开启批量更新，而post钩子会将isBatchingUpdates置为false。这样可以提高性能，减少不必要的渲染。总的来说，setState的执行过程是将更新的状态放入队列中，然后在适当的时机进行批量更新。 #### 引用[.reference_title] - *1* *3* [React - setState 原理](https://blog.csdn.net/kelly0721/article/details/117252206)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [React解密：React中setState的运行原理是什么](https://blog.csdn.net/leelxp/article/details/108238766)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值