Comment utiliser React ? Explication détaillée de l'utilisation de React (avec exemples inclus)

Cet article présente principalement l'utilisation de react Les étudiants intéressés peuvent cliquer pour en savoir plus sur l'utilisation de React. Jetons un coup d'œil ensemble au contenu de cet article

1. React Props

1. Utiliser des accessoires

La principale différence entre l'état et les accessoires est que les accessoires sont immuables, tandis que l'état peut être modifié en fonction de l'interaction de l'utilisateur pour changer. C'est pourquoi certains composants du conteneur doivent définir un état pour mettre à jour et modifier les données. Les sous-composants ne peuvent transmettre des données que via des accessoires.

L'attribut name dans l'instance est obtenu via this.props.name.

2. Accessoires par défaut

Vous pouvez définir des valeurs par défaut pour les accessoires via la méthode getDefaultProps().

2. API du composant

1. Définir l'état : setState

setState(objectnextState[, function callback])

（ 1) Description du paramètre :

nextState, le nouvel état à définir, qui sera fusionné avec l'état actuel

rappel, paramètres facultatifs, fonction de rappel. Cette fonction sera appelée une fois que setState aura été défini avec succès et que le composant aura été restitué.

Fusionnez nextState et l'état actuel, puis restituez le composant. setState est la méthode principale pour déclencher les mises à jour de l'interface utilisateur dans les fonctions de gestion des événements React et les fonctions de rappel de requête.

(2) À propos de setStaate

Vous ne pouvez pas modifier l'état via this.state à l'intérieur du composant, car l'état sera remplacé après l'appel de setState().

setState() ne modifie pas immédiatement this.state, mais crée un état qui est sur le point d'être traité. setState() n'est pas nécessairement synchrone. Afin d'améliorer les performances, React effectuera le rendu de l'état et du DOM par lots.

setState() déclenchera toujours un redessinage de composant, à moins qu'une logique de rendu conditionnel ne soit implémentée dans ShouldComponentUpdate().

2. État de remplacement : replaceState

replaceState(object nextState[, functioncallback])

nextState, le nouvel état à définir , Cet état remplace l'état actuel.

rappel, paramètre facultatif, fonction de rappel. Cette fonction sera appelée une fois que replaceState aura été défini avec succès et que le composant aura été restitué.

La méthode replaceState() est similaire à setState(), mais la méthode ne conservera que l'état dans nextState, et l'état d'origine qui n'est pas dans nextState sera supprimé.

3. Définir les propriétés : setProps

setProps(object nextProps[, functioncallback])

nextProps, qui seront set Nouvel attribut, cet état sera fusionné avec le props

callback actuel, les paramètres facultatifs, la fonction de rappel. Cette fonction sera appelée une fois que setProps sera défini avec succès et que le composant sera restitué.

Définissez les propriétés du composant et effectuez un nouveau rendu du composant.

4. Propriétés de remplacement : replaceProps

replaceProps(object nextProps[, functioncallback])

nextProps à définir A nouvelle propriété qui remplace les accessoires actuels.

callback, paramètre facultatif, fonction de rappel. Cette fonction sera appelée une fois que replaceProps sera défini avec succès et que le composant sera restitué. La méthode

replaceProps() est similaire à setProps, mais elle supprimera les accessoires d'origine

5.    Forcer la mise à jour : forceUpdate

forceUpdate([function callback])

La méthode forceUpdate() amènera le composant à appeler sa propre méthode render() pour re -render le composant, et l'enfant du composant Les composants appellent également leur propre render(). Cependant, lorsque le composant est restitué, this.props et this.state seront toujours lus. Si l'état n'a pas changé, React mettra uniquement à jour le DOM.

La méthode forceUpdate() convient pour redessiner des composants autres que this.props et this.state (par exemple : après avoir modifié this.state). Cette méthode est utilisée pour notifier à React que). render doit être appelé.()

6. Obtenez le nœud DOM : findDOMNode

DOMElement findDOMNode()

