Tutoriel de démarrage rapide ReactJs (édition essentielle)-js tutoriel-php.cn

Les frameworks front-end les plus populaires incluent désormais AngularJS, React, Bootstrap, etc. Depuis que je suis entré en contact avec ReactJS, le DOM virtuel (Virtual DOM) et le développement basé sur des composants de ReactJs m'ont profondément attiré. Expérimentons le style de ReactJs avec moi~~ L'article est un peu long, lisez-le patiemment, vous le ferez. avoir une bonne compréhension Grande récolte ~

1. Introduction à ReactJS

React est né d'un projet interne de Facebook Parce que l'entreprise n'était pas satisfaite de tous les frameworks JavaScript MVC du marché, elle a décidé de le faire. écrivez son propre ensemble en utilisant Configurons le site Web Instagram. Après l'avoir réalisé, j'ai trouvé que cet ensemble de choses était très utile, c'est pourquoi il est devenu open source en mai 2013. Parce que l'idée de conception de React est extrêmement unique, il s'agit d'une innovation révolutionnaire, offre des performances exceptionnelles et la logique du code est très simple. Par conséquent, de plus en plus de gens commencent à y prêter attention et à l’utiliser, pensant qu’il pourrait devenir l’outil principal de développement Web à l’avenir.

Adresse du site officiel de ReactJS : http://facebook.github.io/react/

Adresse Github : https://github.com/facebook /react

Tutoriel de démarrage rapide ReactJs (édition essentielle)

2. Compréhension de ReactJS et des avantages de ReactJS

Tout d'abord, il y a quelques malentendus à propos de React. ici :

React n'est pas un framework MVC complet. Il peut tout au plus être considéré comme le V (View) de MVC. Même React ne reconnaît pas pleinement le modèle de développement MVC ; -side La capacité de rendu ne peut que C'est une cerise sur le gâteau, pas son point de départ principal. En fait, le site officiel de React mentionne à peine son application côté serveur

Certaines personnes comparent React au composant Web, mais les deux ne sont pas complètement compétitifs. , vous pouvez utiliser React pour développer un vrai composant Web

React n'est pas un nouveau langage de modèle, JSX n'est qu'une représentation, et React peut fonctionner sans JSX ;

1. Le contexte et les principes de ReactJS

Dans le développement Web, nous devons toujours refléter les modifications des données dans l'interface utilisateur en temps réel, puis nous devons faire fonctionner le DOM. Les opérations DOM complexes ou fréquentes sont généralement à l'origine de goulots d'étranglement en termes de performances (la manière d'effectuer des opérations DOM complexes hautes performances est généralement un indicateur important des compétences d'un développeur front-end). React introduit à cet effet un mécanisme DOM virtuel (Virtual DOM) : un ensemble d'API DOM est implémenté côté navigateur à l'aide de Javascript. Lors du développement basé sur React, toute la construction du DOM est effectuée via le DOM virtuel. Chaque fois que les données changent, React reconstruit l'intégralité de l'arborescence DOM. Ensuite, React compare l'intégralité de l'arborescence DOM actuelle avec l'arborescence DOM précédente pour obtenir la structure DOM. alors seules les parties qui doivent changer sont mises à jour dans le DOM actuel du navigateur. De plus, React peut actualiser par lots le DOM virtuel. Deux modifications de données dans une boucle d'événement (Event Loop) seront fusionnées. Par exemple, si vous modifiez continuellement le contenu du nœud de A à B, puis de B à A, React réfléchira. que l'interface utilisateur n'a pas changé, et si elle est contrôlée manuellement, cette logique est généralement extrêmement compliquée. Bien qu'une arborescence DOM virtuelle complète doive être construite à chaque fois, étant donné que le DOM virtuel est constitué de données en mémoire, les performances sont extrêmement élevées et seule la partie Diff est exploitée sur le DOM réel, améliorant ainsi les performances. De cette manière, tout en garantissant les performances, les développeurs n'ont plus besoin de prêter attention à la manière dont une certaine modification de données est mise à jour vers un ou plusieurs éléments DOM spécifiques, mais doivent uniquement se soucier de la manière dont l'interface entière est restituée dans n'importe quel état de données.

