react中的setState的使用和深入理解
前端框架从MVC过渡到MVVM。从DOM操作到数据驱动,一直在不断的进步着,提升着,
angular中用的是watcher对象,vue是观察者模式,react就是state了,他们各有各的特点,没有好坏之分,只有需求不同而选择不同。
今天就着重详细的随手写点我对react中state的理解:
React通过管理状态实现对组件的管理,通过this.state()方法更新state。当this.setState()被调用的时候,React会重新调用render方法来重新渲染UI。
在说setstate这个磨人的小妖精之前,不得不先说一下state这个小可爱了
定义一个合适的State,是正确创建组件的第一步。因为有一些变量不需要响应式的使用,如果使用了state,就会给这个变量增加一些响应式挂载,要时 刻 记得做到完美 ^-^
判断是否可以做为一个state的条件:
1、变量如果是通过props从父组件中获取,就不是一个状态
2、如果这个变量可以通过其他的状态state或者属性props 通过数据处理得到,就不是一个状态
3、如果变量在render中没有使用到,那就不是一个state
4、变量在整个生命周期中都保持不变时,也不是一个状态
其实使用的时候最多的使用到的就是state和props,他们两个是有很大的区别的,最主要的区别就是:
State是可变的,是组件内部维护的一组用于反映组件UI变化的状态集合;
而Props对于使用它的组件来说,是只读的,要想修改Props,只能通过该组件的父组件修改。在组件状态上移的场景中,父组件正是通过子组件的Props, 传递给子组件其所需要的状态。
在使用state的时候, 如果我们企图直接修改state中的某一个值之后直接打印(使用)他,就会发现,他其实并没有改变。
就像下面的例子,企图通过点击事件之后就使用修改之后的state的值,但是会发state中的并没有被立即修改,还是原先的值,我们都知道那是因为 setState就相当于是一个异步操作,不能立即被修改
那么我们也都知道为了解决上面的问题会有很多方法例如:
方法一:
这个回调函数会在修改了state之后才会执行,这就就可以happy的使用修改之后的state的值了
方法二:
操作异步函数,用的最舒服的还是async / await 啦
当然还有很多其他的解决办法啦。。。。。。。。只是我会比较常用这两种方法而已
在使用setState的时候,有两种格式;
第一种setstate()格式 第一个参数是一个对象,第二个参数是一个回调函数,这个回调函数是在setstate执行完并页面渲染了之后再执行
但是这种修改的方式不稳妥,因为是直接修改,我还是比较喜欢使用第二种格式
setstate的第二种格式,接收一个回调函数,而不是一个对象,这个回调函数有两个参数,
一个是接收前一个状态值作为第一个参数,并将更新后的值作为第二个参数
这种写法在这个例子里有点大材小用了,但是在处理复杂数据和逻辑的时候会特别好用 !
总的来说setstate这个磨人的小妖精就和Vue中的数据响应一样,
在Vue中,
Vue官网上偷的图。。。。。。。。。。
组件、函数等渲染---->创建一个虚拟DOM树------->当data、computed、props改变时会引起页面的刷新--------watcher检测变化,当变化以后不会 立 即渲染,会有一个队列,只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触 发, 只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后,在下一个的事件循环“tick”中,Vue 刷 新队列并执行实际 (已去重的) 工作。
在react中
可以看出在react中也是和Vue中的一样,state的值在修改了之后并不会立即被修改,而是也有一个类似的队列,setState通过一个队列机制实现state的更新。当执行setState时,会把需要更新的state合并后放入状态队列,而不会立刻更新this.state,利用这个队列机制可以高效的批量的更新state。
真是一个神奇的方法,很喜欢这个可以高效批量更新state的机制,于是就去瞅了瞅setState的源码,想看一下react是怎么构造出setState这个磨人的小妖精的
这个构造小妖精的过程也是磨人的。。。。。。理了好久才理清。。。。
它的主要流程如下:
1、当调用setState时,实际上会执行enqueueSetState方法,并对partialState以及_pendingStateQueue更新队列进行合并,最终通过enqueueUpdate执行state更新
2、 如果组件当前正处于update事务中,则先将Component存入dirtyComponent中。否则调用batchedUpdates处理。
而performUpdateIfNecessary方法获取_pendingElement、_pendingStateQueue、_pendingForceUpdate,并调用reciveComponent和updateComponent方法进行组件更新。
3、batchedUpdates发起一次transaction.perform()事务
4、开始执行事务初始化,运行,结束三个阶段
初始化:事务初始化阶段没有注册方法,故无方法要执行
运行:执行setSate时传入的callback方法,一般不会传callback参数
结束:更新isBatchingUpdates为false,并执行FLUSH_BATCHED_UPDATES这个wrapper中的close方法
5、FLUSH_BATCHED_UPDATES在close阶段,会循环遍历所有的dirtyComponents,调用updateComponent刷新组件,并执行它的pendingCallbacks, 也就是setState中设置的callback。
源码部分有空补上。。。。。。
react中的setState的使用和深入理解的更多相关文章
- React中的setState到底发生了什么?
https://yq.aliyun.com/ziliao/301671 https://segmentfault.com/a/1190000014498196 https://blog.csdn.ne ...
- 3.React中的setstate的几个现象
转载segfault 上面的一篇文章,https://segmentfault.com/a/1190000014498196 1.在同一个方法中多次setState是会被合并的,并且对相同属性的设置只 ...
- react中this.setState的理解
this.setState作用? 在react中要修改this.state要使用this.setState,因为this.state只是一个对象,单纯的修改state并不会触发ui更新.所以我们需要用 ...
- React中的state与props的再理解
props可以看做是 property 的缩写的复数,可以翻译为属性,类似于HTML 标签的自定义属性.在大多数React教程里讲 state 和 props 主要的区别在于 props 是不可变的, ...
- React中this.setState是同步还是异步?为什么要设计成异步?
在使用react的时候,this.setState为什么是异步呢? 一直以来没有深思这个问题.昨天就此问题搜索了一下. react创始人之一 Dan Abramovgaearon在GitHub上回答了 ...
- react 中的 setState
语法:setState(newState [,callback]) 1.只要有入门基础的同学都知道 setState({...}) 是更新组件中的 state 内容 2.但是,setState 是异步 ...
- React中的setState(obj)
1.setState(obj) 只能浅merge obj,对于复杂对象结构的不行 比如: this.state = { data:{ idx:1 } } this.setState( ...
- 从源码的角度再看 React JS 中的 setState
在这一篇文章中,我们从源码的角度再次理解下 setState 的更新机制,供深入研究学习之用. 在上一篇手记「深入理解 React JS 中的 setState」中,我们简单地理解了 React 中 ...
- 深入理解 React JS 中的 setState
此文主要探讨了 React JS 中的 setState 背后的机制,供深入学习 React 研究之用. 在课程 React.js入门基础与案例开发 中,有些同学会发现 React JS 中的 set ...
随机推荐
- https协议(4)
架构层次 HTTPS(全称:Hypertext Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版.即HTT ...
- String.Format 大全
0.0的格式化 string.Format("{0:8D8}", 3)//第一个8表示空8个位置,后一个8表示用0填写最多8位数据 1.格式化货币(跟系统的环境有关,中文系统默认格 ...
- [Xcode 实际操作]一、博主领进门-(15)读取当前应用的信息
目录:[Swift]Xcode实际操作 本文将演示读取当前应用的配置信息. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit class V ...
- GenericKeychain
KeychainItemWrapper是apple官方例子“GenericKeychain”里一个访问keychain常用操作的封装类,在官网上 下载了GenericKeychain项目后,只需要把“ ...
- AutoLayout 根据文字、图片自动计算 UITableViewCell 高度
原文网址: http://lvwenhan.com/ios/449.html 此系列文章代码仓库在 https://github.com/johnlui/AutoLayout ,有不明白的地方可以参考 ...
- Redis安装(centOS7)
1.安装gcc环境 sudo yum install gcc-c++ 2.安装wget sudo yum install wget 3.下载Redis源码包 wget http://download. ...
- 去除List<Object>集合中重复的元素(利用HashSet的特性---无重复元素)
import java.util.ArrayList;import java.util.HashSet;import java.util.Iterator; public class Hashset ...
- Hibernate、Spring和Struts工作原理及使用理由
1.读取并解析配置文件2.读取并解析映射信息,创建SessionFactory3.打开Sesssion4.创建事务Transation5.持久化操作6.提交事务7.关闭Session8.关闭Sesst ...
- I/O————缓存流
为什么要使用缓存流? 当对磁盘访问次数多的时候,字节流和字符流就会感觉性能不佳,速度较慢. 缓存流,一次会读取很多的数据到缓存中,以后每一次读取都是从缓存中读取,直到缓存中数据读取完,这样就减少了io ...
- Mybatis中的复合条件查询
1.Map中根据字段名存儲: 定义接口:List<Student> selectByCondition1(Map<String,Object> map); 映射文件: < ...