zoukankan      html  css  js  c++  java
  • react中的this.setState()

    修改组件的状态可以使用的一些方法:

    1、比较常用的

    this.setState({

      message:"你好"

    })

    2、state更新是异步的时候

    因为this.props和this.state可能是异步更新的,不能依赖他们的值去计算state,

    this.setState({

      count:this.state.count+this.props.count

    })

    我们不能通过上面的代码得到想要的值,应该使用另一种setState()的形式,接受一个函数。这个函数的一个参数是前一个状态(prevState),第二个参数是应用更新时的props,

    第一种写法:

     this.setState((prevState,props)=>({count:prevState.count+props.count}))

    第二种写法:

    this.setState((prevState,props)=>{return {count:prevState.count+props.count}})

    3、执行setState()后能拿到最新的state 值吗?

    setState()函数接受两个参数,一个是一个对象,就是设置的状态,还有一个是一个回调函数,是在设置状态成功之后执行的,所以我们可以通过回掉拿到最新的state值。

    this.setState(
            { data: newData },
            () => {
                //这里打印的是最新的state值
                console.log(that.state.data);
            }
        );
    如果你希望在setState之前做些什么 可以使用前者的写法:
    this.setState((preState, props) => {
                        console.log(preState)  //在改变state中的数据之前,打印出当前的state
                        return {auto: true}
                    }, () => console.log(this.state.auto));//在更新state之后,利用回调打印出this.state.auto
     
    调用setState,组件的state并不会立即改变,setState只是把要修改的状态放入一个队列中,React会优化真正的执行时机,并且React会出于性能原因,可能会将多次setState的状态修改合并成一次状态修改。所以不要依赖当前的State,计算下个State。
    例如:
    function add() {
      this.setState({count: this.state.count + 1});
      this.setState({count: this.state.count + 1});
      this.setState({count: this.state.count + 1});
    }
    直观上来看,当上面的add函数被调用时,组件状态的count值被增加了3次,每次增加1,那后count被增加了3,但是,实际上的结果state只增加了1。
     
    原因是因为调用this.setState时,并没有立即更改this.state,所以this.setState只是在反复设置同一个值而已,上面的code等同下面这样的。
    function add() {
      const currentCount = this.state.count;
      this.setState({count: currentCount + 1});
      this.setState({count: currentCount + 1});
      this.setState({count: currentCount + 1});
    }
    currentCount就是一个快照结果,重复地给count设置同一个值,不管重复几次,得到的结果也只是增加1而已。
    想要使最后的结果是3,实现代码如下:
    add = () => {
            this.setState(prevState => ({
                count: prevState.count + 1
            }));
            this.setState(prevState => ({
                count: prevState.count + 1
            }));
            this.setState(prevState => ({
                count: prevState.count + 1
            }));
        }
    这样,每次改变count时,都是prevState.count + 1,pervState是前一个状态,当每次setState之后,前一个状态都会改变,结果就是想要的3了。如果需要立即setState 那么就需要传入一个函数来执行setState
  • 相关阅读:
    JMeter结构体系及运行原理
    maven pom配置文件样本
    django踩坑
    spring踩坑
    蓝牙连上电脑没声音
    XML 解析 & 特殊字符报错
    IDEA下maven工程的classpath
    mysql踩坑
    工作日记-9 远程接口调用注意点
    工作日记-8 ajax缓存
  • 原文地址:https://www.cnblogs.com/wyryuebanwan/p/10405594.html
Copyright © 2011-2022 走看看