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

贝贝小菜鸟

已于 2023-05-06 18:58:28 修改

阅读量345

点赞数

文章标签： reactjs

于 2021-02-05 13:07:57 首次发布

本文链接：https://blog.youkuaiyun.com/JYB150740115/article/details/113686649

版权

本文详细解析了React setState方法的使用，包括正确姿势、异步行为、批量更新机制，并介绍了在不同场景下获取最新状态的技巧。重点讲解了何时同步何时异步，以及如何避免常见误区。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>
    )
  }
}