React-Requisiten verstehen

Question

Wenn ich auf Facebooks Reagieren-Beispiel here schaue, fand ich diesen Code, der zeigt, wie man mit Mixins Intervalle einstellt. Ich bin verwirrt, was passiert mit this.intervals. Ich verstehe, dass dieser Zustand Render-verändernde Daten enthält und Props Daten verarbeiten, die im Idealfall von einer übergeordneten Komponente stammen. Ich hätte stattdessen this.props.intervals verwendet, aber was ist der Unterschied zwischen den beiden?

 var SetIntervalMixin = { 
     componentWillMount: function() { 
     this.intervals = []; 
     }, 
     setInterval: function() { 
     this.intervals.push(setInterval.apply(null, arguments)); 
     }, 
     componentWillUnmount: function() { 
     this.intervals.forEach(clearInterval); 
     } 
    }; 

    var TickTock = React.createClass({ 
     mixins: [SetIntervalMixin], // Use the mixin 
     getInitialState: function() { 
     return {seconds: 0}; 
     }, 
     componentDidMount: function() { 
     this.setInterval(this.tick, 1000); // Call a method on the mixin 
     }, 
     tick: function() { 
     this.setState({seconds: this.state.seconds + 1}); 
     }, 
     render: function() { 
     return (
      <p> 
      React has been running for {this.state.seconds} seconds. 
      </p> 
     ); 
     } 
    }); 

    ReactDOM.render(
     <TickTock />, 
     document.getElementById('example') 
    ); 

Answer 1

Wenn Sie props verwenden, wissen Sie für 100% ige Sicherheit sollte der Wert kommen werden von ihm sofort der Mutterkomponente (als Eigenschaft). Wenn Sie state sehen, wissen Sie, dass der Wert innerhalb dieser Komponente selbst erstellt/erstellt wird.

Der Schlüssel, wenn sich der Status ändert, wird jedes untergeordnete Kind rendern, wenn sich die empfangenen Requisiten ändern.

Ihr Mixin ist keine normale React-Klasse. Es ist einfach ein Objekt, also this im Fall von this.interval, ist ein Verweis auf den Umfang des Objekts, in dem die Methode ausgeführt wird - TickTock.