ReactJsの機能的スタイルがカプセル化を破る

Question

私はそれを正しくすることができません。ここでは、私は2つのウィジェット、TabBarとTabNavigatorを作った。 tabNavには、インデックスcurrentSelectedTabの状態が含まれています。だから、TabBarがユーザのクリックを受け取ると、それは親（TabNav）に何か（コールバック付きで）するように通知します。親は、親愛なるタブバーを選択して、新しいタブを選択します：currentSelectedTab と同時に、 tabNavは、タブの適切なコンテンツを表示します。

これまでのところ良いです。しかし、今私はアプリケーションがTabNavを特定のタブに設定できるようにしたい。私が小道具としてそれを紹介するとすぐに、tabnavでcurrentSelectedTabのカプセル化が解除されます。アプリケーション内で定義する必要があります。そして、これは吸う。

OOPパースペクティブでは、TabNavウィジェットにsetCurrentTabがありますが、FPでは、特にReactではこれが禁止されています。ウィジェットの唯一のエントリードアは小道具です。 （Refsは悪いですよね？）

これは、TabBarがユーザークリックを受け取ると、TabNavでコールバックを呼び出し、TabNavはアプリケーションで定義された上位コールバックを呼び出す必要があることを意味します。このコールバックによってアプリケーションの状態が変更され、currentSelectedTabが設定されます。そのため、これはPropsを介してTabNavに渡されます。

currentSelectedTabをTabNavの外側で定義する必要があるという事実は単に恐ろしいことです。そうは思わない？それは、コンポーネントのカプセル化を壊すことに私に見えます。どのようにそれを正しく行うには？フラックス？同じこと：currentSelectedTabをグローバルな状態で定義する必要はありません。

基本的には、すべてが機能していると、上部に巨大な状態があり、いくつかのウィジェットに属するものが含まれているようです。カプセル化は深く壊れている。

誰かが私にここで何が間違っているのか説明できますか？

Answer 1

私はそれに対処する正しい方法を見つけました。 アプリの責任は、単に初期値を提供することです。 initialSelectedTabIndex TabNavigatorは、アプリケーションではなく、現在のインデックスの所有者で、適切なことを行うためにTabBarでコールバックを使用します。selectedTabIndexなどの内部状態を更新します。 このようにしてカプセル化が壊れることはありません。アプリケーションは、新しいインデックスを再送するためにコールバックを使用する必要はありません、それはそれを行うTabNavになります。

componentWillReceivePropsがTabNavで発生すると、何もしません。これは初期化されていないため、内部状態を小道具initialSelectedTabIndexで上書きしたくないためです。

Answer 2

選択されたタブを命令型言語に設定するパブリックメソッドを持つことは、同じことを反応させることを意味するpropを持つこととあまり変わりません。

コンポーネント外の一部のプロパティを制御する必要があると感じると、当然、それは公的契約の一部になります。反応においては、共通のOOP言語（パブリッククラスのメソッド/フィールド）で、これが大部分、好ましくは小道具である。

react propが内部状態を直接表現する必要はありませんが、その状態の初期値として小道具を使用することは完全にOKです。小道具が変更されているときにカプセル化された内部状態を変更できるようにする特別なフックcomponentWillReceivePropsがあります。

これは少し物事を明確にすることを望みます。