setState的异步，同步以及合并

setState

<body><div id="test"></div>
</body>
<!-- 核心库 -->
<script type="text/javascript" src="js/react.development.js"></script>
<!-- 基于React专门用于操作DOM的扩展库 -->
<script type="text/javascript" src="js/react-dom.development.js"></script>
<!-- babel解析JSX语法代码转换为js代码 -->
<script type="text/javascript" src="js/babel.min.js"></script>
<script type="text/babel">/*text/babel 就是让babel进行解析*/class A extends React.Component{state = {count:1}// 函数形式参数和对象形式参数修改 react相关的回调都是异步的 如果在紧随其后打印修改的值可能不会是修改后的// 要想获得需要使用setState的第二个参数  是个回调函数 这个回调函数是会等异步完成的// 函数形式参数  是依赖原本state中的值的是直接对其中的值进行更改test1 = () => {this.setState(state => ({count:state.count + 1}),()=>{console.log('callback test1',this.state.count)})console.log('commont test1',this.state.count)}// 对象形式参数  是不依赖的 有中间赋值给其他变量的过程  可以和state中原本的值关系不大test2 = () => {const count = this.state.count - 1this.setState({count},()=>{console.log('callback test2',this.state.count)})console.log('commont test2',this.state.count)}render(){console.log('A renduer')return(<div><h1>Addd：{this.state.count}</h1><button onClick={this.test1}>111111</button><button onClick={this.test2}>222222</button>)}}ReactDOM.render(<A/>,document.getElementById('test'))
</script>

react相关回调(异步)和其他回调(同步)

react相关回调，比如：react的监听事件，生命周期函数等

其他回调，比如：DOM的事件监听，定时器函数，Promise等

<body><div id="example"></div><script type="text/javascript" src="./js/react.development.js"></script>
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<script type="text/javascript" src="./js/babel.min.js"></script><script type="text/babel">class StateTest extends React.Component {state = {count: 0,}/*react事件监听回调中, setState()是异步更新状态*/update1 = () => {console.log('update1 setState()之前', this.state.count)this.setState(state => ({count: state.count + 1}))console.log('update1 setState()之后', this.state.count)}/*react生命周期勾子中, setState()是异步更新状态*/componentDidMount () {console.log('componentDidMount setState()之前', this.state.count)this.setState(state => ({count: state.count + 1}))console.log('componentDidMount setState()之后', this.state.count)}/*定时器回调 / 原生事件监听回调 / promise回调 /...*/update2 = () => {setTimeout(() => {console.log('setTimeout setState()之前', this.state.count)this.setState(state => ({count: state.count + 1}))console.log('setTimeout setState()之后', this.state.count)})}update3 = () => {const h2 = this.refs.counth2.onclick = () => {console.log('onclick setState()之前', this.state.count)this.setState(state => ({count: state.count + 1}))console.log('onclick setState()之后', this.state.count)}}update4 = () => {Promise.resolve().then(value => {console.log('Promise setState()之前', this.state.count)this.setState(state => ({count: state.count + 1}))console.log('Promise setState()之后', this.state.count)})}update5 = () => {console.log('onclick setState()之前', this.state.count)this.setState(state => ({count: state.count + 1}))console.log('onclick setState()之后', this.state.count)console.log('onclick setState()之前2', this.state.count)this.setState(state => ({count: state.count + 1}))console.log('onclick setState()之后2', this.state.count)}render() {const {count} = this.stateconsole.log('render()', count)return (<div><h2 ref='count'>{count}</h2><button onClick={this.update1}>更新1</button> ---<button onClick={this.update2}>更新2</button> &nbsp;<button onClick={this.update3}>更新3</button> &nbsp;<button onClick={this.update4}>更新4</button> ---<button onClick={this.update5}>更新5</button> &nbsp;</div>)}}ReactDOM.render(<StateTest/>, document.getElementById('example')) // 渲染组件标签, 内部会调用组件标签对象的render()虚拟DOM</script>
</body>

多次调用异步的setState，在合并前（在render渲染前，要进行合并，因为渲染只进行一次），对于函数形式的只会取决于结束最晚的那次更新，因为异步起始读取的都是state不会是其他异步处理完毕的内容，在结束时每个异步会重复覆盖之完成的异步的内容，也就是他会保存最新的状态

而对象形式参数会进行多次的状态更新，但也是一次渲染

如果对象跟函数两个模式混用

对象在前会进行多次的状态更新，但也是一次渲染
函数在前直接合并

   update6 = () => {console.log('onclick setState()之前', this.state.count)this.setState({count: this.state.count + 1})console.log('onclick setState()之后', this.state.count)console.log('onclick setState()之前2', this.state.count)this.setState({count: this.state.count + 1})console.log('onclick setState()之后2', this.state.count)}update7 = () => {console.log('onclick setState()之前', this.state.count)this.setState({count: this.state.count + 1})console.log('onclick setState()之后', this.state.count)console.log('onclick setState()之前2', this.state.count)this.setState(state => ({count: state.count + 1}))console.log('onclick setState()之后2', this.state.count)}<button onClick={this.update6}>更新6</button> &nbsp;<button onClick={this.update7}>更新7</button> &nbsp;

setState的异步，同步以及合并相关推荐

setState是异步还是同步？
react中setState是同步还是异步困扰了好久,今天终于有了答案:它既是同步的,也是异步的: 批量更新: 加入我在页面上写三个setState去分别 componentDidMount() {t ...
React setState 的异步与同步
目录前言先看一个例子 setState 为什么不会同步更新组件? 探秘setState 源码事务整体流程回顾: 再看一个例子: 结语前言 react 官网:State 的更新可能是异步的详 ...
理解setState()，异步还是同步？
state state的存在是为了动态改变组件,比如根据不同的用户操作和网络请求,来重新渲染组件. setState()是React给我们的一个API,用来改变或定义state. setState() ...
python协程详解_对Python协程之异步同步的区别详解
一下代码通过协程.多线程.多进程的方式,运行代码展示异步与同步的区别. import gevent import threading import multiprocessing # 这里展示同步和异 ...
异步同步、阻塞非阻塞、异步回调、线程队列和协程
今天学习了异步同步.阻塞非阻塞.异步回调.线程队列和协程一.异步同步和阻塞非阻塞线程的三种状态: 1.就绪 2.运行 3.阻塞阻塞:遇到了IO操作代码卡住无法执行下一行 CPU会切换到 ...
异步/同步、阻塞/非阻塞的理解
异步/同步.阻塞/非阻塞的理解 [同步和异步] 通俗的讲: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个 ...
（107）FPGA面试题-Verilog编写200ns异步/同步低有效复位激励
1.1 FPGA面试题-Verilog编写200ns异步/同步低有效复位激励 1.1.1 本节目录 1)本节目录: 2)本节引言: 3)FPGA简介: 4)FPGA面试题-Verilog编写200ns ...
ajax get 缓存 ie,Ajax异步同步请求被IE缓存的问题解决方法(get方式)
Ajax异步同步请求被IE缓存的问题解决方法(get方式) 分类:Javascript| 发布:佚名| 查看: | 发表时间:2014/1/20 折腾了半天,程序中使用jquery的load方法进行请 ...
java ajax同步请求,成都汇智动力-java ajax实现异步同步请求全面详解
原标题:成都汇智动力-java ajax实现异步同步请求全面详解对象 var request=new () //兼容IE5 IE6 if (window.) {// code for IE7+, F ...

setState的异步，同步以及合并

setState

react相关回调(异步)和其他回调(同步)

setState的异步，同步以及合并相关推荐

最新文章

热门文章