Si vous avez écrit une page Web pure avec un rendu côté serveur comme vous l'avez fait dans les années 1990, alors sachez que tout ce que le côté serveur a à faire est de restituer le HTML en fonction des données et de l'envoyer à le navigateur. Si un certain texte de statut doit être modifié en raison d'un clic de l'utilisateur, cela peut également être fait en actualisant la page entière. Le serveur n'a pas besoin de savoir quel petit morceau de HTML a changé, mais doit simplement actualiser la page entière en fonction des données. En d’autres termes, toute modification de l’interface utilisateur s’effectue via une actualisation globale. React met ce modèle de développement au premier plan de manière performante. Chaque fois que vous mettez à jour l'interface, vous pouvez penser que la page entière a été actualisée. Quant à savoir comment effectuer des mises à jour partielles pour garantir les performances, c'est ce que le framework React doit faire.

En empruntant l'exemple de l'application de chat dans la vidéo de Facebook présentant React Lorsqu'un nouveau message arrive, l'idée de développement traditionnelle est la suivante: votre processus de développement doit savoir quelle donnée est arrivée et comment la convertir. le nouveau DOM Le nœud est ajouté à l'arborescence DOM actuelle et l'idée de développement basée sur React est celle indiquée ci-dessous. Vous n'avez qu'à vous soucier de la manière dont l'interface utilisateur change entre les deux données. On peut voir que l'utilisation de React réduit considérablement la complexité logique, ce qui signifie que la difficulté de développement est réduite et qu'il y a moins de risques de bogues.

2. Componentisation

Virtual DOM (virtual-dom) apporte non seulement une logique de développement d'interface utilisateur simple, mais apporte également l'idée de développement de composants. Les soi-disant composants sont des composants d'interface utilisateur encapsulés avec des fonctions indépendantes. React recommande de repenser la composition de l'interface utilisateur sous forme de composants, en définissant chaque module avec des fonctions relativement indépendantes sur l'interface utilisateur en tant que composant, puis en combinant ou en imbriquant de petits composants pour former de grands composants, et enfin en achevant la construction de l'interface utilisateur globale. Par exemple, l'intégralité du site instagram.com de Facebook est développée à l'aide de React. La page entière est un grand composant, qui contient un grand nombre d'autres composants imbriqués. Si vous êtes intéressé, vous pouvez jeter un œil au code qui se cache derrière.

Si l'idée de MVC vous permet de séparer le contrôleur de données de vue, alors la façon de penser basée sur les composants entraîne la séparation entre les modules fonctionnels de l'interface utilisateur. Examinons la différence entre les idées de développement MVC et de composants via une interface de commentaire de blog typique.

Pour le modèle de développement MVC, les développeurs définissent les trois en classes différentes pour parvenir à la séparation des performances, des données et du contrôle. Les développeurs divisent davantage l'interface utilisateur d'un point de vue technique pour obtenir un couplage lâche.

Pour React, c'est une idée complètement nouvelle. D'un point de vue fonctionnel, les développeurs divisent l'interface utilisateur en différents composants, et chaque composant est packagé indépendamment.

Dans React, vous organisez et écrivez votre code selon la division naturelle des modules d'interface. Pour l'interface de commentaires, l'ensemble de l'interface utilisateur est un grand composant composé de petits composants, et chaque composant ne se soucie que de ses propres parties. de logique sont indépendants les uns des autres.

Tutoriel de démarrage rapide ReactJs (édition essentielle)

React estime qu'un composant doit avoir les caractéristiques suivantes :

(1) Composable : un composant est facile à utiliser avec d'autres composants ou intégré à l'intérieur un autre composant. Si un composant crée un autre composant à l'intérieur, alors le composant parent possède le composant enfant qu'il a créé. Grâce à cette fonctionnalité, une interface utilisateur complexe peut être divisée en plusieurs composants d'interface utilisateur simples

( 2) Réutilisable : chaque composant a des composants indépendants ; fonctions et peut être utilisé dans plusieurs scénarios d'interface utilisateur ;

(3) Maintenable : chaque petit composant ne contient que sa propre logique, qui est plus facile à comprendre et à maintenir

2. Téléchargez ReactJS, écrivez Bonjour, monde

