子コンポーネントの状態を小道具で初期化するのは正しいですか？

Question

親コンポーネントから子コンポーネントの状態を初期化する必要があります。だから私は次の方法でそれを行う：

var Timer = React.createClass({ 
    getInitialState: function() { 
      return {timer: this.props.timer}; 
    }, 
    render() { 
      return <div>{this.state.timer}</div> 
    } 
}); 

var App = React.createClass({ 
    getInitialState: function() { 
      return {timer: 1000}; 
    }, 
    render() { 
      return <Timer timer={this.state.timer}> 
    } 
}); 

このようにタイマーコンポーネントの状態を初期化するのは正しいですか？

Answer 1

そういうのがいいと思います。

あなたのケースでは、コンポーネント内でtimerという値を変更するとします（ユーザーの操作によっては）。 stateの値はinstance variableであるため、その値はコンポーネントのステータスを反映して変更される可能性があります。 state.timerの値を変更しても、timerの値は変更されません。

あなたがコンポーネント内this.state.timerの値を変更しない場合、あなたはそれが好きで使用することができます：

render() { 
     return <div>{this.props.timer}</div> 
} 

Answer 2

注： これは本当にリアクト固有の先端ではありません、そのようなアンチパターンはしばしば一般的なコードで発生するので、この場合、Reactは単にそれらをより明確に指摘します。 getInitialState状態を生成するための小道具を使って

は、多くの場合、実際のデータがある、すなわち"source of truth"のduplication、につながります。これは、コンポーネントが最初に作成されたときにのみgetInitialStateが呼び出されるためです。

可能であれば、オンザフライで値を計算して、あとで同期が外れてメンテナンスに問題が発生しないようにしてください。