Je regardais un cours Pluralsight sur React et l'instructeur a déclaré que les accessoires ne devaient pas être changés. Je lis maintenant un article (uberVU / react-guide) sur les accessoires vs l'état et il dit

Les accessoires et les changements 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.

• Les accessoires peuvent donc changer, mais ils devraient être immuables?
• Quand devez-vous utiliser des accessoires et quand devez-vous utiliser l'état?
• Si vous avez des données dont un composant React a besoin, doivent-elles être transmises via des accessoires ou configurées dans le composant React via getInitialState?

Les accessoires et l'état sont liés. L'état d'un composant deviendra souvent les accessoires d'un composant enfant. Les accessoires sont passés à l'enfant dans la méthode de rendu du parent comme deuxième argument React.createElement()ou, si vous utilisez JSX, les attributs de balise les plus familiers.

<MyChild name={this.state.childsName} />

La valeur d'état du parent childsNamedevient celle de l'enfant this.props.name. Du point de vue de l'enfant, le nom prop est immuable. S'il doit être changé, le parent devrait juste changer son état interne:

this.setState({ childsName: 'New name' });

et React le propagera à l'enfant pour vous. Une question naturelle est la suivante: que se passe-t-il si l'enfant a besoin de changer de nom? Cela se fait généralement via des événements enfants et des rappels parents. L'enfant peut exposer un événement appelé, par exemple onNameChanged,. Le parent souscrirait alors à l'événement en passant un gestionnaire de rappel.

<MyChild name={this.state.childsName} onNameChanged={this.handleName} />

L'enfant passerait son nouveau nom demandé comme argument au rappel d'événement en appelant, par exemple this.props.onNameChanged('New name'), et le parent utiliserait 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 la vue de votre contrôleur.

Utilisez des accessoires pour transmettre des données et des gestionnaires d'événements à vos composants enfants.

Ces listes devraient vous guider lorsque vous travaillez avec des données dans vos composants.

Accessoires

• sont immuables
  • qui permet à React d'effectuer des vérifications de références rapides
• sont utilisés pour transmettre des données à partir de votre contrôleur de vue
  • votre composant de haut niveau
• avoir de meilleures performances
  • l'utiliser pour transmettre des données aux composants enfants

Etat

• devrait être géré dans votre contrôleur de vue
  • votre composant de haut niveau
• est mutable
• a de moins bonnes performances
• ne doit pas être accessible à partir des composants enfants
  • passer avec des accessoires à la place

Pour la communication entre deux composants qui n'ont pas de relation parent-enfant, vous pouvez configurer votre propre système d'événements global. Abonnez-vous aux événements dans componentDidMount (), désabonnez-vous dans componentWillUnmount () et appelez setState () lorsque vous recevez un événement. Le modèle de flux est l'un des moyens possibles pour organiser cela. - https://facebook.github.io/react/tips/communicate-between-components.html

Quels composants doivent avoir un état?

La plupart de vos composants devraient simplement prendre des données des accessoires et les rendre. Cependant, vous devez parfois répondre à une entrée utilisateur, à une demande du serveur ou au temps qui passe. Pour cela, vous utilisez l'état.

Essayez de conserver autant de vos composants que possible sans état . En faisant cela, vous isolerez l'état à son emplacement le plus logique et réduirez la redondance, ce qui facilitera le raisonnement sur votre application.

Un modèle courant consiste à créer plusieurs composants sans état qui ne font que restituer des données, et à avoir un composant avec état au-dessus d'eux dans la hiérarchie qui transmet son état à ses enfants via des accessoires. Le composant avec état encapsule toute la logique d'interaction, tandis que 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

Que devrait aller dans l'État?

L'état 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 sérialisables en JSON. Lors de la création d'un composant avec état, pensez à la représentation minimale possible de son état et stockez uniquement ces propriétés dans this.state. Dans render (), calculez simplement toutes les autres informations dont vous avez besoin en fonction de cet état. Vous constaterez que penser et écrire des applications de cette manière a tendance à conduire à l'application la plus correcte, car l'ajout de valeurs redondantes ou calculées à l'état signifie que vous devez les garder explicitement synchronisées plutôt que de compter sur React pour les calculer pour vous. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

