JavaScript - React コンポーネントのプロパティと状態の問題

Question

今、アイデアはありますが、これまでにやったことがないので、実現可能かどうかはわかりません。例えば：＃＃＃ リーリー

親コンポーネントには、再利用された複数のサブコンポーネントが含まれる場合があります。親コンポーネントはサーバーからデータを取得する責任を負い、子コンポーネントは親コンポーネントによって取得されたデータをレンダリングする責任を負います。これはすべて正常です。

サブコンポーネントにはフィルタリング機能が必要です。最も単純な例は、さまざまなフィルタリング方法に従ってさまざまなデータを表示するリスト ページです。例：「No.10～No.12までのデータを全て選択して表示する」データ操作を親コンポーネントに配置すると、子コンポーネントが複数回参照されるため、親コンポーネントが非常に肥大化します。
私のアイデアは、サブコンポーネントの状態にデータを置き、サブコンポーネントがそれを独自に管理できるようにすることで、サブコンポーネントの再レンダリングを引き起こすことです。ただ、私は実際にこのような機能分割をしたことがないので、私の考えが実現可能かどうか専門家に聞きたいのですが。将来的に制限がかかることはあるのでしょうか？

見てみると意味がよくわからない人もいるようなので、写真を載せておきます

フィルタリングに基づいてさまざまなデータを表示する

Answer 1

親コンポーネントを単純なデータ取得コンポーネントとして使用し、子コンポーネントの setState がレンダリングされたデータと同様に再レンダリングをトリガーできる限り、フィルターされたイベント関数を記述することができます。親コンポーネントのデータを使用し、次にレンダリングでフィルターを実行し、フィルターの後のデータを使用してレンダリングします。

Answer 2

親ノードのデータが変更されると、子ノードが多数存在する可能性があるため、props を使用してネットワーク リクエストを行う必要があります。子ノードはすべて一方向のデータ フローであるため、ここで更新できます。

データが多すぎて、それを整理するために親ノードを使用したくない場合は、redux を使用することもできますが、それは困難です。

Answer 3

サブコンポーネントは再利用性が高く、受信データによってレンダリングされるコンテンツが決まります。子コンポーネントにはさまざまなフィルタリング メソッドを記述することができ、親コンポーネントはフィルタリング メソッドのデータと番号を渡し、子コンポーネントはこれらの条件に基づいてレンダリングします。

Answer 4

要件に関して: Son拿到父组件的props，同时本地维护一份state，然后再维护一个filter state。初始化和componentWillReceiveProps親コンポーネントによって渡された props をフィルターし、それらを子コンポーネントに setState します。

フィルタリング操作中に、フィルタリング関数を再度呼び出して、親コンポーネントによって渡された props を処理します。渡された props は変更されませんが、コンポーネントの状態によってはフィルタリングによるデータ損失が発生する可能性があるためです。

さらに進む: フィルター条件を作成する必要がある場合は、フィルター条件を複数のコンポーネントで共有するか、永続的に保存します。そこでは、redux 内でフィルタリング条件を管理することを考慮する必要があります。

Answer 5

論理的に言えば、SRP (単一責任原則) に沿ったサブコンポーネントに配置する必要があります。

Answer 6

getData(filter1,filter2,filter3)、サブコンポーネントは filter1、filter2、filter3 パラメーターを親コンポーネントに渡し、親コンポーネントはパラメーターに従ってデータを取得し、そのデータをサブコンポーネントに渡します