Quelle est la différence entre state et props dans React?
Je regardais un cours Pluralsight sur React et l'instructeur a déclaré que les accessoires ne devraient pas être changés. Je suis en train de lire un article (uberVU/react-guide) sur les accessoires contre l'état et il dit
Les modifications d'accessoires et d'état déclenchent une mise à jour du rendu.
Plus loin dans l'article, il est écrit:
Les accessoires (abréviation de propriétés) sont la configuration d'un composant, ses options si vous le pouvez. Ils sont reçus d'en haut et immuables.
- Donc, les accessoires peuvent changer mais ils devraient être immuables?
- Quand devriez-vous utiliser des accessoires et quand devriez-vous utiliser l'état?
- Si vous avez des données dont un composant React a besoin, devez-vous les transmettre ou les configurer dans le composant React via
getInitialState?
Les accessoires et l'état sont liés. L'état d'un composant deviendra souvent le support d'un composant enfant. Les accessoires sont transmis à l'enfant dans la méthode de rendu du parent en tant que second argument de React.createElement() ou, si vous utilisez JSX, les attributs de balise plus familiers.
<MyChild name={this.state.childsName} />
La valeur d'état childsName du parent devient le this.props.name de l'enfant. Du point de vue de l'enfant, l'appellation prop est immuable. S'il doit être changé, le parent devrait simplement changer son état interne:
this.setState({ childsName: 'New name' });
et React le propagera à l'enfant pour vous. Une question qui se pose naturellement est la suivante: que se passera-t-il si l’enfant doit changer son nom d’hôte? Cela se fait généralement par le biais d'événements enfants et de rappels parent. L'enfant peut exposer un événement appelé, par exemple, onNameChanged. Le parent s'abonnerait ensuite à l'événement en transmettant un gestionnaire de rappel.
<MyChild name={this.state.childsName} onNameChanged={this.handleName} />
L'enfant passe le nouveau nom demandé en tant qu'argument au rappel d'événement en appelant, par exemple, this.props.onNameChanged('New name'), et le parent utilise le nom dans le gestionnaire d'événements pour mettre à jour son état.
handleName: function(newName) {
this.setState({ childsName: newName });
}
Pour la communication parent-enfant, passez simplement les accessoires.
Utilisez state pour stocker les données dont votre page actuelle a besoin dans votre vue contrôleur.
Utilisez props pour transmettre les gestionnaires de données et d’événements à vos composants enfants.
Ces listes devraient vous aider à utiliser les données de vos composants.
Props
- sont immuables
- ce qui permet à React de vérifier rapidement les références
- sont utilisés pour transmettre des données de votre contrôleur de vue
- votre composant de premier niveau
- avoir de meilleures performances
- utilisez-le pour transmettre des données aux composants enfants
Etat
- devrait être géré dans votre contrôleur de vue
- votre composant de premier niveau
- est mutable
- a pire performance
- ne doit pas être accessible à partir de composants enfants
- transmettez-le avec des accessoires à la place
Pour la communication entre deux composants qui n’ont pas de relation parent-enfant, vous pouvez configurer votre propre événement global système. Abonnez-vous aux événements dans composantDidMount (), désabonnez-vous dans composantWillUnmount () et appelez setState () lorsque vous recevez un événement . Le modèle de flux est l’un des moyens possibles d’arranger cela ..___. - https://facebook.github.io/react/tips/communicate-between-components.html
Quels composants doivent avoir un état?
La plupart de vos composants doivent simplement extraire des données des accessoires et des fichiers le rendre. Cependant, vous devez parfois répondre aux commentaires de l'utilisateur, un demande du serveur ou le passage du temps. Pour cela, vous utilisez l'état.
Essayez de garder autant de composants que possible stateless. En faisant Ceci isolera l’état à son emplacement le plus logique et minimisera redondance, facilitant le raisonnement de votre application.
Un modèle courant consiste à créer plusieurs composants stateless qui ne font que restituer des données et avoir un composant stateful au-dessus d'eux dans la hiérarchie qui passe son état à ses enfants via des accessoires. Le stateful Le composant encapsule toute la logique d’interaction, alors que le Les composants sans état prennent en charge le rendu des données de manière déclarative . - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state
Qu'est-ce qui devrait aller dans l'état?
State doit contenir des données que les gestionnaires d'événements d'un composant peuvent modifier pour déclencher une mise à jour de l'interface utilisateur. Dans les applications réelles, ces données ont tendance à être très petites et JSON-sérialisable. Lorsque vous construisez un composant stateful, pensez à la représentation minimale possible de son état, et ne stocke que ceux-ci propriétés dans cet état. A l'intérieur de render (), calculez simplement les autres informations dont vous avez besoin en fonction de cet état. Vous trouverez cette pensée sur et écrire des applications de cette manière a tendance à conduire au plus application correcte, depuis l’ajout de valeurs redondantes ou calculées à state signifie que vous devez explicitement les synchroniser au lieu de Comptez sur React pour les calculer pour vous. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state
Les accessoires contre le résumé de l'état que j'aime le mieux se trouvent ici: https://github.com/uberVU/react-guide/blob/master/props-vs-state.md Un bon conseil pour ces gars. Vous trouverez ci-dessous une version modifiée de cette page:
accessoires vs état
tl; dr Si un composant doit modifier un de ses attributs à un moment donné, cet attribut doit faire partie de son état, sinon il ne devrait s'agir que d'un accessoire pour ce composant.
les accessoires
Les accessoires (abréviation de propriétés) correspondent à la configuration d'un composant. Ils sont reçus d'en haut et immuables en ce qui concerne la composante qui les reçoit. Un composant ne peut pas modifier ses accessoires, mais il est responsable de l'assemblage des accessoires de ses composants enfants. Les accessoires ne doivent pas être uniquement des données - les fonctions de rappel peuvent être transmises comme accessoires.
etat
L'état est une structure de données qui commence par une valeur par défaut lors du montage d'un composant. Il peut être muté dans le temps, principalement à la suite d'événements utilisateur.
Un composant gère son propre état en interne. En plus d'établir un état initial, il n'a pas d'affaire à jouer avec l'état de ses enfants. Vous pouvez conceptualiser l’état en tant que propriété privée de ce composant.
Changer les accessoires et l'état
l'état des accessoires Peut-on obtenir la valeur initiale du composant parent? Oui oui Peut être changé par composant parent? Oui Non Peut définir les valeurs par défaut dans Component? * Oui Oui Peut changer à l'intérieur du composant? Non Oui Peut-on définir la valeur initiale pour les composants enfants? Oui oui Peut changer dans les composants enfants? Oui Non
- Notez que les propriétés et les valeurs initiales d'état reçues des parents remplacent les valeurs par défaut définies dans un composant.
Ce composant doit-il avoir un état?
L'état est facultatif. Etant donné que l'état augmente la complexité et réduit la prévisibilité, un composant sans état est préférable. Même s'il est clair que vous ne pouvez pas vous passer d'un état dans une application interactive, évitez d'avoir trop de composants avec état.
Types de composants
Composant sans état Seulement les accessoires, pas d'état. Il n'y a pas grand chose à faire à part la fonction render (). Leur logique tourne autour des accessoires qu'ils reçoivent. Cela les rend très faciles à suivre et à tester.
Composant avec état Les accessoires et l'état. Celles-ci sont utilisées lorsque votre composant doit conserver un état. C'est un bon endroit pour la communication client-serveur (XHR, sockets Web, etc.), le traitement des données et la réponse aux événements des utilisateurs. Ce type de logistique doit être encapsulé dans un nombre modéré de composants avec état, tandis que toute la logique de visualisation et de formatage doit passer en aval dans de nombreux composants sans état.
sources
La plupart des réponses déroutent les débutants plutôt en clarifiant. C'est très difficile de raconter et comprendre. Vous pouvez le comprendre en le rapportant à Plain JS.
En des mots simples,
State fait référence à l'état local du composant auquel il est impossible d'accéder et de le modifier en dehors du composant et qui ne peut être utilisé et modifié qu'à l'intérieur du composant.
Plain JS
const DummyFunction = () => {
let name = 'Manoj';
console.log(`Hey ${name}`)
}
Équivalent de JS
class DummyComponent extends React.Component {
state = {
name: 'Manoj'
}
render() {
return <div>Hello {this.state.name}</div>;
}
Props, d’autre part, rendent les composants réutilisables en leur donnant la possibilité de recevoir des données du composant parent sous la forme d’accessoires.
JS Plain
const DummyFunction = (name) => {
console.log(`Hey ${name}`)
}
DummyFunction('Manoj');
DummyFunction('Ajay');
Réagir JS
class DummyComponent extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
// when using the component
<DummyComponent name="Manoj" />
<DummyComponent name="Ajay" />
Crédits: https://medium.com/@manojsinghnegi
Article Linke: https://medium.com/@manojsinghnegi/react-state-vs-props-explained-51beebd73b21
props (abréviation de “propriétés”) et state sont tous deux en JavaScript simple objets. Tandis que les deux contiennent des informations qui influencent la sortie de rendre, ils sont différents d'une manière importante: les accessoires sont passés à le composant (similaire aux paramètres de fonction) alors que state est gérées au sein du composant (similaires aux variables déclarées dans une fonction ).
Donc, simplement state est limité à votre composant actuel mais props peut être transmis à tout composant de votre choix ... Vous pouvez transmettre le state du composant actuel en tant que prop à autres composants ...
De plus, dans React, nous avons des composants sans état qui ont uniquement des accessoires et non pas un état interne ...
L'exemple ci-dessous montre comment ils fonctionnent dans votre application:
Parent (composant d'état complet):
class SuperClock extends React.Component {
constructor(props) {
super(props);
this.state = {name: "Alireza", date: new Date().toLocaleTimeString()};
}
render() {
return (
<div>
<Clock name={this.state.name} date={this.state.date} />
</div>
);
}
}
Enfant (composant sans état):
const Clock = ({name}, {date}) => (
<div>
<h1>{`Hi ${name}`}.</h1>
<h2>{`It is ${date}`}.</h2>
</div>
);
La principale différence entre les accessoires et l'état est que cet état est interne et contrôlé par le composant lui-même, tandis que les accessoires sont externes et contrôlés par le rendu du composant.
function A(props) {
return <h1>{props.message}</h1>
}
render(<A message=”hello” />,document.getElementById(“root”));
class A extends React.Component{
constructor(props) {
super(props)
this.state={data:"Sample Data"}
}
render() {
return(<h2>Class State data: {this.state.data}</h2>)
}
}
render(<A />, document.getElementById("root"));
- Etat peut être changé (Mutable)
- Alors que les accessoires ne peuvent pas (immuables)
Les deux state et props in rea sont utilisés pour contrôler les données d'un composant. Généralement, les accessoires sont définis par le parent, puis transmis aux composants enfants et sont fixes dans tout le composant. Pour les données qui vont changer, nous devons utiliser state. Et les accessoires sont immuables tandis que les états sont mutables , si vous voulez changer les accessoires, vous pouvez modifier le composant parent, puis le transmettre aux composants enfants.
Les accessoires sont simplement des raccourcis pour les propriétés. Les accessoires sont la façon dont les composants se parlent. Si vous connaissez bien React, sachez que les accessoires descendent du composant parent.
Il existe également le cas où vous pouvez avoir des accessoires par défaut pour que ceux-ci soient définis même si un composant parent ne les transmet pas.
C'est pourquoi les gens se réfèrent à React comme ayant un flux de données unidirectionnel. Cela me prend un peu la tête et je vais probablement bloguer à ce sujet plus tard, mais pour l’instant, rappelez-vous: les données circulent de parent à enfant. Les accessoires sont immuables (le mot chic ne change pas)
Nous sommes donc heureux. Les composants reçoivent des données du parent. Tous triés, non?
Pas tout à fait. Que se passe-t-il lorsqu'un composant reçoit des données de quelqu'un d'autre que le parent? Que se passe-t-il si l'utilisateur entre des données directement dans le composant?
Eh bien, c'est pourquoi nous avons l'état.
ETAT
Les accessoires ne devraient pas changer, alors l'état passe à la vitesse supérieure. Normalement, les composants n’ont pas d’état et sont donc appelés stateless. Un composant utilisant l'état est appelé stateful. N'hésitez pas à laisser tomber cette petite friandise lors de fêtes et à regarder les gens Edge s'éloigner de vous.
Donc, l'état est utilisé pour qu'un composant puisse garder une trace des informations entre tous les rendus qu'il fait. Lorsque vous définissezState, il met à jour l'objet state, puis rend à nouveau le composant. C’est super cool parce que cela signifie que React s’occupe du dur travail et qu’il est extrêmement rapide.
Comme petit exemple d'état, voici un extrait d'une barre de recherche (consultez ce cours si vous souhaitez en savoir plus sur React)
Class SearchBar extends Component {
constructor(props) {
super(props);
this.state = { term: '' };
}
render() {
return (
<div className="search-bar">
<input
value={this.state.term}
onChange={event => this.onInputChange(event.target.value)} />
</div>
);
}
onInputChange(term) {
this.setState({term});
this.props.onSearchTermChange(term);
}
}
RÉSUMÉ
Les accessoires et l'État font des choses similaires mais sont utilisés de différentes manières. La majorité de vos composants seront probablement sans état.
Les accessoires sont utilisés pour transmettre des données du parent à l'enfant ou par le composant lui-même. Ils sont immuables et ne seront donc pas modifiés.
State est utilisé pour les données mutables ou les données qui vont changer. Ceci est particulièrement utile pour la saisie de l'utilisateur. Pensez barres de recherche par exemple. L'utilisateur saisira des données et cela mettra à jour ce qu'il voit.
En bref.
les valeurs d'accessoires ne peuvent pas être changées [immuable]
les valeurs d'état peuvent être modifiées à l'aide de la méthode setState [mutable]
Props: Props n'est rien d'autre que la propriété de composant et react composant n'est rien d'autre qu'une fonction javascript.
class Welcome extends React.Component {
render() {
return <h1>Hello {this.props.name}</h1>;
}
}
élément const =;
ici <Welcome name="Sara" /> en passant un objet {name: 'Sara'} en tant qu'accessoires du composant Welcome. Pour transmettre des données d'un composant parent à un composant enfant, nous utilisons props . Props est immuable. Pendant le cycle de vie d’un composant, les accessoires ne doivent pas changer (considérez-les immuables).
State: l'état n'est accessible que dans Component. Pour garder une trace des données dans le composant, nous utilisons l'état. nous pouvons changer d'état par setState. Si nous devons transmettre l'état à l'enfant, nous devons le passer comme accessoire.
class Button extends React.Component {
constructor() {
super();
this.state = {
count: 0,
};
}
updateCount() {
this.setState((prevState, props) => {
return { count: prevState.count + 1 }
});
}
render() {
return (<button
onClick={() => this.updateCount()}
>
Clicked {this.state.count} times
</button>);
}
}
Etat:
- les états sont mutables.
- les états associés aux composants individuels ne peuvent pas être utilisés par d'autres composants.
- les états sont initialisés lors du montage du composant.
- les états sont utilisés pour rendre les modifications dynamiques au sein du composant.
les accessoires:
- les accessoires sont immuables.
- vous pouvez passer des accessoires entre les composants.
- les accessoires sont principalement utilisés pour communiquer entre les composants.Vous pouvez passer directement du parent à l'enfant. Pour passer d'un enfant à un parent, vous devez utiliser le concept d'élévation des états.
class Parent extends React.Component{
render()
{
return(
<div>
<Child name = {"ron"}/>
</div>
);
}
}
class Child extends React.Component{
{
render(){
return(
<div>
{this.props.name}
</div>
);
}
}State est la manière dont réagit traite des informations détenues par votre composant.
Supposons que vous ayez un composant qui doit extraire des données du serveur. Vous voudrez généralement informer l'utilisateur si la demande est en cours de traitement, si elle a échoué, etc. Il s'agit d'une information qui est simplement pertinente pour ce composant spécifique. C'est ici que l'état entre en jeu.
Habituellement, la meilleure façon de définir un état est la suivante:
class MyComponent extends React.Component {
constructor() {
super();
this.state = { key1: value1, key2: value2 }
}
}
mais dans les dernières mises en œuvre de react native, vous pouvez simplement faire:
class MyComponent extends React.Component {
state = { key1: value1, key2: value2 }
}
Ces deux exemples s'exécutent exactement de la même manière, c'est simplement une amélioration de la syntaxe.
Alors, qu'est-ce qui est différent de simplement utiliser des attributs d'objet comme nous le faisons toujours dans la programmation OO? Généralement, les informations conservées dans votre état ne sont pas statiques, elles changeront avec le temps et votre vue devra être mise à jour pour refléter ces changements. State offre cette fonctionnalité de manière simple.
Etat IS VEUT ÊTRE INMUTABLE! et je ne peux pas faire assez de stress sur cela. Que cela veut-il dire? Cela signifie que vous ne devriez JAMAIS faire quelque chose comme ça.
state.key2 = newValue;
La bonne façon de le faire est:
this.setState({ key2: newValue });
À l'aide de this.setState, votre composant exécute le cycle de mise à jour et si une partie de l'état change, votre méthode de rendu de composant sera appelée à nouveau pour refléter ces modifications.
Consultez la documentation de réaction pour une explication encore plus détaillée: https://facebook.github.io/react/docs/state-and-lifecycle.html
Vous avez des données qui sont entrées par les utilisateurs quelque part dans l'application.
le composant dans lequel les données sont entrées doit avoir ces données dans son état state car il doit être manipulé et modifié pendant la saisie des données
n'importe où ailleurs dans l'application, les données doivent être transmises en tant que props à tous les autres composants
Alors oui, les accessoires changent, mais ils sont changés à la "source" et vont ensuite tout simplement couler à partir de là. Les accessoires sont donc immuables dans le contexte du composant qui les reçoit .
Par exemple. un écran de données de référence dans lequel les utilisateurs modifient une liste de fournisseurs gérerait cet état, ce qui aurait ensuite une action qui permettrait de sauvegarder les données mises à jour dans ReferenceDataState, qui pourrait être un niveau inférieur à AppState, puis cette liste de fournisseurs serait transmise comme accessoire à tous les composants nécessaires pour l'utiliser.
Certaines différences entre "état" et "accessoires" réagissent.
React contrôle et rend le DOM basé sur l'état. Il existe deux types d'états de composant: props est l'état qui effectue le transfert entre les composants et l'état est l'état interne des composants. Props est utilisé pour le transfert de données du composant parent au composant enfant. Les composants ont également leur propre état inside: state qui ne peut être modifié qu'à l'intérieur du composant.
Généralement, l'état de certains composants peut être les accessoires du composant enfant, les accessoires étant transmis aux enfants, ce qui est indiqué dans la méthode de rendu du composant parent.
Dans React, les états stockent les données ainsi que les accessoires. Sa différence avec ce dernier est que les données stockées peuvent être modifiées par différentes modifications. Ce ne sont rien de plus que des objets écrits en JavaScript plat, ils peuvent donc contenir des données ou des codes, représentent les informations que vous souhaitez modéliser. Si vous avez besoin de plus de détails, il est recommandé de consulter ces publications Utilisation de l'Etat en réaction et Utilisation d'accessoires dans React
state - C'est une propriété spéciale mutable qui contient des données de composant. il a la valeur par défaut lorsque le composant est monté.
props - C'est une propriété spéciale, immuable par nature, utilisée en cas de transmission par valeur de parent à enfant. les accessoires ne sont qu'un canal de communication entre les composants, passant toujours de haut (parent) à bout (enfant).
Voici des exemples complets de combiner l’état et les accessoires: -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>state&props example</title>
<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
var TodoList = React.createClass({
render(){
return <div className='tacos-list'>
{
this.props.list.map( ( todo, index ) => {
return <p key={ `taco-${ index }` }>{ todo }</p>;
})}
</div>;
}
});
var Todo = React.createClass({
getInitialState(){
return {
list : [ 'Banana', 'Apple', 'Beans' ]
}
},
handleReverse(){
this.setState({list : this.state.list.reverse()});
},
render(){
return <div className='parent-component'>
<h3 onClick={this.handleReverse}>List of todo:</h3>
<TodoList list={ this.state.list } />
</div>;
}
});
ReactDOM.render(
<Todo/>,
document.getElementById('root')
);
</script>
</body>
</html>
Fondamentalement, les accessoires et l'état sont deux moyens par lesquels le composant peut savoir quoi et comment rendre. La partie de l'état de l'application qui appartient à l'état et celle qui, pour un magasin de niveau supérieur, est davantage liée à la conception de votre application qu'à la façon dont React fonctionne. Le moyen le plus simple de décider, IMO, est de se demander si ces données sont utiles pour une application dans son ensemble ou si elles sont des informations locales. En outre, il est important de ne pas dupliquer les états. Ainsi, si certaines données peuvent être calculées à partir d'accessoires, elles doivent être calculées à partir d'accessoires.
Par exemple, supposons que vous ayez un contrôle déroulant (qui englobe une sélection HTML standard pour un style personnalisé), qui peut a) sélectionner une valeur dans la liste et b) être ouvert ou fermé (la liste d'options affichée ou masquée) Maintenant, supposons que votre application affiche une liste d'éléments et que vos contrôles déroulants filtrent les entrées de liste. Ensuite, il serait préférable de passer la valeur du filtre actif en tant qu'accessoire et de conserver l'état ouvert/fermé au niveau local. En outre, pour le rendre fonctionnel, vous devez transmettre un gestionnaire onChange du composant parent, qui serait appelé dans un élément déroulant et envoyer immédiatement les informations mises à jour (nouveau filtre sélectionné) au magasin. D'autre part, l'état ouvert/fermé peut être conservé dans le composant de liste déroulante, car le reste de l'application ne se soucie pas vraiment de savoir si le contrôle est ouvert, jusqu'à ce que l'utilisateur modifie réellement sa valeur.
Le code suivant ne fonctionne pas complètement, il a besoin de CSS et du traitement des événements de clic/flou/changement par liste déroulante, mais je voulais garder l'exemple minimal. J'espère que cela aide à comprendre la différence.
const _store = {
items: [
{ id: 1, label: 'One' },
{ id: 2, label: 'Two' },
{ id: 3, label: 'Three', new: true },
{ id: 4, label: 'Four', new: true },
{ id: 5, label: 'Five', important: true },
{ id: 6, label: 'Six' },
{ id: 7, label: 'Seven', important: true },
],
activeFilter: 'important',
possibleFilters: [
{ key: 'all', label: 'All' },
{ key: 'new', label: 'New' },
{ key: 'important', label: 'Important' }
]
}
function getFilteredItems(items, filter) {
switch (filter) {
case 'all':
return items;
case 'new':
return items.filter(function(item) { return Boolean(item.new); });
case 'important':
return items.filter(function(item) { return Boolean(item.important); });
default:
return items;
}
}
const App = React.createClass({
render: function() {
return (
<div>
My list:
<ItemList items={this.props.listItems} />
<div>
<Dropdown
onFilterChange={function(e) {
_store.activeFilter = e.currentTarget.value;
console.log(_store); // in real life, some action would be dispatched here
}}
filterOptions={this.props.filterOptions}
value={this.props.activeFilter}
/>
</div>
</div>
);
}
});
const ItemList = React.createClass({
render: function() {
return (
<div>
{this.props.items.map(function(item) {
return <div key={item.id}>{item.id}: {item.label}</div>;
})}
</div>
);
}
});
const Dropdown = React.createClass({
getInitialState: function() {
return {
isOpen: false
};
},
render: function() {
return (
<div>
<select
className="hidden-select"
onChange={this.props.onFilterChange}
value={this.props.value}>
{this.props.filterOptions.map(function(option) {
return <option value={option.key} key={option.key}>{option.label}</option>
})}
</select>
<div className={'custom-select' + (this.state.isOpen ? ' open' : '')} onClick={this.onClick}>
<div className="selected-value">{this.props.activeFilter}</div>
{this.props.filterOptions.map(function(option) {
return <div data-value={option.key} key={option.key}>{option.label}</div>
})}
</div>
</div>
);
},
onClick: function(e) {
this.setState({
isOpen: !this.state.isOpen
});
}
});
ReactDOM.render(
<App
listItems={getFilteredItems(_store.items, _store.activeFilter)}
filterOptions={_store.possibleFilters}
activeFilter={_store.activeFilter}
/>,
document.getElementById('root')
);
Les composants de réaction utilisent l’état pour LIRE/ÉCRIRE les variables internes pouvant être modifiées/mutées, par exemple:
this.setState({name: 'Lila'})
React props est un objet spécial qui permet au programmeur d’obtenir des variables et des méthodes du composant parent dans le composant enfant.
C'est quelque chose comme une fenêtre et des portes de la maison. Les accessoires sont également immuables. Le composant enfant ne peut pas les modifier/mettre à jour.
Il existe plusieurs méthodes qui aident à écouter lorsque les accessoires sont modifiés par Parent Component.
Les composants de réaction utilisent l’état pour LIRE/ÉCRIRE les variables internes pouvant être modifiées/mutées, par exemple:
this.setState({name: 'Lila'})
React props est un objet spécial qui permet au programmeur d’obtenir des variables et des méthodes du composant parent dans le composant enfant.
C'est quelque chose comme une fenêtre et des portes de la maison. Les accessoires sont également immuables. Le composant enfant ne peut pas les modifier/mettre à jour.
Il existe plusieurs méthodes qui aident à écouter lorsque les accessoires sont modifiés par Parent Component.
En réponse à la question initiale sur le fait que les accessoires sont immuables, ils sont dits immuables en ce qui concerne la composante enfant mais sont variables chez le parent.
Ceci est mon point de vue actuel concernant l'explication entre l'état et les accessoires
State est comme votre variable locale dans votre composant. Vous pouvez manipuler La valeur de state en utilisant set state. Vous pouvez ensuite transmettre la valeur de state à votre composant enfant, par exemple.
Props est la valeur qui se trouve exactement dans votre magasin Redux, cela provient en fait de l'état originaire de Reducer Votre composant Devrait être connecté à redux pour obtenir la valeur des accessoires. Vous pouvez également transmettre La valeur de vos accessoires à votre composant enfant
Props: représente les données "en lecture seule", immuables et faisant référence aux attributs du composant parents.
State: représente des données mutables, qui affectent en définitive ce qui est rendu sur la page et géré en interne par le composant lui-même et modifient généralement les heures supplémentaires en raison des entrées de l'utilisateur.
- props --- vous ne pouvez pas changer sa valeur.
- États --- vous pouvez changer sa valeur dans votre code, mais il serait actif lors du rendu.
State réside dans un composant où les accessoires sont passés du parent à l'enfant. Les accessoires sont généralement immuables.
class Parent extends React.Component {
constructor() {
super();
this.state = {
name : "John",
}
}
render() {
return (
<Child name={this.state.name}>
)
}
}
class Child extends React.Component {
constructor() {
super();
}
render() {
return(
{this.props.name}
)
}
}
Dans le code ci-dessus, nous avons une classe parent (Parent) qui a pour nom name et qui est transmise au composant enfant (classe Child) en tant que prop. Le composant enfant la restitue avec {this.props.name}
En général, l'état d'un composant (parent) est prop pour le composant enfant.
- State réside dans un composant où, comme accessoires, sont passés du parent à Enfant.
Les accessoires sont généralement immuables.
class Parent extends React.Component { constructor() { super(); this.state = { name : "John", } } render() { return ( <Child name={this.state.name}> ) } } class Child extends React.Component { constructor() { super(); } render() { return( {this.props.name} ) } }
Dans le code ci-dessus, nous avons une classe parent (Parent) qui a pour nom name et qui est transmise au composant enfant (classe Child) en tant que prop. Le composant enfant la restitue avec {this.props.name}
_ {L’État est l’Origine de la vérité, où résident vos données.} _ Vous pouvez dire que l’État se manifeste par des accessoires.
Fournir des accessoires aux composants est ce qui permet à votre interface utilisateur de rester synchronisée avec vos données . Un composant est en réalité une fonction qui renvoie du balisage.
Étant donné les mêmes accessoires _ (les données à afficher), il produira toujours le même balisage.
Ainsi, les accessoires sont comme les pipelines qui transportent les données de l’origine aux composants fonctionnels.
State est vos données, est modifiable, vous pouvez faire tout ce dont vous avez besoin, les accessoires ne lisent que des données, généralement lorsque vous transmettez des accessoires, vous avez déjà travaillé avec vos données et vous avez besoin du composant enfant pour les restituer ou si vos accessoires sont des objets. la fonction vous l'appeler pour effectuer une tâche
Extrait du livre de Andrea Chiarelli "Début de React: simplifiez votre flux de travail de développement front-end et améliorez l'expérience utilisateur de vos applications avec React":
Chaque composant React a une propriété props. Le but de cette propriété est de collecter les entrées de données transmises au composant lui-même. L'attribut JSX est associé à un élément React, une propriété portant le même nom est associée à l'objet props. Ainsi, nous pouvons accéder aux données transmises en utilisant la propriété attachée. De plus, l’immuabilité de accessoires nous permet de penser à composants comme fonctions pures, fonctions qui n’ont aucun effet secondaire (car elles changez pas leurs données d’entrée). Nous pouvons considérer les données passant d'un composant à un autre comme un flux de données unidirectionnel, du composant parent vers les composants enfants. Cela nous donne un système plus contrôlable.
React fournit un mécanisme pour prendre en charge le rendu automatique d'un composant lorsque les données changent. Un tel mécanisme est basé sur le concept de état. React state est une propriété qui représente des données qui évoluent dans le temps. Chaque composant prend en charge la propriété state, mais il convient de l'utiliser avec précaution. Les composants qui stockent des données qui peuvent évoluer dans le temps sont dits composants avec état. Un composant avec état stocke le état dans la propriété this.state. Pour informer un composant que l'état a changé, vous devez utiliser la méthode setState (). Etat l'initialisation est le seul cas où vous pouvez affecter une valeur à la propriété this.state sans utiliser setState ().
setState () fusionne les nouvelles données avec les anciennes données déjà contenues dans l'état et remplace l'état précédent setState () déclenche l'exécution du render () méthode, vous ne devriez donc jamais appeler render () explicitement
L’explication simple est: STATE est l’état local du composant, par exemple color = "blue" ou animation = true, etc. Utilisez this.setState pour modifier l’état du composant . PROPS permet aux composants de communiquer entre eux (envoi de données du parent à l’enfant) et de rendre les composants réutilisables.