Wie funktioniert reagieren? Eine detaillierte Einführung in das Funktionsprinzip von React

In diesem Artikel geht es hauptsächlich um das Funktionsprinzip von React. Der Inhalt umfasst den spezifischen Prozess des Arbeitsprinzips.

Zu den beliebtesten Front-End-Frameworks gehören jetzt AngularJS, React. Bootstrap usw. Seit ich mit ReactJS in Kontakt gekommen bin, haben mich das virtuelle DOM (Virtual DOM) und die komponentenbasierte Entwicklung von ReactJs sehr angezogen. Lassen Sie uns mit mir den Stil von ReactJs erleben ~~ Der Artikel ist etwas lang, lesen Sie ihn geduldig Ich habe ein großes Verständnis. Tolle Ernte Schreiben Sie ein eigenes Set mit „Lass uns die Instagram-Website einrichten“. Nachdem ich es erstellt hatte, stellte ich fest, dass diese Reihe von Dingen sehr nützlich ist, und so wurde sie im Mai 2013 als Open Source veröffentlicht. Da die Designidee von React äußerst einzigartig ist, handelt es sich um eine revolutionäre Innovation, eine hervorragende Leistung und eine sehr einfache Codelogik. Daher beginnen immer mehr Menschen, darauf zu achten und es zu nutzen, weil sie glauben, dass es in Zukunft das Mainstream-Tool für die Webentwicklung sein könnte.

2. Verständnis von ReactJS und den Vorteilen von ReactJS

Zunächst einmal gibt es einige Missverständnisse über React. Fassen wir sie hier zusammen:

React ist kein vollständiges MVC-Framework. Es kann höchstens als V (View) in MVC betrachtet werden. Selbst React erkennt das MVC-Entwicklungsmodell nicht vollständig 🎜>

Die serverseitige Renderfähigkeit von React kann nur als Sahnehäubchen betrachtet werden, nicht als zentraler Ausgangspunkt. Tatsächlich wird die Anwendung auf der Serverseite kaum erwähnt

• Manche Leute verwenden React It ist mit Web Component vergleichbar, aber die beiden sind nicht vollständig konkurrenzfähig. Sie können React verwenden, um eine echte Webkomponente zu entwickeln.

• React ist JSX ist keine neue Vorlagensprache, sondern lediglich eine Darstellung, dass React ohne JSX funktionieren kann.

