React：我可以操作多少DOM React渲染？

这就是我正在做的：

关键部分是：

position: function() {
  var container = $(this.getDOMNode());
  this._menu = $(this.refs.menu.getDOMNode());
  this._menu.appendTo(document.body).
      offset({
          top: container.offset().top + 
              container.outerHeight(),
          left: container.offset().left
      });
},
restore: function() {
  this._menu.appendTo(this.getDOMNode());      
},
componentWillUpdate: function() {
  this.restore();
},
componentDidUpdate: function() {
  this.position();
},
componentDidMount: function() {
  this.position();
},

现在这个效果很好。我将内容放回组件更新之前，假设React在更新之间只保留DOM，不会错过它。事实上，React似乎可以移动内容（如果我删除

componentWillUpdate

和

componentDidUpdate

，定位元素仍会更新！）

我的问题是，产生的假设中有多少是安全的（即，如果我假设这些事情，我的代码会在React的未来版本中中断吗？）

• React不关心DOM是否在更新之间移动，只要您将其放回

  componentWillUpdate

• React事件处理程序仍将处理已移动的元素
• React会将您要求的任何内联样式与元素上已有的样式合并（即使未设置它们）

---

• React将更新它所呈现的DOM，即使您将该DOM移动到文档中的其他位置

---

最后一个对我来说似乎有些极端和神奇，但如果它成立的话，会有一些重大的影响。

我是一个反应开发人员。我将回答你的每个问题：

---

只要您将DOM放回componentWillUpdate，React就不关心DOM是否在更新之间移动

True--React不查看DOM，除非在更新时，事件处理程序除外：

React事件处理程序仍将处理已移动的元素

我不相信这一点，我现在也不确定这是真的

React会将您要求的任何内联样式与元素上已有的样式合并（即使未设置它们）

我也不会依赖于此--现在React设置了单独的属性，但我可以很容易地想象它设置

el.style.cssText

，如果速度更快的话，它会将您所做的单独更改吹走

---

React将更新它所呈现的DOM，即使您将该DOM移动到文档中的其他位置

我不相信这是真的，目前你也不应该依赖这一点

---

广义地说，您不应该手动操作React创建的DOM。在React中创建一个空的

并手动填充它是100%洁净的；修改React渲染元素的属性甚至可以，只要以后不在React中尝试更改其属性（导致React执行DOM更新），但是如果移动元素，React可能会查找它，并且在找不到它时会感到困惑

---

希望这能有所帮助。

一方面，我同意Sophie的观点，即您不应根据实施细节做出决策。但是，我想说，看看React实际上是如何工作的仍然很有趣：

有些事情可能发生了一些变化，但总的来说，这就是发生的事情和发生的方式

考虑这样一个事实，React在它创建的每个DOM元素上都放置了唯一的ID（现在是数据属性）。这些ID目前基于一个非常简单的系统。这应该可以解释系统-根节点始终为“.0”

           .0
    .0.0        .0.1
.0.0.0     .0.1.0 .0.1.1

每当您提供“key”属性时，您提供的值将用于id，而不是列表中的索引，但系统保持不变

React创建的虚拟DOM还具有具有相同id的轻量级对象。这是虚拟DOM和真实DOM之间的简单映射系统

这也是为什么如果没有提供“KEY”属性，列表中的元素会被重写，因为元素的ID会在列表中间添加或删除元素时发生变化。

请记住：

只要您将DOM放回componentWillUpdate，React就不关心DOM是否在更新之间移动

对。我认为即使在更新之前不将元素放回原处，事情也有可能会正常进行，因为React使用id工作。但这将是一个非常棘手和不可靠的工作，因为元素可能被添加或删除，事情可能会破裂

React事件处理程序仍将处理已移动的元素

是的。。。在某种程度上。react中的事件处理程序的工作方式是所有事件都是合成的。这意味着在React根DOM节点上只有一个事件侦听器。在那里捕获的所有事件都与React中的事件侦听器匹配。我认为这也使用id来匹配元素。但是，React可能会对其父元素执行一些最小的检查。我认为，只要元素保持在React呈现的同一根节点内，这应该是可行的。也就是说，React将来可能会更新id系统，并对父节点进行更多检查，这可能会中断

React会将您要求的任何内联样式与元素上已有的样式合并（即使未设置它们）

这一点已经得到了回答。现在起作用，将来可能不起作用。我不认为它在短期内会改变，因为有些动画系统依赖于这个实现细节

---

React将更新它所呈现的DOM，即使您将该DOM移动到文档中的其他位置

是的，如果使用相同的react id保留相同的DOM元素，react将不知道它已在文档中移动，只会更新它，就像它在呈现它的相同位置一样。正如您已经注意到的，它需要在同一根中。这一点很重要，因为对于合成事件等，React只绑定到React根DOM节点。这种方式React可以与其他库一起使用，并且不需要访问文档根

警告：仅仅因为你能做一些事情并不意味着你应该做。一般来说，您应该只添加其他DOM节点，并在不由React管理的DOM节点上添加属性（样式：转换值对于动画来说很常见）。当你做其他事情时，要明白事情可能会发生，但通常是这样