Vous pouvez mieux le comprendre en le reliant aux fonctions Plain JS.

Tout simplement,

État est l'état local du composant auquel il est impossible d'accéder et de modifier l'extérieur du composant. C'est équivalent aux variables locales dans une fonction.

Fonction JS simple

const DummyFunction = () => {
  let name = 'Manoj';
  console.log(`Hey ${name}`)
}

Composant React

class DummyComponent extends React.Component {
  state = {
    name: 'Manoj'
  }
  render() {
    return <div>Hello {this.state.name}</div>;
  }

Les accessoires , en revanche, rendent les composants réutilisables en leur donnant la possibilité de recevoir des données de leur composant parent sous forme d'accessoires. Ils sont équivalents aux paramètres de fonction.

Fonction JS simple

const DummyFunction = (name) => {
  console.log(`Hey ${name}`)
}

// when using the function
DummyFunction('Manoj');
DummyFunction('Ajay');

Composant React

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: Manoj Singh Negi

Lien de l'article: React State vs Props expliqué

Le résumé des accessoires vs l'état que j'aime le plus est ici: react-guide Astuce Big Hat pour ces gars-là. Voici une version modifiée de cette page:

accessoires vs état

tl; dr Si un composant doit modifier l'un de ses attributs à un moment donné, cet attribut doit faire partie de son état, sinon il doit simplement être un accessoire pour ce composant.

accessoires

Les accessoires (abréviation de propriétés) sont 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 simplement être 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 modifié au fil du temps, principalement en raison d'événements utilisateur.

Un composant gère son propre état en interne. En plus de définir un état initial, elle n'a rien à faire avec l'état de ses enfants. Vous pouvez conceptualiser l'état comme privé pour ce composant.

Modification des accessoires et de l'état

                                                   état des accessoires
    Peut obtenir la valeur initiale du composant parent? Oui oui
    Peut être modifié par le composant parent? Oui Non
    Peut-on définir des valeurs par défaut dans le composant? * Oui Oui
    Peut changer à l'intérieur du composant? Non Oui
    Peut définir la valeur initiale pour les composants enfants? Oui oui
    Peut changer dans les composants enfants? Oui Non

• Notez que les accessoires 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. Étant donné que l'état augmente la complexité et réduit la prévisibilité, un composant sans état est préférable. Même si vous ne pouvez clairement pas vous passer de l'état dans une application interactive, vous devez éviter d'avoir trop de composants avec état.

Types de composants

Composant sans état Accessoires uniquement, sans état. Il n'y a pas grand-chose à 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. Ils sont utilisés lorsque votre composant doit conserver un certain é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 devrait être encapsulé dans un nombre modéré de composants avec état, tandis que toute la logique de visualisation et de formatage devrait se déplacer en aval dans de nombreux composants sans état.

sources

• Question sur les "accessoires" et "l'état" - Google Groupes
• Penser en réaction: Identifiez où votre État devrait vivre

les accessoires (abréviation de «propriétés») et l' état sont tous deux des objets JavaScript simples. Bien que les deux contiennent des informations qui influencent la sortie du rendu, elles sont différentes d'une manière importante: les accessoires sont transmis au composant (similaire aux paramètres de la fonction) tandis que l' état est géré au sein du composant (similaire aux variables déclarées dans une fonction).

Donc, simplement l' état est limité à votre composant actuel, mais les accessoires peuvent être passés à n'importe quel composant que vous souhaitez ... Vous pouvez passer l' état du composant actuel comme accessoire à d'autres composants ...

Toujours dans React, nous avons des composants sans état qui n'ont que des accessoires et non un état interne ...

L'exemple ci-dessous montre comment ils fonctionnent dans votre application:

Parent (composant avec é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 (composante 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 l'état est interne et contrôlé par le composant lui-même tandis que les accessoires sont externes et contrôlés par tout ce qui rend le 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"));

• L'état peut être changé (Mutable)
• Alors que les accessoires ne peuvent pas (immuables)

Fondamentalement, la différence est que l' état est quelque chose comme des attributs dans la POO : c'est quelque chose de local à une classe (composant), utilisé pour mieux le décrire. Les accessoires sont comme des paramètres - ils sont transmis à un composant par l'appelant d'un composant (le parent): comme si vous appeliez une fonction avec certains paramètres.

L' état et les accessoires dans react sont utilisés pour contrôler les données dans un composant, généralement les accessoires sont définis par le parent et transmis aux composants enfants et ils sont fixes dans tout le composant. Pour les données qui vont changer, nous devons utiliser l'état. Et les accessoires sont immuables tandis que les états sont modifiables , si vous souhaitez modifier les accessoires, vous pouvez le faire à partir du composant parent, puis le transmettre aux composants enfants.

comme je l'ai appris en travaillant avec réagir.

• les accessoires sont utilisés par un composant pour obtenir des données d'un environnement externe, c'est-à-dire un autre composant (pur, fonctionnel ou classe) ou une classe générale ou du code javascript / dactylographié

• les états sont utilisés pour gérer l'environnement interne d'un composant signifie que les données changent à l'intérieur du composant

Accessoires: Les accessoires ne sont rien d'autre que la propriété du composant et le composant React 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" /> passant un objet {nom: 'Sara'} comme accessoires du composant Welcome. Pour transmettre des données d'un composant parent au composant enfant, nous utilisons des accessoires. Les accessoires sont immuables. Pendant le cycle de vie d'un composant, les accessoires ne doivent pas changer (considérez-les comme immuables).

État: l'état n'est accessible qu'au sein du composant. Pour garder une trace des données dans le composant, nous utilisons l'état. nous pouvons changer d'état par setState. Si nous devons passer 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:

1. les états sont mutables.
2. les états sont associés aux composants individuels ne peuvent pas être utilisés par d'autres composants.
3. les états sont initialisés lors du montage du composant.
4. Les états sont utilisés pour rendre les changements dynamiques dans le composant.

accessoires:

1. les accessoires sont immuables.
2. vous pouvez passer des accessoires entre les composants.
3. Les accessoires sont principalement utilisés pour communiquer entre les composants. Vous pouvez passer directement du parent à l'enfant. Pour passer de l'enfant au 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>
      );
     }
}

