常规DOM元素如何可变？

Question

在反应文档中，他们声称：

  

不要将ReactElements与DOM Elements混淆。一个ReactElement   是DOM的轻量级，无状态，不可变的虚拟表示   元件。

这是否意味着可以突变常规DOM元素？如果是这样，你能举例说明如何改变DOM元素，但应用于ReactElement的相同代码不会改变它吗？

Answer 1

我认为你可能正在深入研究这一陈述。我相信不可变的这个词，ReactJS文档说“在我们定义到我们使用它的那一刻之间，这不会改变。”

我相信这来自其他框架，例如旧版本的ASP.NET，它改变了DOM对象ID，并改变了在创建时刻和DOM中使用时刻之间创建的DOM元素的其他方面。

但是，一旦jQuery将它作为常规HTML元素实际呈现到DOM上，它仍然可以被修改。 DOM的优点和缺点是，一旦将任何内容放入DOM中，该数据的有效性就不可信。在一天结束时，它只是一个文件。希望这有帮助。

Answer 2

可以通过props或state修改React组件。状态是组件的内部。道具从父组件传递。 DOM上的任何突变都应该通过道具或状态变化来实现。虽然有些jQuery代码可以与React一起使用，但我们非常气馁。

Answer 3

经过更多的研究，我认为这与虚拟DOM有关。

虚拟DOM是关于＆＃34;差异＆＃34;找到其ReactElements之间的差异（如果有的话）。如果ReactElements可以被改变，那么虚拟DOM将不需要进行diff，因为该元素只会改变自身并且这将是虚拟DOM的当前状态。但是虚拟DOM想要区分，因此，不是更新现有的ReactElement，而是将虚拟DOM传递给该ReactElement的新版本。并将自身更新为最新版本（有点像git我猜），然后虚拟DOM使用最新版本的自身更新真实的DOM。

完整的流程看起来像这样（我认为）

React接受你的有状态ReactComponent（即它可以被变异），把它变成无状态的ReactElement（即如果有什么变化，它发出一个新的ReactElement而不是更新旧的ReactElement），这是用于创建虚拟DOM。如果ReactComponent中的状态发生更改，则会创建相应ReactElements的新版本并将其发送到虚拟DOM。虚拟DOM针对旧版本运行新版本的ReactElements，更新自身，然后更新真正的DOM。

传统上，使用常规DOM元素和常规DOM，不会发生差异（因此您不会有两个版本的DOM元素，无论新旧，您只需拥有一个您正在变异的单个版本你走）。因此，您只需更新现有的DOM元素，而不是发送要扩散的新元素的DOM元素。

进一步阅读：

<强> React Elements vs React Components vs Component Backing Instances