Comment fonctionne la réaction ? Une introduction détaillée au principe de fonctionnement de React

Cet article parle principalement de l'introduction du principe de fonctionnement de React. Le contenu inclut le processus spécifique du principe de fonctionnement. Lisons maintenant cet article ensemble

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 Quelle 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é. pour en écrire un à l'aide de Let's set up the Instagram website. 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.

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

Tout d'abord, il y a quelques malentendus à propos de React. Résumons-les 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 ; 🎜>

  La capacité de rendu côté serveur de React ne peut être considérée que comme une cerise sur le gâteau, et non comme son point de départ principal. En fait, le site officiel de React mentionne à peine son application côté serveur ;
• Certaines personnes utilisent React. C'est comparable au Web Component, mais les deux ne sont pas complètement compétitifs. Vous pouvez utiliser React pour développer un vrai Web Component

• React est ; ce n'est pas un nouveau langage de modèle, JSX n'est qu'une représentation selon laquelle React peut fonctionner sans JSX.

• 1. Contexte et 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. modifier le fonctionnement du 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 le 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. Et React peut actualiser par lots le DOM virtuel, dans une boucle d'événements (Event Les deux modifications de données au sein de la boucle seront fusionnées. Par exemple, si vous modifiez continuellement le contenu du nœud de A à B, puis de B à A, React pensera que l'interface utilisateur n'a pas changé du tout, et si elle est contrôlée. manuellement, cette logique est généralement extrêmement complexe. 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 au 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 constater 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

Le DOM virtuel (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. Ce qu'on appelle le composant signifie l'encapsulation de composants d'interface utilisateur. 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 parties. de logique sont indépendants les uns des autres.

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

(1) Composable : un composant est facile à utiliser avec d'autres composants, ou imbriqué dans 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 de tout le monde, voici l'adresse de téléchargement 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) :

nbsp;html>
  
    <script></script>
    <script></script>
  
  
    <p></p>
    <script>
      // ** Our code goes here! **
    </script>
  

Vous vous demandez peut-être pourquoi le type de script est text/jsx. C'est parce que la syntaxe JSX unique de React est incompatible 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 JavaScript grammaire. Cette étape prend beaucoup de temps et doit être effectuée sur le serveur lorsqu'il est réellement en ligne. (Si vous voulez en savoir plus, rendez-vous sur le site Web PHP chinois React Reference Manual pour en savoir plus)

Ici, nous pouvons commencer à écrire du code. Tout d'abord, commençons. pour se connaître. Jetons un coup d'œil à la méthode React.render dans ReactJs :

React.render est la méthode la plus basique de React, qui est utilisée pour convertir le modèle en langage HTML et insérer le DOM spécifié. nœud.

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

React.render(        <h1 id="Hello-world">Hello, world!</h1>,
        document.getElementById('container')
      );

.

Il convient de noter ici que React ne repose pas sur jQuery. Bien sûr, nous pouvons utiliser jQuery, mais le deuxième paramètre de 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

À ce stade, 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 = ['Jack', 'Tom', 'Alice'];

      React.render(        <p>
        {
          names.map(function (name) {            return </p><p>Hello, {name}!</p>          })
        }        ,
        document.getElementById('container')
      );这里我们声明了一个names数组，然后遍历在前面加上Hello,输出到DOM中，输出结果如下：

JSX permet d'insérer des variables JavaScript directement dans les modèles. Si cette variable est un tableau, tous les membres du tableau seront développés. Le code est le suivant :

var arr = [        <h1 id="Hello-world">Hello world!</h1>,
        <h2 id="React-is-perfect">React is perfect!</h2>,      ];
      React.render(        <p>*{arr}*</p>,
        document.getElementById('container')
      );

Le résultat affiché est le suivant :

L'étoile ici Le numéro est juste pour le logo, ne vous y trompez pas~~

Si vous voyez cela, cela signifie que vous êtes très intéressé par React. Félicitations, vous avez persisté. commencez à apprendre React La « vraie compétence » à l'intérieur ~~ Êtes-vous prêt ?

 四、ReactJS组件

1、组件属性 

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

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

var Greet = React.createClass({
        render: function() {          return <h1 id="Hello-this-props-name">Hello {this.props.name}</h1>;        }
      });

      React.render(        <greet></greet>,
        document.getElementById('container')
      );

