setState(API)的异步和同步问题 [操作系统入门]

编程

在react中,想要改变state内部状态,需要使用setState进行修改,如果只是修改state的部分属性,则不会影响其他的属性,这个只是合并并不是覆盖。

 

this.setState(),该方法接收两种参数:对象或函数(理解对象形式是函数形式的简写)。

  1. 对象:this.setState({key:value})。
  2. 函数:接收两个函数,第一个函数接受两个参数,第一个是当前state,第二个是当前props,该函数返回一个对象,和直接传递对象参数是一样的,就是要修改的state;第二个函数参数是state改变后触发的回调

在此还需要注意的是,setState有异步更新和同步更新两种形式,那么什么时候会同步更新,什么时候会异步更新呢?

 

 

React控制之外的事件中调用setState是同步更新的。比如原生js绑定的事件,setTimeout/setInterval等。

大部分开发中用到的都是React封装的事件,比如onChange、onClick、onTouchMove等,这些事件处理程序中的setState都是异步处理的。

 

总结:setState同步异步和调用环境,上下文有关。

import React,{Component,createRef} from "react";

class SetStateAsync extends Component {

state = {

num:0

}

btnRef = createRef();

//更新状态的两种方式:

//1、对象形式

addNum = (params)=>{

console.log(params);

this.setState({

num:this.state.num+1

})

}

//2、函数形式

// addNum = (params)=>{

// console.log(params);

// this.setState((state,props)=>{

// console.log(state,props,"什么参数!!!");

// return {

// num:this.state.num + 1

// }

// },()=>{

// //获取异步的最新修改state的值。

// console.log(this.state.num);

// })

// }

//问题:setState(API)同步异步问题!!!

/*

通过react控制的调用是异步的。

react控制:即react二次封装的事件。

通过原生调用setState是同步的。

同步如下:

*/

componentDidMount(){

this.btnRef.current.addEventListener("click",()=>{

console.log("原生方法执行了!!!!");

this.setState({

num:this.state.num+1

});

       

console.log(this.state.num,"同步的setState更新状态!!!");

})

}

render(){

return (

<>

<p>同步异步更新state状态</p>

<p>数量:{this.state.num}</p>

<button ref={this.btnRef} onClick={()=>this.addNum("改变num数量!!!")} className=‘btn‘>点我+1</button>

</>

)

}

}

export default SetStateAsync;

 

setState(API)的异步和同步问题

以上是 setState(API)的异步和同步问题 [操作系统入门] 的全部内容, 来源链接: utcz.com/z/519747.html

回到顶部