javascript - Accessoires des composants React et problèmes d'état

Question

Maintenant, j’ai une idée ici, mais je ne l’ai jamais mise en œuvre concrètement auparavant, donc je ne sais pas si c’est réalisable. Par exemple :

// 这是一个父组件
<Father />

// 这是一个子组件
<Son />

Le composant parent peut contenir plusieurs sous-composants réutilisés. Le composant parent est responsable de l'obtention des données du serveur et le composant enfant est responsable du rendu des données obtenues par le composant parent. Tout cela est normal.
Il est désormais nécessaire que les sous-composants aient une fonction de filtrage. L'exemple le plus simple est une page de liste qui affiche différentes données selon différentes méthodes de filtrage. Par exemple, « Sélectionnez toutes les données du n° 10 au n° 12 et affichez-les ». Si les opérations de données sont placées dans le composant parent, celui-ci deviendra très volumineux car le composant enfant sera référencé plusieurs fois.
Mon idée est de mettre les données sur l'état du sous-composant et de laisser le sous-composant les gérer tout seul, conduisant ainsi au re-rendu du sous-composant. Cependant, je n'ai pas réellement procédé à ce type de division fonctionnelle, j'aimerais donc demander aux experts si mon idée est réalisable ? Y aura-t-il des limites à l’avenir ?

En y regardant, il semble que certaines personnes ne comprennent pas très bien ce que je veux dire, alors je vais poster une photo

Afficher différentes données en fonction du filtrage

Answer 1

Vous pouvez utiliser le composant parent comme simple composant d'acquisition de données, puis écrire la fonction d'événement filtrée dans le composant enfant tant que le setState du composant enfant peut déclencher un nouveau rendu comme pour les données rendues, vous pouvez directement ; utilisez les données du composant parent, puis dans Faites un filtre dans le rendu et utilisez les données après le filtre pour le rendu.

Answer 2

Il est nécessaire de faire des requêtes réseau chez le père, puis d'utiliser des accessoires pour passer au fils. Il peut y avoir de nombreux nœuds enfants, et il n'est pas réaliste de faire des requêtes réseau encore et encore lorsque les données du nœud parent changent, bien sûr. les nœuds enfants peuvent être mis à jour ici, car ils constituent tous un flux de données unidirectionnel.

Si vous avez trop de données et que vous ne souhaitez pas utiliser de nœuds parents pour les organiser, vous pouvez également utiliser redux, mais c'est difficile.

Answer 3

Les sous-composants doivent être hautement réutilisables et les données entrantes déterminent le contenu rendu. Différentes méthodes de filtrage peuvent être écrites dans les composants enfants. Le composant parent transmet les données et le numéro de la méthode de filtrage, et le composant enfant est rendu en fonction de ces conditions.

Answer 4

En termes d'exigences : Son拿到父组件的props，同时本地维护一份state，然后再维护一个filter state。初始化和componentWillReceivePropsFiltrez les accessoires passés par le composant parent et définissez-les sur le composant enfant.

Pendant l'opération de filtrage, appelez à nouveau la fonction de filtrage pour traiter les accessoires passés par le composant parent : car les accessoires passés sont inchangés, mais l'état de votre composant peut entraîner une perte de données due au filtrage.

Allez plus loin : si vous devez définir des conditions de filtrage, partagez-les avec plusieurs composants ou stockez-les de manière persistante. Là, vous devez envisager de gérer les conditions de filtrage dans Redux.

Answer 5

Logiquement parlant, il devrait être placé dans un sous-composant, ce qui correspond davantage au SRP (Single Responsibility Principe

).

Answer 6

getData(filter1,filter2,filter3), le sous-composant transmet les paramètres filter1, filter2, filter3 au composant parent, le composant parent extrait les données en fonction des paramètres, puis transmet les données au sous-composant