リアプトルを理解する

Question

Facebookの反応例hereを見ると、ミックスインを使ってインターバルを設定する方法を示すこのコードが見つかりました。私はthis.intervalsで起こっていることについて混乱しています。状態がレンダリング変更データを保持し、親コンポーネントが親コンポーネントから渡されたデータを理想的に処理することを理解しています。代わりにthis.props.intervalsを使用しましたが、2つの違いは何ですか？

 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

あなたがpropsを使用する場合、それは（プロパティとして）直接の親コンポーネントだから、あなたは価値が来るということだ必要があり、100％の確実性のために知っています。

stateが表示されている場合、そのコンポーネント内で値が生まれている/作成されていることがわかります。

状態が変わると、受け取った小道具が変更された場合、下のすべての子がレンダリングされます。

あなたのMixinは通常のReactクラスではありません。これは単なるオブジェクトなので、this.intervalの場合はthisで、メソッドが実行されているオブジェクトのスコープへの参照です - TickTock。