Fondamentalement, les accessoires et l'état sont deux façons dont le composant peut savoir quoi et comment rendre. Quelle partie de l'état de l'application appartient à l'état et laquelle, dans un magasin de niveau supérieur, est plus liée à la conception de votre application qu'à la façon dont React fonctionne. L'OMI, la manière la plus simple de décider, est de se demander si cette donnée particulière est utile pour l'application dans son ensemble ou s'il s'agit d'informations locales. En outre, il est important de ne pas dupliquer l'état, donc 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 la sélection HTML standard pour un style personnalisé), qui peut a) sélectionner une valeur dans la liste, et b) être ouvert ou fermé (c'est-à-dire la liste d'options affichée ou masquée). Supposons maintenant que votre application affiche une liste d'éléments en quelque sorte et que votre contrôle déroulant filtre les entrées de liste. Ensuite, il serait préférable de passer la valeur du filtre actif comme accessoire et de maintenir l'état ouvert / fermé local. De plus, pour le rendre fonctionnel, vous passeriez un gestionnaire onChange du composant parent, qui serait appelé à l'intérieur de l'élément de liste déroulante et enverrait immédiatement les informations mises à jour (nouveau filtre sélectionné) au magasin. D'un autre côté, l'état ouvert / fermé peut être conservé à l'intérieur du composant déroulant, car le reste de l'application ne se soucie pas vraiment 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 de gérer les événements de clic / flou / changement de liste déroulante, mais je voulais garder un 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')
);

L'État est la façon dont réagir traite les 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 juste pertinente pour ce composant spécifique. C'est là que l'État entre en jeu.

Habituellement, la meilleure façon de définir l'état est la suivante:

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = { key1: value1, key2: value2 }    
  }
}

mais dans les dernières implémentations 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 juste une amélioration de la syntaxe.

Alors, qu'est-ce qui est différent de simplement utiliser des attributs d'objet comme nous l'avons toujours dans la programmation OO? Habituellement, les informations détenues dans votre état ne sont pas censées être statiques, elles changeront au fil du temps et votre vue devra être mise à jour afin de refléter ces changements. State propose cette fonctionnalité de manière simple.