• 1. Der Hintergrund und die Prinzipien von ReactJS
  In der Webentwicklung müssen wir die sich ändernden Daten immer in Echtzeit auf der Benutzeroberfläche widerspiegeln Sie müssen die DOM-Funktion ändern. Komplexe oder häufige DOM-Vorgänge sind in der Regel die Ursache für Leistungsengpässe (die Durchführung komplexer DOM-Vorgänge mit hoher Leistung ist normalerweise ein wichtiger Indikator für die Fähigkeiten eines Front-End-Entwicklers). React führt zu diesem Zweck einen virtuellen DOM-Mechanismus (Virtual DOM) ein: Eine Reihe von DOM-APIs wird auf der Browserseite mithilfe von Javascript implementiert. Bei der Entwicklung auf Basis von React wird die gesamte DOM-Konstruktion über das virtuelle DOM durchgeführt. Immer wenn sich die Daten ändern, vergleicht React den aktuellen gesamten DOM-Baum mit dem vorherigen DOM-Baum, um die DOM-Struktur zu erhalten dann werden nur die Teile, die geändert werden müssen, im eigentlichen Browser-DOM aktualisiert. Und React kann das virtuelle DOM in einer Ereignisschleife (Event Die beiden Datenänderungen innerhalb der Schleife werden zusammengeführt. Wenn Sie beispielsweise den Knoteninhalt kontinuierlich von A nach B und dann von B nach A ändern, geht React davon aus, dass sich die Benutzeroberfläche nicht geändert hat , diese Diese Logik ist normalerweise äußerst komplex. Obwohl jedes Mal ein vollständiger virtueller DOM-Baum erstellt werden muss, ist die Leistung extrem hoch, da das virtuelle DOM aus Speicherdaten besteht und nur der Diff-Teil auf dem tatsächlichen DOM ausgeführt wird, wodurch die Leistung verbessert wird. Auf diese Weise müssen Entwickler bei gleichzeitiger Sicherstellung der Leistung nicht mehr darauf achten, wie eine bestimmte Datenänderung auf ein oder mehrere spezifische DOM-Elemente aktualisiert wird, sondern müssen sich nur noch darum kümmern, wie die gesamte Schnittstelle in jedem Datenstatus gerendert wird.

Wenn Sie wie in den 1990er Jahren eine reine Webseite mit serverseitigem Rendering geschrieben haben, sollten Sie wissen, dass die Serverseite lediglich HTML basierend auf den Daten rendern und an den Browser senden muss. Wenn aufgrund eines Benutzerklicks ein bestimmter Statustext geändert werden muss, kann dies auch durch eine Aktualisierung der gesamten Seite erfolgen. Der Server muss nicht wissen, welches kleine Stück HTML sich geändert hat, sondern muss lediglich die gesamte Seite basierend auf den Daten aktualisieren. Mit anderen Worten: Alle Änderungen an der Benutzeroberfläche werden durch eine Gesamtaktualisierung vorgenommen. React bringt dieses Entwicklungsmodell auf leistungsstarke Weise ins Frontend. Jedes Mal, wenn Sie die Benutzeroberfläche aktualisieren, können Sie davon ausgehen, dass die gesamte Seite aktualisiert wurde. Das React-Framework muss Teilaktualisierungen durchführen, um die Leistung sicherzustellen.

Ausleihen des Beispiels der Chat-Anwendung im Video zur Einführung von React. Wenn eine neue Nachricht eingeht, muss Ihr Entwicklungsprozess wissen, welche Daten eingegangen sind und wie sie konvertiert werden sollen Der neue DOM-Knoten wird dem aktuellen DOM-Baum hinzugefügt. Die auf React basierende Entwicklungsidee ist lediglich dem Framework überlassen. Es ist ersichtlich, dass die Verwendung von React die Komplexität der Logik erheblich reduziert, was bedeutet, dass die Entwicklungsschwierigkeiten verringert werden und weniger Möglichkeiten für das Auftreten von Fehlern bestehen.

2. Komponentisierung

Virtual DOM (Virtual-Dom) bringt nicht nur eine einfache UI-Entwicklungslogik mit sich, sondern bringt auch die Idee der Komponentenentwicklung mit sich mit unabhängigen Funktionen. React empfiehlt, die Zusammensetzung der Benutzeroberfläche in Form von Komponenten zu überdenken, jedes Modul mit relativ unabhängigen Funktionen auf der Benutzeroberfläche als Komponente zu definieren, dann kleine Komponenten zu großen Komponenten zu kombinieren oder zu verschachteln und schließlich den Aufbau der gesamten Benutzeroberfläche abzuschließen. Beispielsweise wird die gesamte instagram.com-Website mit React entwickelt. Die gesamte Seite ist eine große Komponente, die eine große Anzahl weiterer verschachtelter Komponenten enthält. Wenn Sie interessiert sind, können Sie sich den Code dahinter ansehen.

Wenn die Idee von MVC es ermöglicht, den View-Data-Controller zu trennen, dann führt die komponentenbasierte Denkweise zu einer Trennung zwischen UI-Funktionsmodulen. Schauen wir uns den Unterschied zwischen MVC- und Komponentenentwicklungsideen anhand einer typischen Blog-Kommentaroberfläche an.

Für das MVC-Entwicklungsmodell definieren Entwickler die drei in verschiedene Klassen, um die Trennung von Leistung, Daten und Kontrolle zu erreichen. Entwickler teilen die Benutzeroberfläche aus technischer Sicht stärker auf, um eine lose Kopplung zu erreichen.

Für React ist es eine völlig neue Idee. Aus funktionaler Sicht unterteilen Entwickler die Benutzeroberfläche in verschiedene Komponenten, und jede Komponente wird unabhängig verpackt.

In React organisieren und schreiben Sie Ihren Code gemäß der natürlichen Aufteilung der Schnittstellenmodule. Bei der Kommentarschnittstelle handelt es sich um eine große Komponente, die aus kleinen Komponenten besteht, und jede Komponente kümmert sich nur um sich selbst der Logik sind voneinander unabhängig.

React glaubt, dass eine Komponente die folgenden Eigenschaften haben sollte:

(1) Zusammensetzbar: Eine Komponente lässt sich einfach zusammen mit anderen Komponenten verwenden oder in einer anderen Komponente verschachteln. Wenn eine Komponente eine andere Komponente erstellt, ist die übergeordnete Komponente Eigentümerin der von ihr erstellten untergeordneten Komponente. Durch diese Funktion kann eine komplexe Benutzeroberfläche in mehrere einfache UI-Komponenten aufgeteilt werden.

(2) Wiederverwendbar: Jede Komponente ist unabhängig Funktionen und können in mehreren UI-Szenarien verwendet werden; (3) Wartbar: Jede kleine Komponente enthält nur ihre eigene Logik, die einfacher zu verstehen und zu warten ist

2. Laden Sie ReactJS herunter, schreiben Sie Hallo, Welt

Das Herunterladen von ReactJs ist sehr einfach. Um das Herunterladen für alle zu erleichtern, finden Sie hier die Download-Adresse http://facebook.github.io/react/downloads.html. Nach Abschluss des Downloads sehen wir ein komprimiertes Paket . Nach der Dekomprimierung erstellen wir eine neue HTML-Datei und verweisen auf die beiden JS-Dateien „react.js“ und „JSXTransformer.js“. Die HTML-Vorlage lautet wie folgt (ändern Sie den js-Pfad in Ihren eigenen):

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

Sie fragen sich hier vielleicht, warum der Skripttyp text/jsx ist. Dies liegt daran, dass die einzigartige JSX-Syntax von React nicht mit JavaScript kompatibel ist. Überall dort, wo JSX verwendet wird, muss type="text/jsx" hinzugefügt werden. Zweitens stellt React zwei Bibliotheken bereit: React.js und JSXTransformer.js, die zuerst geladen werden müssen. Unter anderem wird JSXTransformer.js verwendet, um die JSX-Syntax in JavaScript zu konvertieren Grammatik. Dieser Schritt ist zeitaufwändig und sollte, wenn er tatsächlich online ist, auf dem Server abgeschlossen werden. (Wenn Sie mehr sehen möchten, besuchen Sie die Spalte „React Reference Manual“ der PHP-Website, um mehr zu erfahren) Hier können wir mit dem Schreiben von Code beginnen einander kennenzulernen. Werfen wir einen Blick auf die React.render-Methode in ReactJs:

React.render ist die grundlegendste Methode von React, die zum Konvertieren der Vorlage in die HTML-Sprache und zum Einfügen des angegebenen DOM verwendet wird Knoten.

Unten schreiben wir Code in das Skript-Tag, um Hallo Welt auszugeben. Der Code lautet wie folgt:

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

Hier ist zu beachten, dass React nicht auf jQuery basiert. Natürlich können wir jQuery verwenden, aber der zweite Parameter in render muss die JavaScript-native getElementByID-Methode verwenden, und jQuery kann nicht zum Auswählen von DOM-Knoten verwendet werden.

Wenn Sie diese Seite dann im Browser öffnen, können Sie sehen, dass der Browser ein großes „Hallo Welt“ anzeigt, da wir das Tag

verwendet haben.

Herzlichen Glückwunsch, Sie haben die Tür von ReactJS betreten~~ Lassen Sie uns als Nächstes mehr über ReactJs~~ erfahren

3. Jsx-Syntax

HTML-Sprache Geschrieben direkt in der JavaScript-Sprache ohne Anführungszeichen, dies ist die Syntax von JSX, die die Mischung von HTML und JavaScript ermöglicht. Wenn Sie AngularJs kennen, werden Sie sich sehr vertraut fühlen, wenn Sie den folgenden Code sehen :

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 ermöglicht das direkte Einfügen von JavaScript-Variablen in Vorlagen. Wenn diese Variable ein Array ist, werden alle Mitglieder des Arrays erweitert. Der Code lautet wie folgt:

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

Das Anzeigeergebnis lautet wie folgt:

Das Sternchen hier ist nur Es wird zum Erstellen von Logos verwendet, lassen Sie sich nicht verwirren.

Wenn Sie das sehen, bedeutet das, dass Sie sehr an React interessiert sind Fangen Sie an, React zu lernen. „Echtes Kungfu“~~ Sind Sie bereit?

 四、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></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>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 ist sehr schnell

Im Vergleich zu anderen Frameworks verwendet React eine einzigartige Art, DOM zu betreiben.
Es funktioniert nicht direkt auf dem DOM.
Es führt ein Konzept namens virtuelles DOM ein, das zwischen der JavaScript-Logik und dem tatsächlichen DOM eingefügt wird.
Dieses Konzept verbessert die Webleistung. Während des UI-Rendering-Prozesses implementiert React teilweise Aktualisierungen des tatsächlichen DOM durch Mikrooperationen im virtuellen DOM.

Browserübergreifende Kompatibilität
Virtual DOM hilft uns, browserübergreifende Probleme zu lösen. Es stellt uns eine standardisierte API zur Verfügung, sogar in IE8.

Modularisierung
Schreiben Sie unabhängige modulare UI-Komponenten für Ihr Programm, sodass Sie bei einem Problem mit einer oder mehreren Komponenten dieses leicht isolieren können.
Jede Komponente kann unabhängig entwickelt und getestet werden und es können andere Komponenten importiert werden. Dies führt zu einer verbesserten Wartbarkeit des Codes.
Einseitiger Datenfluss macht die Dinge klar
Flux ist eine Architektur zum Erstellen einer unidirektionalen Datenschicht in JavaScript-Anwendungen, die von Facebook zusammen mit der Entwicklung der React-Ansichtsbibliothek konzipiert wurde. Es handelt sich lediglich um ein Konzept, nicht um die Implementierung eines bestimmten Tools. Es kann von anderen Frameworks übernommen werden. Zum Beispiel Alex Rattray hat eine schöne Flux-Instanz, die die Sammlungen und Modelle von Backbone in React nutzt.
Reines JavaScript
Moderne Webanwendungen funktionieren anders als herkömmliche Webanwendungen.
Aktualisierungen der Ansichtsebene erfordern beispielsweise eine Benutzerinteraktion, ohne den Server anzufordern. Ansicht und Controller sind also stark voneinander abhängig.
Viele Frameworks verwenden Template-Engines wie „Lenkers“ oder „Mustache“, um die Ansichtsebene zu verwalten. Aber React ist der Ansicht, dass Ansichten und Controller voneinander abhängen sollten, anstatt Template-Engines von Drittanbietern zu verwenden, und, was am wichtigsten ist, es ist ein reines JavaScript-Programm.
Isomorphes JavaScript

Der größte Nachteil von Single-Page-JS-Anwendungen besteht darin, dass sie große Einschränkungen bei der Suchmaschinenindizierung haben. React hat hierfür eine Lösung.
React kann Anwendungen auf dem Server vorab rendern und sie dann an den Client senden. Es kann denselben Datensatz aus vorgerenderten statischen Inhalten in dynamischen Anwendungen wiederherstellen.
Da Suchmaschinen-Crawler auf serverseitige Antworten und nicht auf die Ausführung von JavaScript angewiesen sind, hilft das Vorrendern Ihrer Anwendung bei der Suchmaschinenoptimierung.
React ist gut mit anderen Frameworks/Bibliotheken kompatibel
RequireJS wird beispielsweise zum Laden und Packen verwendet, während Browserify und Webpack zum Erstellen großer Anwendungen geeignet sind. Sie machen diese schwierigen Aufgaben weniger entmutigend.

Nachteile?

React selbst ist nur ein V. Wenn Sie also ein vollständiges Framework für ein großes Projekt wünschen, müssen Sie möglicherweise auch Dinge im Zusammenhang mit Flux und Routing einführen.

Die meisten Fallstricke wurden nicht beseitigt

Dieser Artikel endet hier (möchte lesen). Weitere Informationen finden Sie in der Spalte React-Benutzerhandbuch der PHP-Website. Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen.

Das obige ist der detaillierte Inhalt vonWie funktioniert reagieren? Eine detaillierte Einführung in das Funktionsprinzip von React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!