1. Einführung in Reactjs
React ist in letzter Zeit ein sehr beliebter Front-End-Entwicklungsrahmen. React stammte aus den internen Projekten von Facebook, da das Unternehmen mit allen JavaScript -MVC -Frameworks auf dem Markt nicht zufrieden war. Daher beschloss es, einen eigenen Satz zu schreiben, um eine Instagram -Website einzurichten. Nachdem ich es geschafft hatte, stellte ich fest, dass diese Set von Dingen sehr nützlich war und im Mai 2013 eröffnet wurde. Da die Designidee von React äußerst einzigartig ist, ist sie revolutionär und innovativ, mit hervorragender Leistung, aber seine Codelogik ist sehr einfach. Daher fangen immer mehr Menschen an, darauf zu achten und zu nutzen.
ReactJS Offizielle Website -Adresse: http://facebook.github.io/react/
GitHub -Adresse: https://github.com/facebook/react
Reactjs chinesische Adresse: http://reactjs.cn/react/docs/getting-started.html
Was ist reagiert?
React ist eine JS -Bibliothek, die von herausragenden Programmierern entwickelt wurde, die auf Facebook arbeiten, um Benutzerinteraktionsschnittstellen zu entwickeln. Sein Quellcode wird von exzellenten Programmierern von Facebook und der Community gepflegt, sodass er ein sehr starkes technisches Team hinter sich hat, um technische Unterstützung zu bieten. React bringt viele neue Dinge mit, z. B. Komponentierungen, JSX, virtuelles DOM usw. Das virtuelle DOM, das es bietet, macht unsere Rendering -Komponenten sehr schnell und befreit uns von der starken Arbeit, die DOM häufig zu betreiben. Jeder, der React weiß, weiß, dass es sich mehr auf die V -Schicht in MVC konzentriert. In Kombination mit anderen Dingen wie Fluss können Sie problemlos leistungsstarke Anwendungen erstellen.
2. Reactjs Merkmale
1. Virtual Dom
Durch den DOM -Diff -Algorithmus werden nur differenzierte Teile aktualisiert, ohne die gesamte Seite zu rendern, wodurch die Effizienz verbessert wird
2. Komponentierung
Teilen Sie die Seite in mehrere Komponenten, einschließlich logischer Strukturen und Stile
Komponenten enthalten nur ihre eigene Logik, die bei der Aktualisierung von Komponenten vorhergesagt werden kann, was der Wartung förderlich ist.
Die Seite teilt mehrere Komponenten auf und kann wiederverwendet werden
3. Einweg-Datenfluss
Daten werden von Top-Level-Komponenten an Unterkomponenten übergeben
Daten kontrollierbar
3.. Erste Schritte mit React. Schreiben Sie Hallo, Welt. Lassen Sie uns zunächst verstehen, was JSX ist.
Einer der Kernmechanismen von React sind virtuelle DOM: Virtuelle DOM -Elemente, die im Speicher erstellt werden können. React verwendet virtuelles DOM, um den Vorgang des tatsächlichen DOM zu reduzieren und die Leistung zu verbessern. Ähnlich wie bei Real Native DOM kann Virtual DOM auch über JavaScript erstellt werden, zum Beispiel:
var child1 = react.createelement ('li', null, 'erster textinhalt'); var child2 = react.createelement ('li', null, 'zweiter Textinhalt'); var root2 = react.createelement ('ul', {className: 'my-list'}, child1, child2); react.render (<div> {root2} </div>, document.getElementById ('Container5'));Mit diesem Mechanismus können wir JavaScript verwenden, um eine vollständige Schnittstellen -DOM -Baum zu erstellen, so wie wir JavaScript verwenden können, um echte Doms zu erstellen. Ein solcher Code ist jedoch nicht gut lesbar, daher erfand React JSX und verwendet unsere vertraute HTML -Syntax, um ein virtuelles DOM zu erstellen:
var root = (<ul className = "my-list"> <li> Erster Textinhalt </li> <li> Zweiter Textinhalt </li> </ul>); react.render (<div> {root} </div>, document.getElementById ('Container6');4. 5 Möglichkeiten, mit Hello in React zu beginnen
Methode 1
<div id = "example1"> </div> <script type = "text/jsx"> react.render (// Direct html <h1 classname = "classn1"> 1 hellow Direct html World </h1>, document.getElementById ('Beispiel1'); </script>Methode 2
<div id = "example2"> </div> <script type = "text/jsx"> react.render (// Element direkt reagieren.Createelement ('H1', {className: 'classn2'}, '2 Hallo, Element direkter Welt erstellen!'), Dokument.GetElementById ('example2'); </script>;Methode 3
<div id = "example3"> </div> <script type = "text/jsx"> var createel = react.createClass ({render: function () {// return <h1> Hellow -Komponentenerstellung HTML World </h1> // Rückkehr mit oder ohne Klammern (<H1) -Klassname = 'Classn3'> 3 Hellow -Komponents -Kreationen H1 -Klassenname = 'Classn3'> 3 Hellow -Komponents -Kreationen Html World - Classn3 '> 3 Hellow -Komponents -Kreation Hation html worlsname =' classn3 ' </h1>);}}); react.render (// Element <createel/>, // oder doppelte Klammern <createel> </createel> document.getElementById ('Beispiel3'); </script>Methode 4
<div id = "example4"> </div> <script type = "text/jsx"> var jsxcreateel = react.createClass ({// Render im JSX -Modus erstellen direkt: function () {return (react.createelement ('H1', {className: "classn4"}, "4 Hallo erstellen in JSX -MODEL. // Element in der Komponentenmethode erstellen.Methode 5
<div id="example5"></div> <script type="text/jsx">var Hello=React.createClass({ // Template Hello render:function(){return (<span>{this.props.data}</span>)}});var World=React.createClass({ // Template world render:function(){return (<span> and World template Stitching </span>)}}); react.render (// Elemente in 2 Vorlagenkomponenten erstellen <H1 className = "classn5"> <hello data = '5 hello'/> <world/> </h1>, document.getElementById ('Beispiel5'); </script>5. Das Ergebnis des Ergebnisses oben
Beigefügter Code:
<!doctype html><html><head><meta charset="utf-8"><title>Unt titled document</title><meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" /></head><body><style>*{ margin:0; Padding: 0;} Body {Hintergrund:#333;}#Box {Hintergrund: URL (loveMg/qioa-fxehfqi8208393.jpg) No-Repeat Center Top; Breite: 550px; Grenze: 8PX Solid #ffff; -Webkit-Box-Größe: Border-Box; Rand: 50px Auto;}#Beispiel1,#Beispiel2,#Beispiel3,#Beispiel4,#Beispiel5 {Margin: 20px Auto; Breite: 100%; Hintergrund: RGBA (255.255.255, .3); Polsterung: 5px 10px; Schriftgröße: 13px; Farbe:#f1f1f1; -Webkit-Box-Größen: Border-Box; } </style> <div id = "box"> <div id = "example1"> </div> <script type = "text/jsx"> react.render (// Direct html <h1 className = "classn1"> 1 hellow Direct html World </h1>, document.getByIdById ('Beispiel1); type = "text/jsx"> react.render (// Element reag.createelement ('h1', {className: 'classn2'}, '2 Hallo, erstellen Sie Element World!'), document.getElementById ('Beispiel2'); Createel = react.createClass ({render: function () {// return <h1> Hellow -Komponente erstellt Html World </h1> // kehre mit oder ohne Klammern zurück (<H1 className = 'classn3'> 3 Hellow -Komponente erstellt HTML World </H1>). <createel> </createel> document.getElementById ('example3'); "classn4"}, "4 Hallo, erstellen Sie Welt in jsx direkt!"))}}); react.render (// Element in der Komponentenmethode reagieren. Hello = react.createClass ({// template Hallo render: function () {return (<span> {this.props.data} </span>)}}); var world = react.createclass ({// Template World Render: Funktion () {return (</worm templass stidching </span>)})}; Vorlagenkomponenten <H1 className = "classn5"> <hello data = '5 hello'/> <world/> </h1>, document.getElementById ('example5'); src = "Build/jsxTransformer.js"> </script> </body> </html>Hier sind einige zusätzliche Kenntnisse für Sie:
Begriffe reagieren
Elemente reagieren
Ein JavaScript -Objekt, das HTML -Elemente darstellt. Diese JavaScript -Objekte werden schließlich in die entsprechenden HTML -Elemente zusammengestellt.
Komponenten
Kapitulelle Reaktelemente, einschließlich eines oder mehrerer Reaktelemente. Komponenten werden verwendet, um wiederverwendbare UI -Module wie Paging, Seitenleistennavigation usw. zu erstellen.
JSX
JSX ist eine durch React definierte JavaScript -Syntax -Erweiterung, ähnlich wie XML. JSX ist optional. Wir können JavaScript verwenden, um React -Anwendungen zu schreiben, aber JSX bietet eine einfachere Möglichkeit, React -Anwendungen zu schreiben.
Virtual Dom
Virtual DOM ist ein JavaScript -Objekt, das einen DOM -Baum simuliert. React verwendet virtuelles DOM, um die Benutzeroberfläche zu rendern, während sie Änderungen der Daten auf dem virtuellen DOM anhören und diese Änderungen automatisch in die Benutzeroberfläche migrieren.