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

这是我在做什么： http://jsfiddle.net/iamnoah/pTrrw/

关键部分是：

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移动到文档中的其他位置也是如此！

最后一个似乎有点极端，神奇的我，但有一些很大的影响，如果它持有。

我是一个React dev。我会回答你的每个问题：

React does not care if DOM is moved around between updates as long as you put it back in componentwillUpdate.

True – React不会查看DOM，除非更新时，除了事件处理程序：

React event handlers will still work on elements that have been moved.

我不会依赖这个，我不知道它现在甚至是真的。

React will merge any inline styles you ask it with styles already on the element (even if it did not set them.)

我也不会依赖这个 – 现在React设置单个属性，但我可以很容易想象它设置el.style.csstext如果这是更快，这将吹走你所做的个人更改。

React will update DOM it has rendered,even if you move that DOM somewhere else in the document!

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

一般来说，你不应该手动操作React创建的DOM。创建一个空的< div>是100％的犹太教在React和手工填充它;甚至可以修改React渲染的元素的属性，只要你以后不尝试在React中改变它的属性(使React执行DOM更新)，但是如果你移动一个元素，React可能会寻找它，当它找不到它时会感到困惑。

希望有帮助。

原文地址：https://www.jb51.cc/react/303048.html

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

相关推荐