reactjs - React: How much can I manipulate the DOM React has rendered?

Question

This is what I am doing: jsfiddle

The critical section is:

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();
},

This works great right now. I put the content back before the component updates on the assumption that React leaves the DOM alone between updates and won't miss it. In fact, React seems to be fine with moving content (if I remove componentWillUpdate and componentDidUpdate, the positioned element still updates!)

My question is how many of the resulting assumptions are safe (i.e., if I assume these things, will my code break in a future version of React?):

• React does not care if DOM is moved around between updates as long as you put it back in componentWillUpdate.
• 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 will update DOM it has rendered, even if you move that DOM somewhere else in the document!

The last one seems somewhat extreme and magical to me, but has some great implications if it holds.

Answer 1

I'm a React dev. I'll answer each of your questions:

---

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

True -- React doesn't look at the DOM except when updating, with the exception of event handlers:

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

I wouldn't rely on this, and I'm not sure that it's even true now.

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

I also wouldn't rely on this -- right now React sets individual properties but I could easily imagine it setting el.style.cssText if that were faster, which would blow away individual changes that you've made.

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

I don't believe this is true currently and you also shouldn't rely on this.

---

Broadly speaking, you shouldn't manipulate by hand the DOM that React has created. It's 100% kosher to create an empty <div> in React and populate it by hand; it's even okay to modify the properties of a React-rendered element as long as you don't later try to change its properties in React (causing React to perform DOM updates), but if you move an element, React may look for it and get confused when it can't find it.

Hope that helps.