在react中,想要改变state内部状态,需要使用setState进行修改,如果只是修改state的部分属性,则不会影响其他的属性,这个只是合并并不是覆盖。
this.setState(),该方法接收两种参数:对象或函数(理解对象形式是函数形式的简写)。
- 对象:this.setState({key:value})。
- 函数:接收两个函数,第一个函数接受两个参数,第一个是当前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;
补充:
React怎么调用同步或者异步的呢?
在 React 的 setState 函数实现中,会根据一个变量 isBatchingUpdates 判断是直接更新 this.state 还是放到队列中延时更新,而 isBatchingUpdates 默认是 false,表示 setState 会同步更新 this.state;但是,有一个函数 batchedUpdates,该函数会把 isBatchingUpdates 修改为 true,而当 React 在调用事件处理函数之前就会先调用这个 batchedUpdates将isBatchingUpdates修改为true,这样由 React 控制的事件处理过程 setState 不会同步更新 this.state。
如果是同步更新,每一个setState都会调用一次render。
如果是异步更新,多次调用setState会以最后调用的为准,前面的将会作废。(也就是合并多个setState优化)