Explication détaillée des cas pratiques d'accessoires de réaction et d'attributs d'état

Cette fois, je vais vous apporter une explication détaillée du cas de combat réel des accessoires de réaction et des attributs d'état. Quelles sont les précautions pour le combat réel des accessoires de réaction et des attributs d'état ? Ce qui suit est un cas pratique, jetons un coup d'œil ? .

Dans la section précédente, nous avons parlé des composants React et de la façon d'utiliser les classes ES6 pour créer un composant React et l'utiliser à d'autres endroits. Dans cette section, nous parlerons des deux âmes des composants React : les accessoires et l'état.

props

Je ne sais pas si vous vous souvenez encore des attributs dans la balise xml, comme ceci :

<class id="1">
 <student id="1">John Kindem</student>
 <student id="2">Alick Ice</student>
</class>

Un tel xml expression de fichier Cela signifie qu'il y a deux étudiants dans la classe 1. Le nom de l'étudiant avec l'ID d'étudiant 1 est John Kindem, et le nom de l'étudiant avec l'ID d'étudiant 2 est Alick Ice. L'identifiant est l'attribut auquel vous pouvez penser. comme une constante, qui est en lecture seule.

html hérite de XML, et JSX est une extension de HTML et JS dans un certain sens, donc le concept d'attributs a naturellement été hérité.

Dans React, nous utilisons le concept de props pour transmettre des valeurs en lecture seule aux composants React, comme ceci :

// 假设我们已经自定义了一个叫Hello的组件
ReactDom.render(
  <Hello firstName={&#39;John&#39;} lastName={&#39;Kindem&#39;}/>,
  document.getElementById('root')
);

Lors de l'appel du composant React, nous pouvons faire de même comme ci-dessus Transmettez quelques constantes au composant afin qu'il puisse être appelé en interne. La méthode d'appel est la suivante :

class Hello extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <p>
        <h1>Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      </p>
    );
  }
}
ReactDom.render(
  <Hello firstName={&#39;John&#39;} lastName={&#39;Kindem&#39;}/>,
  document.getElementById('root')
);

Pour obtenir les accessoires passés à l'intérieur du composant, il vous suffit d'utiliser l'objet this.props, mais avant de l'utiliser, n'oubliez pas de remplacer le constructeur du composant And. acceptez la valeur des accessoires pour appeler le constructeur de la classe parent.

Bien sûr, les accessoires peuvent également définir des valeurs par défaut, comme suit :

class Hello extends React.Component {
  constructor(props) {
    super(props);
  }
  static defaultProps = {
    firstName: 'John',
    lastName: 'Kindem'
  };
  render() {
    return (
      <p>
        <h1>Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      </p>
    );
  }
}
ReactDom.render(
  <Hello/>,
  document.getElementById('root')
);

Déclarez simplement une valeur par défaut d'accessoires statiques dans la classe ES6, et l'effet d'exécution est le même que ci-dessus.

Les accessoires ne sont pas compliqués et peuvent être appris avec un peu de pratique.

état, cycle de vie des composants

Vous vous souvenez peut-être, que se passe-t-il si je souhaite ajouter des effets dynamiques à un composant React ? Il semble que les connaissances que j’ai acquises jusqu’à présent ne puissent pas résoudre ce problème.

Ce problème doit être résolu en utilisant l'état du composant React. État signifie état. Dans React, toutes les variables de contrôle changeantes doivent être mises dans l'état. Chaque fois que le contenu de l'état change, la page Le composant correspondant. sera restitué. De plus, l'état est complètement interne au composant et ne peut pas être transféré de l'extérieur vers l'intérieur, et la valeur de l'état ne peut pas non plus être directement modifiée.

Donnons d'abord un exemple :

import React from 'react';
import ReactDom from 'react-dom';
class Time extends React.Component {
  constructor(props) {
    super(props);
    // 初始化state
    this.state = {
      hour: 0,
      minute: 0,
      second: 0
    }
  }
  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }
  tick() {
    // 计算新时间
    let newSecond, newMinute, newHour;
    let carryMinute = 0, carryHour = 0;
    newSecond = this.state.second + 1;
    if (newSecond > 59) {
      carryMinute = 1;
      newSecond -= 60;
    }
    newMinute = this.state.minute + carryMinute;
    if (newMinute > 59) {
      carryHour = 1;
      newMinute -= 60;
    }
    newHour = this.state.hour + carryHour;
    if (newHour > 59) newHour -= 60;
    // 设置新状态
    this.setState({
      hour: newHour,
      minute: newMinute,
      second: newSecond
    });
  }
  render() {
    return (
      <p>
        <h1>current time: {this.state.hour + ':' + this.state.minute + ':' + this.state.second}</h1>
      </p>
    );
  }
}
ReactDom.render(
  <Time/>,
  document.getElementById('root')
);

De cette façon, un compteur est complété. La valeur change une fois par seconde. Expliquons le code : Tout d'abord, l'état est initialisé dans le. constructor. , comme ceci :

constructor(props) {
  super(props);
  // 在这初始化state
  this.state = {
    ...
  }
}

Pour changer l'état, utilisez une fonction intégrée dans la classe de base du composant React :

this.setState({
  ...
});

Assurez-vous de faire attention à la portée. de this avant d'utiliser cette fonction. This dans une fonction fléchée pointe vers l'externe this, tandis que this dans une fonction normale pointe vers la fonction elle-même.

De plus, les rappels du cycle de vie de deux composants React sont utilisés ici :

componentDidMount() {
  // React组件被加载到dom中的时候被调用
  ...
}
componentWillUnmount() {
  // React组件从dom中卸载的时候被调用
  ...
}

Le code de minuterie ci-dessus ne devrait donc pas être difficile une fois le composant React chargé dans Définir une minuterie. dans le dom et mettez à jour l'état toutes les secondes. Lorsque l'état est mis à jour, les composants de la page seront restitués. Lorsque le composant est déchargé, la minuterie doit être effacée.

Cependant, React a une limite maximale pour la fréquence de mise à jour de l'état. Le dépassement de cette limite entraînera une diminution des performances de rendu des pages. Vous devez faire attention à ne pas utiliser setState dans les fonctions à haute fréquence.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Paramètre de la liste blanche inter-domaines de l'opération Angularjs

Comment utiliser Webpack pour gérer les requêtes inter-domaines

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!