[解決済み] ReactJS: なぜコンポーネントの初期状態をpropで渡すとアンチパターンになるのか？

質問

私は、ライブアップデートのためにSocketIOの助けを借りて小さなReactJSダッシュボードを作成しました。ダッシュボードが更新されているにもかかわらず、私はそれが正しく行われたかどうかかなり確信がないことを悩ませます。

何が一番困るかというと アンチパターンとして getInitialState 内の小道具 の投稿です。私は、サーバーからライブアップデートを取得するダッシュボードを作成し、ページをロードする以上のユーザーインタラクションを必要としません。私が読んだところでは this.state には、コンポーネントを再レンダリングすべきかどうかを決定するものを含める必要があり、また this.props .... まだわかりません。

しかし、最初に React.render(<MyComponent />, ...) を呼び出すと、propsしか渡すことができません。私の場合、すべてのデータをサーバーから取得するので、最初のpropsは単に this.state の中に入ってしまいます。だから、私のすべてのコンポーネントは、次のようなものを持っています。

getInitialState: function() {
    return {
        progress: this.props.progress,
        latest_update: this.props.latest_update,
        nearest_center: this.props.nearest_center
    }
}

私が前述のブログ記事を間違って解釈していなければ、これはアンチパターンです。しかし、私は、Componentに状態を注入する他の方法はないと思っています。 initial を前置するようにプロップをすべてラベル付けしない限り、なぜアンチパターンなのか理解できません。どちらかというと、私は それは で始まる変数は、以前よりも多くの変数を追跡する必要があるため、アンチパターンであると感じます。 initial で始まるものとそうでないもの)。

どのように解決するのですか？

免責事項 : 私がこの質問に答えたとき、私は学習しており、バニラFluxを実装しようとしていました。 バニラFluxを実装しようとしていた時で、少し懐疑的でした。その後、私は はすべてをReduxに移行しました。だから、アドバイスです。ただ、Reduxか MobXを使いましょう。この質問に対する答えは、もう必要ないでしょう。 科学は別として）。

初期状態をコンポーネントに渡すのは prop はアンチパターンです。 getInitialState メソッドが呼び出されるのは、コンポーネントが最初にレンダリングされたときだけだからです。つまり、そのコンポーネントを再レンダリングする際に 異なる として値を渡すと prop のように異なる値を指定した場合、コンポーネントは最初にレンダリングされたときの状態を保持するため、それに応じて反応することはないでしょう。これは非常にエラーになりやすいのです。

で、どうすればいいかというと、こうです。

コンポーネントをできるだけステートレスにしてください。ステートレスなコンポーネントはテストしやすくなります。 出力 をレンダリングするからです。 入力 . というような単純なものです。

でもね...私のコンポーネントのデータは変化する... ステートレスにはできない

はい、ほとんどのコンポーネントで可能です。そのためには、状態保持者となる外部コンポーネントを選択します。あなたの例で言えば Dashboard コンポーネントを作成し、その中にデータを含む Widget コンポーネントは完全にステートレスです。その Dashboard はすべてのデータの取得を担当し、複数の Widgets を通して必要なものをすべて受け取ることができます。 props .

しかし、私のウィジェットは、ユーザーがそれらを設定することができます。どうすればステートレス化できますか？

あなたの Widget に含まれる状態を処理するイベントを公開することができます。 Dashboard に含まれる状態を変化させ、すべての Widget が変更され、すべての が再レンダリングされます。イベント" を作成して Widget の中で props を持つことで、関数を受け取ることができます。

さて、ではDashboardは状態を保持していますが、どのように初期状態を渡せばいいのでしょうか？

2つのオプションがあります。最も推奨されるのは、Ajaxコールを Dashboard getInitialState メソッドで Ajax 呼び出しを行い、サーバーから初期状態を取得することです。また フラックス を使うこともできます。これはデータを管理するためのより洗練された方法です。Fluxは実装というより、パターンです。純粋なFluxを、Facebookの実装である Dispatcher のようなサードパーティの実装を使用することができます。 Redux , アルト または フラックス .

別の方法として、この初期状態を prop を Dashboard のように、これは単なる初期状態であることを明示的に宣言しています。 initialData といった具合です。しかし、このパスを選択した場合、最初のレンダリング後の状態を "remember" するため、その後、別の初期状態を渡すことはできません。

OBS

定義がおかしいぞ。

状態 は変更可能なデータ、つまりコンポーネントのライフサイクルの間に変更されるデータを格納するために使用されます。状態の変更は setState メソッドを通して行われ、コンポーネントの再レンダリングを引き起こします。

小道具 は、コンポーネントにイミュータブルなデータを渡すために使用されます。コンポーネントのライフサイクルの間、それらは変更されるべきではありません。プロップのみを使用するコンポーネントはステートレスです。

これは は、quot;初期状態をコンポーネントに渡す方法" に関連するソースです。