Travailler avec des données dans React: Properties & State

Les composants réagis utilisent deux types de données: les propriétés et l'état. Les propriétés sont des valeurs d'entrée utilisées lors du rendu des composants et de l'initialisation des états, et une fois que les composants sont instanciés, ils doivent être considérés comme immuables. D'un autre côté, les données d'état peuvent être modifiées par le composant et sont généralement connectées au gestionnaire d'événements du composant.

Points clés

• Les composants de réaction divisent les données en propriétés immuables et états variables pour identifier plus clairement le rôle de chaque données et sa relation avec le composant. Les attributs sont plus populaires car ils simplifient le flux de données. Le statut est utile pour capturer les mises à jour des données causées par les interactions utilisateur et autres événements d'interface utilisateur. La relation entre les attributs et les états facilite le flux de données dans les composants.
L'attribut
• est la valeur d'entrée utilisée lors du rendu du composant et de l'initialisation de l'état. Une fois le composant instancié, les propriétés doivent être considérées comme immuables. Après l'instanciation des composants, les propriétés ne doivent pas être modifiées. La modification des valeurs au sein d'un composant est considérée comme l'état et doit être suivie à l'aide de l'attribut d'état au lieu de l'attribut PROPS. La modification des propriétés ne déclenche pas les mises à jour des composants, ce qui peut entraîner la synchronisation des composants et des attributs.
• L'état indique les données modifiées par les composants, généralement par interaction avec les utilisateurs. Avant que le composant puisse utiliser l'état, l'état doit être initialisé via la fonction getInitialState. Après avoir initialisé l'état, la valeur de l'état peut être utilisée lors du rendu du composant, tout comme la valeur d'attribut. Pour gérer les modifications d'état, utilisez la fonction setState pour définir une nouvelle valeur sur les propriétés d'état appropriées.

Type de données des composants

Les données du composant React sont stockées sous forme de propriété ou d'état. Les propriétés sont des valeurs d'entrée pour les composants. Ils sont utilisés lors du rendu des composants et de l'initialisation des états (discuté plus loin). Après avoir instancié un composant, les propriétés doivent être considérées comme immuables. La valeur de la propriété ne peut être définie que lorsque le composant est instancié, puis lorsque le composant est rendu dans le DOM, React compare les valeurs anciennes et nouvelles pour déterminer les mises à jour DOM nécessaires.

Les données d'état peuvent être modifiées par le composant et sont généralement connectées au gestionnaire d'événements du composant. En règle générale, la mise à jour du statut déclenche le composant React pour se renforcer. Avant l'initialisation du composant, son état doit être initialisé. La valeur d'initialisation peut inclure des valeurs constantes et des valeurs d'attribut (comme décrit ci-dessus). Par rapport à des cadres tels que Angular.js, les propriétés peuvent être considérées comme des données liées à sens unique, et les états peuvent être considérés comme des données liées bidirectionnelles. Ce n'est pas une analogie parfaite, car Angular.js utilise un objet de données de deux manières différentes, tandis que React utilise deux objets de données, chacun avec son objectif spécifique.

Propriétés

Les articles REACT précédents ont introduit la syntaxe pour spécifier et accéder aux propriétés. L'article explore l'utilisation de JavaScript et JSX ainsi que des propriétés statiques et dynamiques dans diverses démonstrations de code. Élargissant les explorations précédentes, jetons un coup d'œil à quelques détails intéressants sur l'utilisation des propriétés.

Lorsque vous ajoutez un nom de classe CSS à un composant, vous devez utiliser le nom d'attribut className au lieu de class. React doit le faire car ES2015 identifie class comme un mot-clé réservé et est utilisé pour définir des objets. Pour éviter la confusion avec ce mot-clé, le nom d'attribut className est utilisé. Si vous utilisez une propriété nommée class, React affiche un message de console utile indiquant au développeur que vous devez modifier le nom de la propriété en className.

Lors de la modification de la propriété class en className, le message d'avertissement ne sera pas affiché.

En plus des noms d'attribut tels que className, il existe d'autres aspects intéressants de l'attribut react. Par exemple, le changement des propriétés des composants est un anti-motif. Les propriétés peuvent être définies lors de l'instanciation d'un composant, mais ne doivent pas être modifiées plus tard. Cela comprend la modification des propriétés après avoir instancié le composant et après le rendu. La modification des valeurs dans un composant est considérée comme l'état et suivi à l'aide de l'attribut d'état au lieu de l'attribut PROPS.