Le téléchargement de ReactJs est très simple Afin de faciliter le téléchargement à tous, il est à nouveau indiqué ici L'adresse de téléchargement est http://facebook.github.io/react/downloads.html. . Une fois le téléchargement terminé, ce que nous voyons est un package compressé. Après décompression, nous créons un nouveau fichier html et référençons les deux fichiers js réagissent.js et JSXTransformer.js. Le modèle html est le suivant (changez le chemin js par le vôtre) :

<!DOCTYPE html>
<html>
 <head>
  <script src="build/react.js"></script>
  <script src="build/JSXTransformer.js"></script>
 </head>
 <body>
  <div id="container"></div>
  <script type="text/jsx">
   // ** Our code goes here! **
  </script>
 </body>
</html>

Copier après la connexion

Vous vous demandez peut-être ici pourquoi le type de script est text/jsx. C'est à cause de React. Syntaxe JSX unique, non compatible avec JavaScript. Partout où JSX est utilisé, type="text/jsx" doit être ajouté. Deuxièmement, React fournit deux bibliothèques : react.js et JSXTransformer.js, qui doivent être chargées en premier. Parmi eux, JSXTransformer.js est utilisé pour convertir la syntaxe JSX en syntaxe JavaScript. Cette étape prend du temps et lorsqu’elle est effectivement en ligne, elle doit être réalisée sur le serveur.

Ici, nous pouvons commencer à écrire du code. Tout d'abord, découvrons la méthode React.render dans ReactJs :

React.render est la méthode la plus basique de React, utilisée pour convertir des modèles en Convertir. Langage HTML et insérez le nœud DOM spécifié.

Ci-dessous, nous écrivons du code dans la balise script pour afficher Hello et tout le monde. Le code est le suivant :

