web-dev-qa-db-fra.com

Pourquoi les accessoires de React sont en lecture seule?

La documentation React indique: React is pretty flexible but it has a single strict rule: all React components must act like pure functions with respect to their props.

Pourquoi donc?

Je suppose que si vous modifiez directement la valeur des accessoires, le composant ne sera pas restitué, c'est pourquoi nous devons utiliser setState. Mais je ne comprends toujours pas la raison derrière cela. Pourquoi les composants doivent être comme des fonctions pures par rapport à leurs accessoires?

reactjspure-function
8
L. Pier Roberto

Le concept important du composant React: un composant ne doit gérer que son propre état, mais pas ses propres accessoires.

En fait, les accessoires d'un composant sont concrètement "l'état d'un autre composant (composant parent)". Les accessoires doivent donc être gérés par le propriétaire de leur composant. C'est pourquoi tous les composants React doivent agir comme des fonctions pures par rapport à leurs accessoires (ne pas muter directement leurs accessoires).

Je vais vous montrer un exemple simple:

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      p1: {a:1, b:2},
    }

   render() {
      return <ChildComponent p1={this.state.p1} />     
   }
}

Dans le ChildComponent, si vous voulez muter le "passé prop p1" (p1 est un objet avec sa propre référence) (ex. Dans le ChildComponent, vous écrivez: p1.a=3), Donc évidemment, "le p1 - propriété de l'état de ParentComponent "est également mutée. Mais le ParentComponent n'a pas pu effectuer un nouveau rendu dans ce cas car vous n'avez pas déclenché l'action setState() dans ParentComponent. Il générera donc de nombreux bugs non contrôlés pour un React App unstable.

J'espère que vous comprenez maintenant pourquoi React dit:

La règle stricte: tous les composants React doivent agir comme des fonctions pures par rapport à leurs accessoires (ne pas muter directement leurs accessoires).

Bonus: pour changer (muter) correctement les accessoires, vous devez utiliser "callback fnc prop" dans ChildComponent. Pour l'instant, il respecte bien le concept de React Component.

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      p1: {a:1, b:2},
  }

  this.changeP1 = () => {
     this.setState({p1: {a:3, b:4}});
  }

   render() {
      return <ChildComponent p1={this.state.p1} changeP1={this.changeP1} />     
   }
}
2
SanjiMika

documents

React docs a dit

Tous les composants React doivent agir comme des fonctions pures par rapport à leurs accessoires. Bien sûr, les interfaces utilisateur des applications sont dynamiques et changent au fil du temps. Dans la section suivante, nous présenterons un nouveau concept d '"état". L'état permet aux composants React de modifier leur sortie au fil du temps en réponse aux actions de l'utilisateur, aux réponses du réseau et à toute autre chose. , sans violer cette règle.

0
MJ Studio