当我同时设置更改状态和未更改状态时，React Virtual DOM 是如何工作的？答案

【问题标题】：How React Virtual DOM works when I set both the changed states and the unchanged states?当我同时设置更改状态和未更改状态时，React Virtual DOM 是如何工作的？
【发布时间】：2017-02-03 09:19:34
【问题描述】：

React Virtual DOM 在旧的内存 DOM 和新的内存 DOM 之间有何区别？具体来说，我只是设置了更改的状态与我设置了更改的状态和未更改的状态之间有什么区别吗？ set Object 和 Number 有区别吗？

例如：当前状态为{name: 'Eric', id: '1234567890', others: {other1: 1, other2: 2}}。 diff结果this.setState({name: 'Tiger'})和diff结果this.setState({name: 'Tiger', id: '1234567890', others: {other1: 1, other2: 2}})一样吗？

【问题讨论】：

Why is React's concept of Virtual DOM said to be more performant than dirty model checking?的可能重复
我不认为它与那个问题重复。我的核心问题是，我只是设置了更改的状态与我设置了更改的状态和未更改的状态之间是否有任何区别？
没有——react将传入的状态对象合并到已有的状态对象中。而且它不区分状态，它区分从状态生成的虚拟 dom。

标签： javascript reactjs virtual-dom

【解决方案1】：

默认情况下，无论数据是否更改，React 都会在所有对 setState 的调用上触发重新渲染（请参阅 setState docs），因此我希望它在您描述的情况下是相同的.

如果您需要特定的行为，您可以使用 shouldComponentUpdate 覆盖它的行为方式。

这对于它使用的内部差异的实际内容意味着另一回事 - 我希望它们是相同的，但依赖任何这种行为的细节感觉是个坏主意。

【讨论】：

“这对于它使用的内部差异的实际内容意味着另一回事” --- “内部差异”适用于虚拟 DOM，而不是状态对象。
@zerkms 意识到这一点，我怀疑在 setState API 之外假设 vDOM 生成的任何具体实现细节将是一个危险的游戏。
无需假设：虚拟 dom 是由您从 render() 返回的组件生成的。
它是一个稳定的、文档化的 API 吗？如果是的话，我很乐意阅读更多内容！不过，出于好奇，我仍然认为我不会在任何重要的事情上依赖它。
你是在问 react 的 render() aka main 方法是否稳定且有文档记录？ facebook.github.io/react/docs/component-api.html“setState() 将始终触发重新渲染，除非在 shouldComponentUpdate() 中实现了条件渲染逻辑”。 “我仍然认为我不会在任何重要的事情上依赖它”——它是 React 的基础，你不能“不依赖”它。