Cette fois, je vais vous apporter une explication détaillée de l'utilisation des accessoires et des attributs d'état de React. Quelles sont les précautions lors de l'utilisation des accessoires et des attributs d'état de React. Voici des cas pratiques, jetons un coup d'œil.
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 seuleaux composants React, comme ceci :
// 假设我们已经自定义了一个叫Hello的组件 ReactDom.render( <Hello firstName={'John'} lastName={'Kindem'}/>, document.getElementById('root') );
Lors de l'appel du composant React, nous pouvons faire 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={'John'} lastName={'Kindem'}/>, 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 d'écraser le Constructeur , et accepte 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') );
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') );
constructor(props) { super(props); // 在这初始化state this.state = { ... } }
this.setState({ ... });
componentDidMount() { // React组件被加载到dom中的时候被调用 ... } componentWillUnmount() { // React组件从dom中卸载的时候被调用 ... }
timer .
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. 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 : Angular6.0 implémente la fonction de chargement paresseux des composants (avec code)
Conversion de l'encodage jQuery en base64 téléchargement AJAX réussi
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!