L'État, c'est être immuable! et je ne peux pas insister assez là-dessus. Que cela veut-il dire? Cela signifie que vous ne devez JAMAIS faire quelque chose comme ça.

 state.key2 = newValue;

La bonne façon de le faire est:

this.setState({ key2: newValue });

En utilisant 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 changements.

Consultez les documents React pour une explication encore plus détaillée: https://facebook.github.io/react/docs/state-and-lifecycle.html

Les accessoires sont simplement un raccourci pour les propriétés. Les accessoires sont la façon dont les composants communiquent entre eux. Si vous connaissez déjà React, vous devez savoir que les accessoires descendent du composant parent.

Il y a aussi le cas où vous pouvez avoir des accessoires par défaut afin que les accessoires soient définis même si un composant parent ne transmet pas les accessoires.

C'est pourquoi les gens se réfèrent à React comme ayant un flux de données unidirectionnel. Cela prend un peu de temps et je vais probablement bloguer à ce sujet plus tard, mais pour l'instant n'oubliez pas: les données circulent du parent à l'enfant. Les accessoires sont immuables (le mot de fantaisie ne change pas)

Nous sommes donc heureux. Les composants reçoivent des données du parent. Tout trié, non?

Enfin, pas tout à fait. Que se passe-t-il lorsqu'un composant reçoit des données d'une personne autre que le parent? Que faire si l'utilisateur entre des données directement dans le composant?

Eh bien, c'est pourquoi nous avons un État.

ETAT

Les accessoires ne devraient pas changer, donc l'état augmente. Normalement, les composants n'ont pas d'état et sont donc appelés sans état. Un composant utilisant l'état est appelé état. N'hésitez pas à laisser tomber cette petite friandise lors des fêtes et à regarder les gens s'éloigner de vous.

Ainsi, l'état est utilisé pour qu'un composant puisse garder une trace des informations entre les rendus qu'il fait. Lorsque vous définissezState, il met à jour l'objet d'état, puis restitue le composant. C'est super cool parce que cela signifie que React s'occupe du travail acharné et est incroyablement rapide.

À titre d'exemple d'état, voici un extrait d'une barre de recherche (cela vaut la peine de consulter ce cours si vous voulez 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);
 }
}

SOMMAIRE

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 apatrides.

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.

L'état est utilisé pour les données mutables ou les données qui changeront. Ceci est particulièrement utile pour la saisie par l'utilisateur. Pensez aux barres de recherche par exemple. L'utilisateur saisira des données et cela mettra à jour ce qu'il voit.

En bref.

les valeurs des accessoires ne peuvent pas être modifiées [immuable]

les valeurs d'état peuvent être modifiées à l'aide de la méthode setState [mutable]

Etat - Il s'agit d'une propriété mutable spéciale qui contient des données de composant. il a une valeur par défaut lors du montage de Componet.

accessoires - C'est une propriété spéciale qui est immuable par nature et utilisée en cas de transfert de valeur du parent à l'enfant. les accessoires ne sont qu'un canal de communication entre les composants, passant toujours du haut (parent) au bout (enfant).

ci-dessous sont un exemple complet de combinding 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>

En général, l'état d'un composant (parent) est prop pour le composant enfant.

1. L'état réside dans un composant où les accessoires sont transmis du parent à l'enfant.

2. 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 un nom comme état qui est passé au composant enfant (classe Child) en tant que prop et le composant enfant le rend en utilisant {this.props.name}

Certaines données sont entrées par des utilisateurs quelque part dans l'application.

1. le composant dans lequel les données sont entrées doit avoir ces données dans leur état car il doit les manipuler et les modifier lors de la saisie des données

2. n'importe où ailleurs dans l'application, les données doivent être transmises comme accessoires à tous les autres composants

Alors oui, les accessoires changent, mais ils sont modifiés à la «source» et couleront ensuite 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éreraient cela dans l'état, ce qui aurait alors une action entraînant la sauvegarde des données mises à jour dans ReferenceDataState qui pourrait être un niveau au-dessous d'AppState, puis cette liste de fournisseurs serait transmise comme accessoire. à tous les composants qui avaient besoin de l'utiliser.

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érents changements. Ce ne sont rien de plus que des objets écrits en JavaScript plat, ils peuvent donc contenir des données ou des codes, représenter 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'État dans React et Utilisation des accessoires dans React

