react基础知识-4.如何正确使用setState

4.1setState(partialState,callback)

parrialState：object|function 用于产生与当前state合并的子集
callback:fucntion state更新之后被调用

4.2 对setState()的了解

直接修改state，不会重新渲染组件,而是应该使用setState()

//错误写法
this.state.comment = 'Hello'
//正确使用
this.setState({
    comment:'Hello'
});

state的更新可能是异步的,出于性能的考虑，React可能会把多个setState()调用合并成一个调用。例如下面的log值和显示的counter

import React,{Component} from 'react'

export default class SetStatePage extends Component{
  constructor(){
    super();
    this.state = {
      counter:0
    }
  }

  changeValue = v =>{
    this.setState({
      counter:this.state.counter+v
    });
    console.log(this.state.counter)
  }

  setCounter = () =>{
    this.changeValue(1);
  }

  render(){
    const {counter} = this.state
    return (
      <div>
        <h3>SetStatePage</h3>
        <button onClick={this.setCounter}>{counter}</button>
      </div>
    )
  }
}

如果想要获取到最新状态值有以下方式:

1.在回调中获取状态值

import React,{Component} from 'react'

export default class SetStatePage extends Component{
  constructor(){
    super();
    this.state = {
      counter:0
    }
  }

  changeValue = v =>{
  this.setState(
       {
          counter:this.state.counter+v
          },
        ()=>{
            //在回调中获取状态值
            console.log(this.state.counter)
        }
    )
  }

  setCounter = () =>{
    this.changeValue(1);)
  }

  render(){
    const {counter} = this.state
    return (
      <div>
        <h3>SetStatePage</h3>
        <button onClick={this.setCounter}>{counter}</button>
      </div>
    )
  }
}

2.使用定时器:

import React,{Component} from 'react'

export default class SetStatePage extends Component{
  constructor(){
    super();
    this.state = {
      counter:0
    }
  }

  changeValue = v =>{
    this.setState({
      counter:this.state.counter+v
    },
    console.log(this.state.counter);
  }

  setCounter = () =>{
      //使用定时器变为同步的函数
    setTimeout(()=>{
      this.changeValue(1)
    },0)
  }

  render(){
    const {counter} = this.state
    return (
      <div>
        <h3>SetStatePage</h3>
        <button onClick={this.setCounter}>{counter}</button>
      </div>
    )
  }
}

3.原生事件中修改状态

import React,{Component} from 'react'

export default class SetStatePage extends Component{
  constructor(){
    super();
    this.state = {
      counter:0
    }
  }

  changeValue = v =>{
    this.setState({
      counter:this.state.counter+v
    })
    console.log(this.state.counter);
  }

  setCounter = () =>{
      this.changeValue(1)
  }

  componentDidMount(){
    document.getElementById("test").addEventListener('click',this.setCounter,false)
  }

  render(){
    const {counter} = this.state
    return (
      <div>
        <h3>SetStatePage</h3>
        <button id="test" onClick={this.setCounter}>{counter}</button>
      </div>
    )
  }
}

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

import React,{Component} from 'react'

export default class SetStatePage extends Component{
  constructor(){
    super();
    this.state = {
      counter:0
    }
  }

  changeValue = v =>{
    this.setState({
      counter:this.state.counter+v
    },
  }

  setCounter = () =>{
    this.changeValue(1);
    this.changeValue(2);
  }

  render(){
    const {counter} = this.state
    return (
      <div>
        <h3>SetStatePage</h3>
        <button onClick={this.setCounter}>{counter}</button>
      </div>
    )
  }
}

每次点击按钮，会增加2，如果想要链式更新state

import React,{Component} from 'react'

export default class SetStatePage extends Component{
  constructor(props){
    super(props);
    this.state = {
      counter:0
    }
  }

  changeValue = v =>{
    this.setState(state=>({
      counter:state.counter +v
    }))
  }

  setCounter = () =>{
    this.changeValue(1);
    this.changeValue(2);
  }

  render(){
    const {counter} = this.state
    return (
      <div>
        <h3>SetStatePage</h3>
        <button onClick={this.setCounter}>{counter}</button>
      </div>
    )
  }
}

代码下载地址:https://gitee.com/JingYaBei/my-app.git