[JavaScript知识库]React中的setState函数的由浅到深。

setState()修改数据

学过React的同学应该知道setState是一个用来修改`state`值的一个函数，想看深入了解请跳过基础部分

setState()修改数据

• 状态是可变的
• 注意不要直接修改state中的值，要通过这个函数来修改
• 作用：修改state的值，更新UI

语法

this.setState({要修改的数据})

//使用实例
 onClick1=(e)=>{
     console.log(e);
     this.setState({count:this.state.count+1})
 }

在每次调用`setState()`函数时，都会更新一次UI。如果不知道为什么，请先学习一下React的生命周期。?

以上就是`setState`的简单用法，就是这么简单。这时有的同学就会问这么简单还还由浅到深。接下来就是`setState`的原理讲解。

setState()的深入

更新数据

1. setState()是异步更新数据的

当我们知道setState()函数时异步时，我们知道，当我们执行setState()函数后，当setState()还没完成时，就会执行后面的语句。

    state = {
        a:1,
    }
    btn = e => {
        this.setState({
            a:this.state.a+1
        })
        console.log(this.state.a)       //结果：1
    }

我们看上面的代码，当我们触发btn()函数，先执行setState()函数，然后执行输出语句，你可能会疑惑，为什么输出结果会是1呢，明明之前用setState()函数，修改了值的。

这个就是因为setState()函数是异步的，当setState()函数还没执行完的时候（值还没修改），就执行输出语句了，那个时候state中的值还没有修改成功，所以输出结果是1。

1. 可以调用多次setState(),但是只会触发一次重新渲染。
   当我们在一个函数里，可以多次调用setState()函数，但是生命周期只会执行一次，这是为什么呢，因为当我们短时间内调用多次setState()函数，React会将这几次调用合并在一起执行，就不会多次执行，所以只会触发生命周期更新的第二阶段。

让我们来看下面的这个段代码

    state = {
        a:1,
    }
    btn = e => {
        this.setState({
            a:this.state.a+1            {/*a:1+1*/}
        })
        this.setState({
            a:this.state.a+1            {/*a:1+1*/}
        })
        console.log(this.state.a);      //结果：1
    }

我们观察上面的代码，我们发现第二个setState()也是a:1+1，这是因为两段代码会放在一起执行，最后执行的结果方式可以简单的看成这样：

this.setState({
    a:this.state.a+1            {/*a:1+1*/}
    a:this.state.a+1            {/*a:1+1*/}
})

现在明白了吧，还不明白让我来解释一下，当两个setState()放在一起执行时，函数获取this.state.a=1，所以两个都会执行上面的结果，所以最后a=2。

但是我们不想让setState()函数这样执行怎么办呢，我想让第二段执行的a:this.state.a+1的this.state.a=2怎么办。这时我们就要把this.setState()修改值的方式改一下了。

state = {
   a:1,
}
btn = e => {
    this.setState((state) => {
        return {
            a:state.a+1     //a:1+1
        }
    })
    this.setState((state) => {
        console.log(state)      //结果：{a:2}
        return {
            a:state.a+1     //a:2+1
        }
    })
    console.log(this.state.a);  //结果：1
}

我们给setState()传入一箭头函数，不再给他传入一个对象的形式，为什么这样就可以让第二段a：state.a=2呢。我们也可以把上面的的执行方式看成这样：

this.setState(
    (state) => {
        return {
            a:state.a+1     //a:1+1
        }
    }
    (state) => {
        console.log(state)      //结果：{a:2}
        return {
            a:state.a+1     //a:2+1
        }
    }
)

一开始先来执行第一个箭头函数，首先该函数获取到了一个参数state（现在的state.a=1），并执行返回a:1+1，这时state.a=2了。然后开始执行第二个箭头函数，该函数获取到了一个参数state(现在的state.a=2),并执行返回a:2+1。这时候state.a=3了。现在知道setState()的工作机制了吧。在工作和日常写代码都更推荐这种写法，这样我们就可以不用担心setState()执行时，不按常理出牌了。

setState()的第二参数

setState(updata[,callback])

有很多只知道setState()函数能用来更新页面的，但不知道该函数还有其他的作用，这时就需要我们请出setState()的第二个参数，注意：这还是一个回调函数，在状态更新（页面完成重新渲染）后立即执行某个操作。

    btn = e => {
        this.setState((state) => {
            console.log(state)
            return {
                a:state.a+1
            }
        }, () => {
            console.log('这个回调函数会在状态更新后立即执行')        //后执行
        })

    }
    componentDidUpdate() {
        console.log('这个钩子函数会在setState的第二个参数前执行');       //先执行
    }

我们来看上面的代码，我们知道componentDidUpdate()这个函数时在页面更新中执行的，所以先执行componentDidUpdate()函数，再执行setState()的第二个参数。这两个函数是非常相似的，在一般的项目中也是可以相互替代的。