常规DOM元素是如何可变的？

在react文档中，他们声称：

ReactElements不能与DOM元素混淆。反动元素 是DOM的轻量级、无状态、不可变的虚拟表示 元素

---

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

我想你可能读得太深了。我相信ReactJS文档中的immutable一词是这样说的：“从定义到使用它，这一点不会改变”

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

---

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

可以通过道具或状态修改React组件。状态是组件的内部状态。道具从父组件传递。DOM上的任何变化都应该通过道具或状态更改来实现。尽管有些jQuery代码可以与React一起工作，但这是非常不鼓励的。

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

虚拟DOM的全部内容是“区分”以发现其元素之间的差异（如果有的话）。如果元素可以变异，那么虚拟DOM就不需要区分，因为元素本身会变异，这就是虚拟DOM的当前状态。但是虚拟DOM想要区分，所以与其更新现有的ReactElement，不如将ReactElement的新版本传递给虚拟DOM。然后将其自身更新为最新版本（我猜有点像git），虚拟DOM然后用其自身的最新版本更新真实DOM

整个流程看起来像这样（我想）

React将您的有状态的

ReactComponent

（即，它可以被变异），将其转换为无状态的ReactElement（即，如果某个元素发生更改，它将发出一个新的ReactElement，而不是更新旧元素），用于创建虚拟DOM。如果ReactComponent中的状态发生更改，将创建相应ReactElements的新版本并发送到虚拟DOM。虚拟DOM根据旧版本运行新版本的元素，更新自身，然后更新真实DOM

传统上，使用常规DOM元素和常规DOM时，不会出现差异（因此，您没有两个版本的DOM元素，新的和旧的，您只有一个版本可以随操作而变化）。因此，您只需更新现有的DOM元素，而不是发送要差异化的DOM元素的新版本

进一步阅读：

---

经过更多的研究，我认为这与虚拟DOM有关。因此，react通常将您的ReactComponent转换为ReactElement，它针对当前虚拟DOM（diffing）运行，在虚拟DOM更新到最新版本后，虚拟DOM最终重新呈现真实DOM。因此，ReactElement将有两个版本（当前版本和新版本），因此可以发生差异。对于常规DOM元素和常规DOM，不存在差异。因此，不需要使用两个版本的DOM元素进行差异，只需更新单个DOM元素即可。你觉得怎么样？听起来不错。在进一步阅读之后，我还发现jQuery在修改React组件时表现不佳。我将用React中的类似方法模拟您尝试使用jQuery执行的任何操作。jQuery在其他任何方面都可以正常工作，但不要使用它来修改虚拟DOM组件。我怀疑这是因为jQuery正在改变实际的ReactElement，而不是有两个版本（旧版本和新版本）这个问题更多的是关于ReactElements和DOM元素，以及为什么Facebook说ReactElements是不可变的，而DOM元素是可变的——而不是关于是否应该将jQuery与React一起使用。