18.state、props、render函数之间的关系 - yiqunkeke/react-jianshu-shangguigu-zty GitHub Wiki

场景：todolist

当在input框中输入内容时，页面会自动把输入的内容显示出来。它执行的流程是：input框的value属性与{this.state.inputValue}做了绑定，也就是state当中的inputValue只要发生了变化，这个input框中的value值就会跟着变。同时input框监听了自身的onChange事件，一旦我们往input框中输入内容时，这个onChange就会执行。onChange中做的事情时，拿到最新的e.target.value，然后去更新state中的inputValue值。state中的inputValue发生变化，页面自动就会跟着变化。【因为render函数重新被执行】

数据与页面之间互相联动，它的底层机理是什么？

当组件的state或者props发生改变的时候，该组件的render函数就会被重新执行。

当父组件的render函数被运行时，它的子组件的render都将被重新运行一次。

之所以数据发生变化，页面就会跟着变化。是因为数据变化，render函数会被重新执行。而页面是被render函数渲染出来的。所以页面会跟着数据发生变动。 这里数据指的不仅仅是state，还包含props