React状态变更时会对比完整UI树？还是仅对比起始子树？

当你点击Child组件里的按钮触发state更新时，React只会对比从Child开始的子树，而非完整的UI树。

具体逻辑是这样的：

• React的更新是组件级触发的：只有状态或props发生变化的组件才会被标记为需要重渲染。你的例子里Parent组件没有任何状态或props变动，所以它不会重渲染，React也不会重新生成Parent对应的VDOM节点。
• 当Child的state更新后，React会重新渲染Child组件，同时递归渲染它的所有子组件（也就是GrandChild），生成Child及其子节点的新VDOM子树。随后React会把这个新子树和之前的旧子树做diff对比，最终只修改真实DOM中确实变化的部分（也就是按钮里的文本内容）。

另外要注意：虽然GrandChild会跟着重渲染，但因为它的输出完全没变化，React在diff阶段会识别到这一点，不会对GrandChild对应的DOM节点做任何修改——这也是虚拟DOM能提升性能的关键之一。

内容的提问来源于stack exchange，提问作者Arseniy