• accessoires --- vous ne pouvez pas modifier sa valeur.
• déclare --- vous pouvez changer sa valeur dans votre code, mais il serait actif lors d'un rendu.

Quelques différences entre «état» et «accessoires» en réaction.

React contrôle et rend le DOM en fonction de son état. Il existe deux types d'états de composants: les accessoires est l'état qui transfère entre les composants et l'état est l'état interne des composants. Les accessoires sont utilisés pour le transfert de données du composant parent vers le composant enfant. Les composants ont également leur propre état à l'intérieur: état 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 seront transmis aux enfants, ce qui est indiqué dans la méthode de rendu du composant parent

Accessoires

• accessoires utilisés pour transmettre des données dans le composant enfant

• les accessoires modifient une valeur en dehors d'un composant (composant enfant)

Etat

• utilisation de l'état à l'intérieur d'un composant de classe

• changement d'état d'une valeur à l'intérieur d'un composant

• Si vous rendez la page, vous appelez setState pour mettre à jour le DOM (mettre à jour la valeur de la page)

L'État a un rôle important à jouer

En réponse à la question initiale sur les accessoires immuables, ils sont réputés immuables en ce qui concerne la composante enfant mais sont modifiables chez le parent.

React Components utilise l'état pour LIRE / ÉCRIRE les variables internes qui peuvent être modifiées / mutées par exemple:

this.setState({name: 'Lila'})

Les accessoires React sont des objets spéciaux qui permettent au programmeur d'obtenir des variables et des méthodes du composant parent dans le composant enfant.

C'est quelque chose comme des fenêtres et des portes de la maison. Les accessoires sont également immuables. Le composant enfant ne peut pas les modifier / les mettre à jour.

Il existe quelques méthodes qui aident à écouter lorsque les accessoires sont modifiés par le composant parent.

Ceci est mon point de vue actuel concernant l'explication entre l'état et les accessoires

1. L'état est comme votre variable locale à l'intérieur de votre composant. Vous pouvez manipuler la valeur de l'état en utilisant set state. Vous pouvez ensuite transmettre la valeur de l'état à votre composant enfant par exemple.

2. Les accessoires sont la valeur qui se trouve exactement à l'intérieur de votre magasin redux, cela vient en fait de l'état qui provient du réducteur. Votre composant doit être connecté à redux pour obtenir la valeur des accessoires. Vous pouvez également transmettre la valeur de vos accessoires à votre composant enfant

Une explication simple est: STATE est l'état local du composant, par exemple color = "blue" ou animation = true etc. Utilisez this.setState pour changer l'état du composant. PROPS est la façon dont les composants communiquent entre eux (envoient des données du parent à l'enfant) et rendent les composants réutilisables.

L'état est vos données, est modifiable, vous pouvez faire tout ce dont vous avez besoin, les accessoires sont des données en lecture seule, généralement lorsque vous passez des accessoires, vous avez déjà travaillé avec vos données et vous avez besoin du composant enfant pour les rendre ou si vos accessoires sont un fonction u l'appeler pour effectuer une tâche

L'État est à l'origine de la vérité, là où vivent vos données. Vous pouvez dire que l'État se manifeste via des accessoires.

Fournir des accessoires aux composants est ce qui maintient votre interface utilisateur en synchronisation avec vos données. Un composant est vraiment juste une fonction qui retourne un balisage.

Étant donné les mêmes accessoires (données à afficher), il produira toujours le même balisage .

Les accessoires sont donc comme les pipelines qui transportent les données de l'origine aux composants fonctionnels.

Accessoires: représente des données "en lecture seule", qui sont immuables et font référence aux attributs du composant parents.

État: représente des données modifiables, qui affectent finalement ce qui est rendu sur la page et géré par en interne par le composant lui-même et changent les heures supplémentaires généralement en raison de l'entrée de l'utilisateur.

La principale différence est que l'état est privé pour un composant et peut être modifié à l'intérieur de ce composant uniquement tandis que les accessoires ne sont que des valeurs statiques et des clés pour le composant enfant qui sont passées par le composant parent et ne peuvent pas être modifiées à l'intérieur du composant enfant