Explication détaillée de l'utilisation des accessoires et des attributs d'état dans React (exemple de code)

Cet article vous apporte une explication détaillée de l'utilisation des accessoires et des attributs d'état dans React (exemples de code). Les amis dans le besoin peuvent s'y référer. Vous avez aidé.

Cet article présente principalement l'utilisation spécifique des accessoires et des attributs d'état React, qui ont une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. S'il y a des lacunes, les critiques et les corrections sont les bienvenues.

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 fichier XML indique qu'il y a deux élèves dans la classe 1. L'élève avec le numéro d'élève 1 s'appelle John Kindem et l'élève avec le numéro d'élève 2 s'appelle Alick Ice. L'identifiant est l'attribut You. peut le mettre Traité comme une constante, il est en lecture seule.
html hérite de XML, et JSX est une extension de HTML et JS dans un certain sens. 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 d'un composant React, nous pouvons le transmettre au composant comme ci-dessus Quelques constantes que le composant doit appeler 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>
    );//欢迎加入前端全栈开发交流圈一起学习交流：864305860
  }//面向1-3年前端人员
}//帮助突破技术瓶颈，提升思维能力
 
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, pensez à écraser le constructeur du composant, Et 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 (
      <div>
        <h1>Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      </div>
    );//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860
  }//面向1-3年前端人员
}//帮助突破技术瓶颈，提升思维能力
 
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 ? Ce problème doit être résolu en utilisant l'état du composant React. L'état signifie l'état. Dans React, toutes les variables de contrôle changeantes doivent être mises en état. Chaque fois que le contenu de l'état change, le composant correspondant de la page sera restitué. De plus, l'état est complètement interne au composant. L'état 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 modifiée directement.
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 (
      <div>
        <h1>current time: {this.state.hour + ':' + this.state.minute + ':' + this.state.second}</h1>
      </div>
    );
  }
}
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 constructeur, comme. this :

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 ceci avant d'utiliser cette fonction, dans les fonctions fléchées, cela pointe vers this externe, 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 le dom. pour mettre à 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 des mises à jour d'é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.

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!