Reagieren: den Inhalt einer Komponente allein lassen

Question

Ist es möglich, dass React einen Teilbaum ignoriert? d.h., vergleichen oder aktualisieren Sie es nicht?

Mein Anwendungsfall migriert zu React. Es ist nicht möglich, alle unsere Lenkervorlagen gleichzeitig neu zu schreiben, aber wenn wir unsere vorhandenen Vorlagen für einige Unterkomponenten verwenden könnten, könnten wir sie langsam im Laufe der Zeit übernehmen.

Answer 1

Ja, wenn Sie innerhalb von React keinen Teilbaum ändern, wird das DOM überhaupt nicht berührt. Es ist einfach, Nicht-React-Funktionalität wie eine Lenkervorlage in React einzubinden.

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

oder Sie können ein leeres div und füllen einfach zurückgeben (oder Event-Handler, etc. befestigen) es in componentDidMount: Entweder dangerouslySetInnerHTML können

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

Im letzteren Fall React gewonnen‘ t Berühren Sie das DOM nach dem anfänglichen Rendern, da render immer dasselbe zurückgibt.

Answer 2

Schauen Sie sich dieses Modul an. Einfach und sehr effektiv. https://gist.github.com/alexeisavca/d4ff175fd16c93c8785d

Hier ist eine Coffeescript-Version davon.

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

und wickeln Sie Ihre Komponente in es:

<ReactIgnore> 
    YourComponent 
</ReactIgnore>