Les composants

peuvent être remis, à quel point React effectuera son processus de coordination pour déterminer comment les nouvelles valeurs de propriété affectent le DOM. Le DOM sera ensuite mis à jour avec des modifications.

statut

L'état indique les données modifiées par les composants, généralement par interaction avec les utilisateurs. Pour faciliter ce changement, enregistrez les gestionnaires d'événements pour les éléments DOM appropriés. Lorsqu'un événement se produit, la valeur mise à jour est récupérée à partir du DOM et le composant est informé du nouveau statut. Avant que le composant puisse utiliser l'état, l'état doit être initialisé via la fonction getInitialState. En règle générale, la fonction getInitialState initialise l'état à l'aide de valeurs statiques, d'attributs passés ou d'autres datast.

Une fois l'état initialisé, la valeur de l'état peut être utilisée lors de la rendu du composant comme la valeur d'attribut. Pour capturer les interactions utilisateur avec les états mis à jour, un gestionnaire d'événements est enregistré. Afin de garder les composants réagis autonomes, les objets de fonction du gestionnaire d'événements peuvent être transmis en tant qu'attributs ou peuvent être directement définis dans la définition de l'objet composant lui-même.

L'un des avantages de la réact est l'utilisation d'événements HTML standard. Les événements HTML standard incluent des objets d'événements HTML standard. Aucun apprentissage des bibliothèques d'événements spéciaux, des gestionnaires d'événements ou des objets d'événements personnalisés n'est requis. Parce que les navigateurs modernes sont largement compatibles, les bibliothèques intermédiaires intermédiaires telles que jQuery ne sont pas nécessaires. Pour gérer les modifications d'état, utilisez la fonction setState pour définir une nouvelle valeur sur les propriétés d'état appropriées. L'appel de cette fonction fait que le composant se renvoie.

Conclusion

React Component fournit deux méthodes de traitement des données: les propriétés et l'état. La division des données en propriétés immuables et états variables peut plus clairement identifier le rôle de chaque données et sa relation avec les composants. Généralement, les propriétés sont préférées car elles simplifient le flux de données. Le statut est utile pour capturer les mises à jour des données causées par les interactions utilisateur et autres événements d'interface utilisateur. La relation entre les attributs et les états facilite le flux de données dans les composants. Les attributs peuvent être utilisés pour initialiser les états, et les valeurs des états peuvent être utilisées pour définir des propriétés lors de l'instanciation et de la rendu des composants. Capturez de nouvelles valeurs à partir des interactions utilisateur via les états, puis utilisez-les pour mettre à jour les propriétés. Les flux de données plus importants dans l'application sont effectués via un modèle appelé flux.

(Ce qui suit est la partie FAQ. En raison des limitations de l'espace, je résumerai brièvement et conserverai des informations clés. Veuillez vous référer au texte d'origine pour la réponse complète)

FAQ

• Différence entre les attributs et les états: Les propriétés sont des valeurs d'entrée immuables et les états sont des données variables à l'intérieur du composant.
• Le composant parent transmet des données au composant enfant: via la propriété des accessoires.
• Statut de mise à jour: Utilisez la méthode setState.
• Obtenez des données de l'API: généralement utilisées dans la méthode du cycle de vie componentDidMount fetch ou d'autres bibliothèques.
• Attributs de classe: Ajouter des attributs d'instance directement sur la classe.
• Utiliser des accessoires: comme paramètres de fonction dans les composants de la fonction.
• État utilisé dans les composants de la fonction: Utiliser useState crochet.
• La différence entre les composants de la classe et les composants de fonction: Les composants de la classe sont des classes ES6, des méthodes de cycle de vie et de la fonction;
• Événements de traitement: Les gestionnaires d'événements utilisant CamelCase doivent généralement être liés dans le constructeur.
• Méthode du cycle de vie: componentDidMount, componentDidUpdate, componentWillUnmount,
, etc.

Veuillez noter que cette sortie a pseudo-original le texte d'origine et conserve toutes les images et leurs formats d'origine. J'ai utilisé le remplacement du synonyme, l'ajustement de la structure des phrases et les méthodes de fusion des paragraphes, s'efforçant de faire en sorte que l'article présente des expressions différentes sans modifier la signification d'origine.

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!