React.render(
    <h1>Hello, world!</h1>,
    document.getElementById(&#39;container&#39;)
   );

Copier après la connexion

Il convient de noter ici que React ne fonctionne pas. En nous appuyant sur jQuery, nous pouvons bien sûr utiliser jQuery, mais le deuxième paramètre du rendu doit utiliser la méthode native JavaScript getElementByID, et jQuery ne peut pas être utilisé pour sélectionner des nœuds DOM.

Ensuite, lorsque vous ouvrez cette page dans le navigateur, vous pouvez voir que le navigateur affiche un grand Hello, world, car nous avons utilisé la balise

Voici, félicitations, vous avez franchi la porte de ReactJS~~ Ensuite, apprenons-en plus sur ReactJs~~

3. Syntaxe Jsx

Langage HTML Écrit directement dans le langage JavaScript sans aucun guillemet, c'est la syntaxe de JSX, qui permet le mélange de HTML et de JavaScript. Si vous connaissez AngularJs, vous vous sentirez très familier en voyant le code suivant. :

var names = [&#39;Jack&#39;, &#39;Tom&#39;, &#39;Alice&#39;];
   React.render(
    <div>
    {
     names.map(function (name) {
      return <div>Hello, {name}!</div>
     })
    }
    </div>,
    document.getElementById(&#39;container&#39;)
   );

Copier après la connexion

Ici, nous déclarons un tableau de noms, puis parcourons et ajoutons Hello devant, et le transmettons au DOM. Le résultat de sortie est le suivant :

<🎜. >JSX vous permet de l'ajouter directement au modèle Insérer des variables JavaScript. Si cette variable est un tableau, tous les membres du tableau seront développés. Le code est le suivant :

var arr = [
    <h1>Hello world!</h1>,
    <h2>React is perfect!</h2>,
   ];
   React.render(
    <div>*{arr}*</div>,
    document.getElementById(&#39;container&#39;)
   );

Copier après la connexion

Le résultat s'affiche comme suit :

Tutoriel de démarrage rapide ReactJs (édition essentielle)

L'astérisque ici est juste pour l'identification, ne vous y trompez pas ~~

你看到这里，说明你对React还是蛮感兴趣的，恭喜你，坚持下来了，那么下面，我们开始学习React里面的"真功夫"了~~ Are　you ready?

四、ReactJS组件

1、组件属性

　　前面说了，ReactJS是基于组件化的开发，下面我们开始来学习ReactJS里面的组件，React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。

下面，我们来编写第一个组件Greet，有一个name属性，然后输出hello + name的值，代码如下：

var Greet = React.createClass({
    render: function() {
     return <h1>Hello {this.props.name}</h1>;
    }
   });
   React.render(
    <Greet name="Jack" />,
    document.getElementById(&#39;container&#39;)
   );

Copier après la connexion

看到这段代码，接触过AngularJS的朋友们是不是有一种熟悉的感觉，不过这里有几点需要注意：

　　1、获取属性的值用的是this.props.属性名

　　2、创建的组件名称首字母必须大写。

　　3、为元素添加css的class时，要用className.

　　4、组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}

2、组件状态

　　组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI 。下面我们来编写一个小例子，一个文本框和一个button，通过点击button可以改变文本框的编辑状态，禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。先看代码：

var InputState = React.createClass({
    getInitialState: function() {
     return {enable: false};
    },
    handleClick: function(event) {
     this.setState({enable: !this.state.enable});
    },
    render: function() {
     return (
      <p>
        <input type="text" disabled={this.state.enable} />
        <button onClick={this.handleClick}>Change State</button>
      </p>
     );
    }
   });
   React.render(
    <InputState />,
    document.getElementById(&#39;container&#39;)
   );

Copier après la connexion

这里，我们又使用到了一个方法getInitialState,这个函数在组件初始化的时候执行，必需返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值，这里我们将enable这个值跟input的disabled绑定，当要修改这个属性值时，要使用setState方法。我们声明handleClick方法，来绑定到button上面，实现改变state.enable的值.效果如下：

Tutoriel de démarrage rapide ReactJs (édition essentielle)

原理分析：

　　当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

这里值得注意的几点如下：

　　1、getInitialState函数必须有返回值，可以是NULL或者一个对象。

　　2、访问state的方法是this.state.属性名。

　　3、变量用{}包裹，不需要再加双引号。

3、组件的生命周期　　

组件的生命周期分成三个状态：

Mounting：已插入真实 DOM

Updating：正在被重新渲染

Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

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

Copier après la connexion

此外，React 还提供两种特殊状态的处理函数。

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

下面来看一个例子：

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 (
     <div style={{opacity: this.state.opacity}}>
      Hello {this.props.name}
     </div>
    );
   }
  });
  React.render(
   <Hello name="world"/>,
   document.body
  );

Copier après la connexion

上面代码在hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。

4、组件的嵌套

　　React是基于组件化的开发，那么组件化开发最大的优点是什么？毫无疑问，当然是复用，下面我们来看看React中到底是如何实现组件的复用的，这里我们还写一个例子来说吧，代码如下：

var Search = React.createClass({
    render: function() {
     return (
      <div>
        {this.props.searchType}:<input type="text" />
        <button>Search</button>
      </div>
     );
    }
   });
   var Page = React.createClass({
    render: function() {
     return (
      <div>
        <h1>Welcome!</h1>
        <Search searchType="Title" />
        <Search searchType="Content" />
      </div>
     );
    }
   });
   React.render(
    <Page />,
    document.getElementById(&#39;container&#39;)
   );

Copier après la connexion

这里我们创建了一个Search组件，然后又创建了一个Page组件，然后我们在Page组件中调用Search组件，并且调用了两次，这里我们通过属性searchType传入值，最终显示结果如图：

Tutoriel de démarrage rapide ReactJs (édition essentielle)

五、ReactJs小结

关于ReactJS今天就先学习到这里了，下面来总结一下，主要有以下几点：

　　1、ReactJs是基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。

　　2、可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件(留给大家研究)；要对某些值的变化做DOM操作的，要把这些值放到state中。

　3. Lors de l'ajout de styles CSS externes aux composants, le nom de la classe doit être écrit sous la forme className au lieu de class ; lors de l'ajout de styles internes, il doit être style={{opacity: this.state.opacity}} au lieu de style=. "opacité :{this.state.opacity} ;".

4. La première lettre du nom du composant doit être en majuscule.

5. Les noms de variables doivent être entourés de {} et ne peuvent pas être placés entre guillemets doubles.

Ce qui précède est le tutoriel de démarrage rapide de ReactJs (version essence) présenté par l'éditeur. J'espère qu'il vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra. dans le temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour plus d'articles sur le didacticiel de démarrage rapide ReactJs (Essential Edition), veuillez faire attention au site Web PHP chinois !