Quelles sont les fonctions de réagir ? Analyse détaillée de la fonction de réaction (avec exemples)

Cet article parle principalement de la façon d'apprendre réagir Jetons maintenant un coup d'œil au contenu principal de l'article

React est essentiellement une bibliothèque JavaScript.

Il incarne l'idée de séparation du recto et du verso, transférant une partie du travail d'assemblage de la page au navigateur contrairement aux fichiers JSP, la mise en page et les données de remplissage sont envoyées au navigateur ; une fois que le serveur l'a terminé.

Cela présente naturellement de nombreux avantages : Premièrement, React encapsule DOM et JavaScript dans des modules (composants). De plus, les composants peuvent également simplifier les tests et la séparation des problèmes. Deuxièmement, lorsque les données changent, React peut automatiquement mettre à jour l'interface utilisateur et mettre à jour uniquement les parties qui doivent être mises à jour.

Fonction principale 1 : rendre

La fonction de cette fonction est de fournir un module, qui est comme un bloc de construction Lego utilisé pour assembler la page.

Exemple simple : (Le code html est donné en premier, et le code JSX est donné plus tard. JSX signifie JavaScript+XML)

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/ReactDOM.render(
    <p>Hello, world!</p>,
    document.getElementsByClassName(&#39;firstContainer&#39;)[0]
);

Vous pouvez voir que la classe est firstContainer Le contenu de p a été remplacé par le code que nous avons écrit dans render : hello world !

De plus, document.getElementsByClassName('firstContainer')[0] peut être remplacé par n'importe quel JavaScript natif pour en obtenir un seul (doit être un nœud, donc si vous utilisez une méthode comme document.getElementsByClassName, vous devez ajouter Au-dessus de [n]) **Les méthodes d'éléments DOM : document.getElementById ou document.getElementsByTagName, etc. sont acceptables.

Pour un exemple plus complexe, nous pouvons développer le e388a4556c0f65e1904146cc1a846beeHello, world!94b3e26ee717c64999d7867364b1b4a3 ici.

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/var name = "Emily";
ReactDOM.render(
  <p>
  {
    (function(){        return <p>Hello, {name}!</p>
    })()
  }
  </p>,
  document.getElementById(&#39;container&#39;)
);

Nous pouvons voir la magie de la syntaxe JSX. Dans le code, on peut dire que JS et DOM sont mélangés. Les règles de syntaxe de base de JSX : lorsque vous rencontrez des balises HTML (commençant par <), utilisez les règles HTML pour analyser ; lorsque vous rencontrez des blocs de code (commençant par {), utilisez les règles JavaScript pour analyser ;

Fonction principale 2 : React.createClass

Cette fonction nous permet de définir nous-mêmes les composants requis. Les composants définis peuvent être utilisés directement dans la fonction de rendu sous forme de balises comme p.

Un simple marron :

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/var HelloWorldBox = React.createClass({
  render: function() {    return (
      <p className="helloWorldBox">
        Hello, world! I am a helloWorldBox.
      </p>
    );
  }
});
ReactDOM.render(
  <HelloWorldBox />,
  document.getElementById(&#39;container&#39;)
);

Dans ce marron, HelloWorldBox est le composant le plus simple.

Nous pouvons également obtenir plus d'informations sur ce composant. Par exemple, utilisez props

(exemple du site officiel de React)

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/var Comment = React.createClass({
  render: function() {    return (
      <p className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </p>
    );
  }
});var CommentList = React.createClass({
  render: function() {    return (
      <p className="commentList">
        <Comment author="Pete Hunt">This is one comment</Comment>
        <Comment author="Jordan Walke">This is *another* comment</Comment>
      </p>
    );
  }
});
ReactDOM.render(
  <CommentList />,
  document.getElementById(&#39;container&#39;)
);

Dans cet exemple, nous utilisons la méthode React.createClass pour créer deux composants. Nous pouvons le voir dans le composant. CommentList , Comment est imbriqué : c'est-à-dire que CommentList est composée de plusieurs commentaires. Nous définissons un attribut pour Comment dans CommentList : author. Ensuite, dans le composant Comment, vous pouvez lire cette propriété via {this.props.author}, et via {this.props.children}, vous pouvez lire les nœuds enfants de ce composant.

Accéder aux données externes :

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/var Comment = React.createClass({
  render: function() {    return (
      <p className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </p>
    );
  }
});var names = [&#39;Alice&#39;, &#39;Emily&#39;, &#39;Kate&#39;];
ReactDOM.render(
  <p>
  {
    names.map(function (name) {      return <Comment author={name}>is an author~</Comment>
    })
  }
  </p>,
  document.getElementById(&#39;container&#39;)
);

Ici, les noms de tableaux sont des données externes. Nous intégrons ces données dans le DOM de la page Web en créant des composants.

État du composant

Chaque composant a une propriété : state Les développeurs peuvent changer l'état du composant en appelant this.setState(). Lorsque l'état est mis à jour, le composant se restituera. L'état et les accessoires sont des caractéristiques d'un composant, mais la différence est que les accessoires restent inchangés, mais l'état peut être modifié.

getInitialState() peut définir l'état d'initialisation du composant. Cette fonction n'est exécutée qu'une seule fois dans le cycle de vie du composant.

État de la mise à jour :

Remarque : La fonction componentDidMount est la fonction de cycle de vie du composant. Il s'agit d'une méthode que React appelle automatiquement lorsque le composant est rendu, qui sera discutée en détail plus tard. .

var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function() {
    return (
      <p className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
      </p>
    );
  }
});

Dans cette châtaigne, nous obtenons des données via ajax et définissons les données obtenues sur this.state.data via la fonction this.setState. Ensuite, dans la CommentList, définissez data={this.state.data} pour afficher les données obtenues du serveur. (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois Colonne React Reference Manual pour en savoir)

Cycle de vie des composants

Le cycle de vie des composants est divisé dans les trois types suivants :

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

2. Mise à jour : en cours de rendu

3. Démontage : déjà sortir du DOM réel

Dans le cycle de vie du composant, les fonctions de cycle de vie seront automatiquement appelées. Ce sont :

componentWillMount()componentDidMount()componentWillUpdate(object nextProps, object nextState)componentDidUpdate(object prevProps, object prevState)componentWillUnmount()

De plus, il existe deux fonctions spéciales de traitement des statuts :

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

La châtaigne suivante provient du blog de Maître Ruan Yifeng :

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },
  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;      if (opacity < 0.1) {
        opacity = 1.0;
      }      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },
 render: function () {
    return (
      <p style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </p>
    );
  }
});
ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

La fonction composantDidMount est appelée après l'insertion du composant dans le DOM réel. Dans cette fonction, nous définissons une minuterie pour modifier la transparence toutes les 100 millisecondes jusqu'à ce que le composant soit complètement transparent, puis définissons la transparence sur 1 (la transparence initiale). la transparence est définie sur 1). De cette façon, ce composant est constamment restitué. De cette façon, nous obtenons une chaîne Hello World clignotante sur la page. Si nous écrivons la fonction :

componentDidUpdate:function(){
    console.log("did update");
}

nous pouvons voir une sortie continue sur la console.

React est essentiellement une bibliothèque JavaScript.

Il incarne l'idée de séparation du recto et du verso, transférant une partie du travail d'assemblage de la page au navigateur contrairement aux fichiers JSP, la mise en page et les données de remplissage sont envoyées au navigateur ; une fois que le serveur l'a terminé.

Cela présente naturellement de nombreux avantages : Premièrement, React encapsule DOM et JavaScript dans des modules (composants). De plus, les composants peuvent également simplifier les tests et la séparation des problèmes. Deuxièmement, lorsque les données changent, React peut automatiquement mettre à jour l'interface utilisateur et mettre à jour uniquement les parties qui doivent être mises à jour.

Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois React User Manual pour en savoir plus. 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!