看到这段代码，接触过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>
               <button>Change State</button>
            </p>          );
        }
      });

      React.render(        <inputstate></inputstate>,
        document.getElementById('container')
      );

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

原理分析：

 　　当用户点击组件，导致状态变化，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()

此外，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 
              Hello {this.props.name}                      );
        }
      });

      React.render(        <hello></hello>,        document.body
      );

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

4、组件的嵌套

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

var Search = React.createClass({
        render: function() {          return (            <p>
               {this.props.searchType}:<input>
               <button>Search</button>
            </p>          );
        }
      });      var Page = React.createClass({
        render: function() {          return (            <p>
               </p><h1 id="Welcome">Welcome!</h1>
               <search></search>
               <search></search>
                      );
        }
      });
      React.render(        <page></page>,
        document.getElementById('container')
      );

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

 五、ReactJs小结

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

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

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

　　3、为组件添加外部css样式时，类名应该写成className而不是class;添加内部样式时，应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。

　　4、组件名称首字母必须大写。

　　5、变量名用{}包裹，且不能加双引号。

 六、ReactJS优缺点

优点：

React est très rapide

Par rapport à d'autres frameworks, React adopte une manière unique de faire fonctionner le DOM.
Il n'opère pas directement sur le DOM.
Il introduit un concept appelé DOM virtuel, qui s'insère entre la logique JavaScript et le DOM réel.
Ce concept améliore les performances web. Pendant le processus de rendu de l'interface utilisateur, React implémente des mises à jour partielles du DOM réel via des micro-opérations dans le DOM virtuel.

Compatibilité entre navigateurs
Le DOM virtuel nous aide à résoudre les problèmes entre navigateurs. Il nous fournit une API standardisée, même dans IE8.

Modularisation
Écrivez des composants d'interface utilisateur modulaires indépendants pour votre programme, de sorte qu'en cas de problème avec un ou plusieurs composants, vous puissiez facilement l'isoler.
Chaque composant peut être développé et testé indépendamment, et ils peuvent importer d'autres composants. Cela équivaut à une meilleure maintenabilité du code.
Le flux de données unidirectionnel rend les choses claires
Flux est une architecture permettant de créer une couche de données unidirectionnelle dans les applications JavaScript, conceptualisée par Facebook avec le développement de la bibliothèque de vues React. Il s'agit simplement d'un concept, pas de la mise en œuvre d'un outil spécifique. Il peut être absorbé par d’autres frameworks. Par exemple, Alex Rattray a une belle instance Flux qui utilise les collections et les modèles de Backbone dans React.
JavaScript pur
Les applications Web modernes fonctionnent différemment des applications Web traditionnelles.
Par exemple, les mises à jour de la couche de vue nécessitent une interaction de l'utilisateur sans demander au serveur. La vue et le contrôleur dépendent donc beaucoup l’un de l’autre.
De nombreux frameworks utilisent des moteurs de modèles comme Guidon ou Moustache pour gérer la couche de vue. Mais React estime que les vues et les contrôleurs devraient dépendre les uns des autres plutôt que d'utiliser des moteurs de modèles tiers et, plus important encore, il s'agit d'un programme purement JavaScript.
JavaScript isomorphe

Le plus gros inconvénient des applications JS monopage est qu'elles ont de grandes limitations en matière d'indexation des moteurs de recherche. React a une solution pour cela.
React peut pré-rendre les applications sur le serveur puis les envoyer au client. Il peut restaurer le même enregistrement à partir d'un contenu statique pré-rendu dans des applications dynamiques.
Étant donné que les robots des moteurs de recherche s'appuient sur des réponses côté serveur plutôt que sur l'exécution de JavaScript, le pré-rendu de votre application facilite le référencement.
React a une bonne compatibilité avec d'autres frameworks/bibliothèques
Par exemple, RequireJS est utilisé pour le chargement et l'empaquetage, tandis que Browserify et Webpack conviennent à la création de grandes applications. Ils rendent ces tâches difficiles moins ardues.

Inconvénients ?

React lui-même n'est qu'un V, donc si vous voulez un framework complet pour un grand projet, vous devrez peut-être également introduire des éléments liés à Flux et au routage.

La plupart des pièges n'ont pas été éliminés

Cet article se termine ici (vous voulez lire Apprenez-en plus sur le site Web PHP chinois React User Manual colonne). 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!