组件状态 setState()

纯情小肥羊关注赞赏支持

组件状态 setState()

这里指的是class组件,因为function组件无状态

类组件中的状态管

class组件使 state和setState维护状态

setState({})

setState 新状态能直接修改

 this.state.counter += 1; //错误的

setState是批量执行的，因此对同一个状态执行多次只起一次作，多个状态更新可以放在同一个setState中进 :

componentDidMount() {
  // 假如couter初始值为0，执 多次以后其结果是多少?
  this.setState({counter: this.state.counter + 1}); 
  this.setState({counter: this.state.counter + 2}); 
}

setState的执行是合并操作,所以最后一个起作用.

setState通常是异步的，因此如果要获取到最新状态值有以下三种式:

传递函数给setState 法，

  this.setState(nextState => ({  counter:
  nextState.counter + 1}));// 1
  this.setState(nextState => ({  counter:
  nextState.counter + 1}));// 2
  this.setState(nextState => ({  counter:
  nextState.counter + 1}));// 3

使用定时器:

setTimeout(() => {
  this.changeValue();
  console.log(this.state.counter);
}, 0);

原事件中修改状态

componentDidMount(){
  document.body.addEventListener('click',
  this.changeValue, false)
}
changeValue = () => {
  this.setState({counter: this.state.counter+1})
 console.log(this.state.counter)
}

总结: setState只有在合成事件和生命周期函数中是异步的，在原生事件和setTimeout中都是同步的，这里的异步其实是批量更新。

setState()如何输出1 2 3

  this.state = {
      counter: 0
    };
//最后输出多少
    this.setState(
      {
        counter: this.state.counter + 1
      },
      () => console.log(this.state.counter)// 1
    );
    this.setState(
      {
        counter: this.state.counter + 1
      },
      () => console.log(this.state.counter)// 1
    );
    this.setState(
      {
        counter: this.state.counter + 1
      },
      () => console.log(this.state.counter)// 1
    );

解析: 输出三个1, 这个是因为this.setState()的第一个参数是异步执行(批量执行),所以回调函数会在所有的值修改完毕后才执行.

    this.setState(
      nextState => ({ counter: nextState.counter + 1     }),
      () => console.log(this.state.counter)
    ); // 3

    this.setState(
      nextState => ({ counter: nextState.counter + 1 }),
      () => console.log(this.state.counter)
    ); // 3
    this.setState(
      nextState => ({ counter: nextState.counter + 1 }),
      () => console.log(this.state.counter)
    ); // 3

很不幸这里输出三个3

    this.setState(
      nextState => {
        console.log(nextState.counter); // 0
        return { counter: nextState.counter + 1 };
      },
      () => console.log(this.state.counter) // 3
    ); 

    this.setState(
      nextState => {
        console.log(nextState.counter); // 1
        return { counter: nextState.counter + 1 };
      },
      () => console.log(this.state.counter) // 3
    ); 

    this.setState(
      nextState => {
        console.log(nextState.counter); //2
        return { counter: nextState.counter + 1 };
      },
      () => console.log(this.state.counter) // 3
    );

这里输出结果是, 012333 表明修改同一个状态下无论第一个参数是对象还是函数它都是先执行的,并且是批量(异步的),最后才会执行回调函数.

组件状态 setState()

组件状态 setState()

组件状态 setState()

类组件中的状态管

总结: setState只有在合成事件和生命周期函数中是异步的，在原生事件和setTimeout中都是同步的，这里的异步其实是批量更新。

setState()如何输出1 2 3

推荐阅读更多精彩内容