React中setState的使用(跟ref搭配使用的一些坑)

基本用法

React中不允许直接修改state，如：this.state={… }，这是错误的
而是使用setState方法

this.setState( { … } )，中括号内包含state的修改

调用了setState方法后，组件的状态就会发生变化。当组件的state或props发生变化时，render函数就会重新执行，从而重新对页面进行渲染

扩展

重点强调：setState是一个异步函数
当一个页面的多个组件执行setState函数时,React会将这多个setState合并成一个生成虚拟DOM，然后渲染生成页面的真实DOM。这样做的好处是节省了运行空间
但是这样的做法如果不了解就会陷入一个大坑，我用ref举一个例子

在一个组件中，定义一个监听函数A

A ( ) {
//调用setState方法，修改state，其中对某个DOM节点有影响
    this.setState = ( {  } )
    //假设已经获取到这个DOM节点的ref为 myRef
    B()
}
//定义B函数，用于对一个DOM节点进行操作
B(){
    ...
}

这样看似没问题，但大部分情况下会发生错误。
原因是setState函数是一个异步函数，不会马上执行，而是等待其它的setState函数，合并后再执行。
所以A函数内的执行顺序是先执行B函数，再执行setState函数,而B函数执行时页面DOM还没有发生变化，还是原先的state，若是想要新的state进行操作就会出现错误
所以我们可以使用setState函数的第二个参数

A( ) {
    this.setState ( { ... } , B() )
}

这样B函数的执行是在setState函数后了，问题也就解决了！