在react中我们不直接修改state属性,换句话说,我们不会像这样写代码:
handleIncrement() {
this.state.count++;
}
这样是不会有效的,事实上,这样写state当中的count确实增加了,但是react不知道,所以视图没有被更新。
为了解决这个问题,我们需要用到继承自component对象的一个方法。我们调用setState方法,这个方法告诉react,state已经更新了,然后让react去同步视图,浏览器的dom也会根据虚拟dom进行修改。所以我们的代码应该是:
handleIncrement() {
this.setState({ count: this.state.count + 1});
}
注意:setState中的属性,不同的会和state中的属性合并,相同的属性会覆盖state中的属性。
现在我们来看一下执行setState时具体发生了什么:
当我们点击按钮,调用了handleIncrement函数,这时候就调用了setState函数,这个方法告诉react,state要变化了,react会计划调用一次render方法,也许未来某时会渲染,但是我们不知道何时,这就是异步调用,它将在未来发生。
所以在未来某一点,render方法将被调用,这个方法会返回新的react元素,这时就有了新的virtual dom,react会一一对比New Tree 和 Old Tree 修改了什么地方,然后它会找到真实的DOM,然后找到真实DOM中对应的元素,修改它让它与虚拟DOM同步。其他没有修改的地方在真实的DOM中不做改动。