(React入门)setState

setState

• setState 是设置在 Component 原型上的方法,所有继承自Component的组件都可以调用该方法
  Component.prototype.setState = function(partialState, callback) {....}
• 开发中我们并不能直接通过修改state的值来让界面发生更新, 因为我们修改了state之后，希望React根据最新的State来重新渲染界面，但是这种方式的修改React并不知道数据发生了变化,我们必须通过setState来告知React数据已经发生了变化

对象式写法

setState(stateChange, [callBack])

• stateChange为状态改变对象
• callback 是可选的回调函数,它在状态更新完毕、界面也更新后(render 调用后)才被调用

this.setState({count:count+1},()=>{
  console.log(this.setState.count);
})

函数式写法

setState(updater, [callBack])

• updater 为返回stateChange 对象的函数
• updater 可以接受 state 和 props
• callback 是可选的回调函数,它在状态更新、界面也更新后(render调用后)才被调用

this.setState((state,props)=>{
  return {count:state.count+1}
},()=>{
  console.log(this.setState.count);
})

setState 更新

异步更新

state = {
  message: "Hello World"
}
handleChage() {
  this.setState({
    message: "Hello React"
  })
  console.log(this.state.message); // Hello World
}

上面代码中再使用 setState 方法后，再打印 message，发现 message 没有被改变，由此可以看到 setState 是异步操作，在执行完setState之后不能够立刻拿到最新的state的结果

获取异步的结果

1.在 setState 的第二个回调函数中获取

state = {
  message: "Hello World"
}
handleChage(){
    this.setState({
      message:"Hello React"
    }, ()=>{
      console.log(this.state.message);// Hello React
    })
    console.log(this.state.message);// Hello World
}

2.通过生命周期函数 componentDidUpdate

componentDidUpdate(prevProps, provState, snapshot) {
  console.log(this.state.message);
}

组件更新之后获取message更新后的值

同步更新

setState 方法到底是同步还是异步分两种情况
- 在组件生命周期或React合成事件中，setState是异步
- 在setTimeout或者原生dom事件中，setState是同步

获取同步的结果

1.使用setTimeout ,获取同步结果

state = {
  message: "Hello World"
}
handleChage() {
	setTimeout(()=>{
	  this.setState({
	    message: "Hello React"
	  })
	  console.log(this.state.message); // Hello React
	},0)
}

2.原生DOM事件，获取同步结果

state = {
  message: "Hello World"
}
componentDidMount() {
  const btnEl = document.getElementById("btn");
  btnEl.addEventListener('click', () => {
    this.setState({
      message: "Hello React"
    });
    console.log(this.state.message); // Hello React
  })
}

setState数据的合并

通常 state 中保存的不止一个状态,而在我们使用setState 更新状态的时候,一般只更新一个或者部分几个,而不是全部更新,那么通过 setState 更新的最新状态会把state 中所有的状态给替换掉吗?
不会,因为 setState 中源码里使用了 Object.assign({},prevState,partialState)将之前的状态和新的状态做了一个合并,这个函数将所有可枚举属性的值从一个或多个源对象复制到目标对象,如果有重复的属性,会使用后面的覆盖前面的属性值

this.state = {
  name: 'xiaoming',
  age: 19
}
// 通过setState去修改age，是不会对name产生影响的
this.setState({
  age: 18
})