Valeur de retour : DOM. element DOMElement

Si le composant a été monté dans le DOM, cette méthode renvoie l'élément DOM du navigateur local correspondant. Lorsque le rendu renvoie null ou false, this.findDOMNode() renverra également null. Cette méthode est utile lors de la lecture de valeurs du DOM, comme l'obtention de la valeur d'un champ de formulaire et l'exécution de certaines opérations DOM.

7. Déterminez l'état de montage du composant : isMounted

bool isMounted()

Valeur de retour : true ou false, indiquant si le composant a été monté dans le DOM (si vous souhaitez en savoir plus, rendez-vous sur le site PHP chinois Colonne React Reference Manual pour apprendre)

La méthode

isMounted() est utilisée pour déterminer si le composant a été monté dans le DOM. Cette méthode peut être utilisée pour garantir que les appels à setState() et forceUpdate() dans des scénarios asynchrones ne se dérouleront pas mal.

3. Cycle de vie du composant React

1. Le cycle de vie d'un composant peut être divisé en trois états :

Montage : le vrai DOM a été inséré

Mise à jour : en cours de rendu

Démontage : déplacé hors du DOM réel

2. Les méthodes du cycle de vie sont :

1) componentWillMount est appelé avant le rendu, à la fois sur le client et sur le serveur.

2) componentDidMount : Appelé après le premier rendu, uniquement côté client. Ensuite, le composant a généré la structure DOM correspondante, accessible via this.getDOMNode(). Si vous souhaitez l'utiliser avec d'autres frameworks JavaScript, vous pouvez appeler setTimeout, setInterval ou envoyer des requêtes AJAX et d'autres opérations dans cette méthode (pour empêcher les opérations étrangères de bloquer l'interface utilisateur).

3) componentWillReceiveProps est appelé lorsque le composant reçoit un nouveau prop (après mise à jour). Cette méthode ne sera pas appelée lors de l’initialisation du rendu.

4) shouldComponentUpdate Renvoie une valeur booléenne. Appelé lorsque le composant reçoit de nouveaux accessoires ou un nouvel état. Non appelé lors de l'initialisation ou lors de l'utilisation de forceUpdate.
Peut être utilisé lorsque vous confirmez que vous n'avez pas besoin de mettre à jour les composants.

5) componentWillUpdate est appelé lorsque le composant reçoit de nouveaux accessoires ou un nouvel état mais n'a pas encore été rendu. Ne sera pas appelé lors de l'initialisation.

6) componentDidUpdate est appelé immédiatement après que le composant ait terminé la mise à jour. Ne sera pas appelé lors de l'initialisation.

7) componentWillUnmount est appelé immédiatement lorsque le composant est supprimé du DOM.

4.Formulaires et événements React

Exemple 1 : Nous pouvons mettre à jour l'état lorsque la valeur de la zone de saisie change. Nous pouvons utiliser l'événement onChange pour surveiller les changements d'entrée et modifier l'état.

5. React Refs

1 Utilisez la méthode

pour lier un attribut ref au retour. de la valeur de rendu :

d3bfe32e4194384353a607068085f4c8

Dans un autre code, obtenez l'instance de support via ceci. refs :

var input = this.refs.myInput;

var inputValue = input.value;

var inputRect = input.getBoundingClientRect();

2. Exemple

La zone de saisie devient active après que l'enfant clique sur le bouton.

v

ar MyComponent = React.createClass({
      handleClick: function() {
        // 使用原生的 DOM API 获取焦点
        this.refs.myInput.focus();
      },
      render: function() {
        // 当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
        return (
          <p>
            <input type="text"ref="myInput" />
            <input
              type="button"
              value="点我输入框获取焦点"
              onClick={this.handleClick}
            />
          </p>
        );
      }
    });
 
    ReactDOM.render(
      <MyComponent />,
      document.getElementById(&#39;example&#39;)
    );

Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois React User Manual colonne pour apprendre) , si vous avez des questions, vous pouvez laisser un message ci-dessous.

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!