反復ネストされたコンポーネント、任意の通信

Question

反応コンポーネントの通信に関する多くの回答がありますが、いずれも問題を解決していないようです。ここに私の問題の詳細があります。助けてください！前もって感謝します。

私は柔軟なフォームを構築しています。 UIは、コンポーネントのネストによって生成されます。

フォームデータ構造は、入れ子にされたjsonオブジェクトでもあります。

つまり、フォームには入力とセクションがあり、セクションにはいくつかの入力やセクションがあり、続けていくことができます。 セクションはUIレイアウトコンポーネントに過ぎず、データや状態については気にしません。

しかし、入力（テキスト入力、チェックボックスなどのデータを捕捉するために何でもかまいません）

私が直面してる問題は、任意の入力の検証は、他の入力の値に依存可能性があります。

すなわちinputAはformData.inputB> formData.inputA + formData.inputC

のような検証式を持っている。しかし、あなたが検証式を与えていない場合、彼らはまた、まったく依存関係を持っていませんでした。

formData全体をコンポーネントツリーに渡すと、入力を1回入力するたびにフォーム全体が再レンダリングされます。

私はレフィックスを考慮しましたが、どのようにレフィックスがそのようなケースを助けることができるかわかりません。私はまだ反応して還元する新しい相対的なので、私は間違っている可能性があります。

したがって、実行可能な解決策は何ですか？

Answer 1

フォーム要素をモジュール化する際によくある問題です。私は同じ問題を抱えています。

Reduxははるかに制御されたソリューションです。すべてのコンポーネントは、同じオブジェクトを同時にリスンして更新できます。しかし親にバインドする親からの関数として関数をアタッチすることもできます。この関数は、親の状態を取得し、一時的なストアのように状態を更新します。あなたが良い開発者なら、これは可能ですが、どちらも簡単ではありません。良い時間は、あなたの問題への様々なソリューションがあります

Answer 2

1. :)学ぶことが、リアクトと非常に効果的でなければなりません（でも大きなフォームで）レンダリングするので、一般的にはそれも、問題になることはありません。

2. Reactのパフォーマンスを調整するためのコアツールは、コンポーネントクラスのshouldComponentUpdateメソッドです。個々のフォームフィールドに渡すものを賢明にしてからshouldComponentUpdateを適切に実装すれば、必要なときにのみ更新することができます。あなたの特定の例では、すべてのオブジェクトをどこにでも渡す必要はありません。

   value、onChangeおよびisInvalidを各フィールドに渡して、ルート（完全な状態にアクセスできる）で妥当性を計算できます。あなたのフィールドのshouldComponentUpdateは、それに基づいて決定することができますprops。 （明らかにこれは単純な例ですが、原則としてそれは健全です）。

3. もちろん、Reduxも可能です。状態をReduxストアに保存し、それぞれのフィールドを必要な状態の部分にのみ接続する場合は、すべての設定が必要です。それはアーキテクチャのかなりの変化をもたらします。したがって、あなたが本当にあなたのアプリ全体のためにそれを望む場合にのみReduxを選択するべきです。