Reaction: leave the contents of the component separately

Question

Is it possible that React is ignoring the subtree? those. Do not compare or update it?

My use case is porting to React. Re-creating all Handlebars templates at once is not possible, but if we could use our existing templates for some subcomponents, we could gradually implement it over time.

Answer 1

Yes, if you do not change the subtree inside React, then the DOM will not touch at all. It's easy to wrap non-React functionality like the Handlebars template in React. You can use dangerouslySetInnerHTML :

 render: function() return <div dangerouslySetInnerHTML={{__html: template(values)}}>; } 

or you can just return an empty div and fill it (or attach event handlers, etc.) to it in componentDidMount:

 render: function() return <div />; }, componentDidMount: function() { var node = React.findDOMNode(this); node.innerHTML = template(values); } 

In the latter case, React will not touch the DOM after the initial rendering, because render always returns the same.

Answer 2

Take a look at this module. Simple and very effective. https://gist.github.com/alexeisavca/d4ff175fd16c93c8785d

Here is his version of coffeescript.

 module.exports = ReactIgnore = React.createClass shouldComponentUpdate: -> false render: -> React.Children.only @props.children 

And wrap your component in it:

 <ReactIgnore> YourComponent </ReactIgnore>