Concevez raisonnablement les composants React pour rendre le code plus beau ! !

Le but de React est de composant la page frontale et d'utiliser le modèle de pensée de la machine à états pour contrôler les composants. Il existe certainement une relation entre les composants. Grâce à une conception raisonnable des composants et à la définition de limites appropriées pour chaque composant, nous pouvons réduire efficacement l'impact sur les autres composants lorsque nous reconstruisons la page. En même temps, cela peut également rendre notre code plus beau.

1. Couplage élevé et faible cohésion.

Couplage élevé : placez les parties fonctionnelles étroitement liées dans un composant conteneur et exposez index.js au monde extérieur. La structure des répertoires est la suivante :

├── components
│   └── App
└── index.js

Faible cohésion : lorsque ce composant est. directement sur la page d'appel Une fois supprimé, aucun impact ne sera déclenché ; les rendus répétés inutiles sont réduits ;

2. Composants d'affichage et composants de conteneur

展示组件	容器组件
关注事物的展示	关注事物如何工作
可能包含展示和容器组件，并且一般会有DOM标签和css样式	可能包含展示和容器组件，并且不会有DOM标签和css样式
常常允许通过this.props.children传递	提供数据和行为给容器组件或者展示组件
对第三方没有任何依赖，比如store 或者 flux action	调用flux action 并且提供他们的回调给展示组件
不要指定数据如何加载和变化	作为数据源，通常采用较高阶的组件，而不是自己写，比如React Redux的connect(), Relay的createContainer(), Flux Utils的Container.create()
很少有自己的状态，即使有，也是自己的UI状态

L'accent ici est this.props.children. Grâce à this.props.children, nous pouvons facilement rendre nos composants à faible cohésion. Dans le développement réel, nous rencontrons souvent des composants d'affichage écrits avec des composants purs et des composants conteneurs qui continuent à traiter les données. Ici, utilisez simplement this.props.children pour couvrir ces composants de conteneur. Ensuite, le composant conteneur piégé peut continuer à créer un nouveau dossier selon les règles ci-dessus et exposer index.js.
Le plus grand avantage de cette façon d'écrire est que vous pouvez trouver rapidement où se trouve le composant que vous avez écrit, ce qu'il fait et ce qu'il affecte.

3. Flux de données unidirectionnel de haut en bas

Lorsque nous devons concevoir pour répondre aux conditions ci-dessus, utiliser un flux de données unidirectionnel de haut en bas nous permettra d'utiliser quelque chose like Lorsque vous utilisez un outil de gestion d'état comme redux, la portée de l'influence est plus contrôlable et ShouldComponentUpdate est utilisé pour réduire le rendu inutile. (Mais c'est vraiment gênant d'écrire de cette façon, mais React utilise la nouvelle fonction de cycle de vie getDerivedStateFromProps à partir de la v16.3 pour forcer les développeurs à optimiser cette étape)

4. Composants contrôlés et composants non contrôlés

Il existe de nombreux composants Web qui peuvent être modifiés par l'interaction de l'utilisateur, tels que : , . Ces composants peuvent modifier la valeur du composant en entrant du contenu ou en définissant l'attribut value de l'élément. Cependant, comme React est lié par un flux de données unidirectionnel, ces composants peuvent devenir incontrôlables :
1. Un composant qui maintient la valeur dans son propre état ne peut pas être modifié de l'extérieur
2. .Un composant qui définit une valeur via des accessoires ne peut être mis à jour que via un contrôle externe.

Composant contrôlé :

Un contrôlé doit avoir un attribut de valeur. Le rendu d'un composant contrôlé affiche la valeur de l'attribut value.
Un composant contrôlé ne maintient pas son propre état interne et le rendu du composant dépend uniquement des accessoires. C'est-à-dire que si nous avons un composant qui définit la valeur via des accessoires, quelle que soit la façon dont vous saisissez, il affichera uniquement props.value. En d'autres termes, votre composant est en lecture seule.
Lorsque vous traitez un composant contrôlé, vous devez toujours transmettre un attribut de valeur et enregistrer une fonction de rappel onChange pour rendre le composant variable.

Composant non contrôlé :

Un sans attribut de valeur est un composant non contrôlé. Grâce aux éléments rendus, toute entrée de l'utilisateur est immédiatement reflétée. L' non contrôlée ne peut notifier la couche supérieure que des modifications saisies par l'utilisateur via la fonction OnChange.
#### Composant hybride :
Conservez les valeurs de props.value et state.value en même temps. props.value a une priorité d'affichage plus élevée et state.value représente la valeur réelle du composant.

5. Utiliser des composants d'ordre supérieur (HOC)

Définition simple : une fonction qui reçoit un composant de réaction en tant que paramètre et renvoie un autre composant.
Que peut-on faire : réutilisation du code, modularisation du code, ajout, suppression et modification d'accessoires
Cas d'utilisation : par exemple, si l'entreprise souhaite soudainement enterrer différents points de clic dans le code front-end, elle peut utiliser une couche de package hoc sans changer les parties d'origine. Le code a été raisonnablement modifié en même temps.

6. Processus standard d'ajout, de suppression, de modification et de vérification

Ajouter : remplir les données, vérifier les données, insérer des données et réinterroger la liste de données.
Supprimer : confirmez la suppression et interrogez à nouveau la liste de données.
Vérifier : interroger la liste des données, afficher en pagination
Modifier : remplir les données, vérifier les données, modifier les données, réinterroger la liste des données

En fait, ce n'est pas nécessaire de composer prématurément des composants lors de la conception de composants. Nous pouvons d'abord écrire rapidement une version, puis la diviser en fonction de la conception réelle pour faire face aux changements rapides des exigences dès les premières étapes du projet. Ensuite, nous modifions notre projet petit à petit en fonction du modèle de conception. Tant que le modèle de conception est raisonnablement divisé, c'est en fait une chose très fluide et naturelle.

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!