基本用法
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函数后了,问题也就解决了!