Vor dem Erlernen dieses Frameworks müssen Sie zunächst das folgende Wissen verstehen:
1. Native JS -Grundlagen
2. CSS -Grundlagen
3.NPM Package Management Grundlagen
4. WEBPACK -BESTELLUNGsprojekt Grundlagen
5.es6 Spezifikationen
Die oben genannten fünf Wissenspunkte sind auch Vorbereitungen, die beim Erlernen anderer Front-End-Frameworks verstanden werden müssen.
Ich werde nicht viel über JS und CSS sagen. NPM ist derzeit das befürwortete und dominanteste Paketmanagement -Tool. Sie können es in Betracht ziehen, wenn Sie noch Bower oder andere Werkzeuge verwenden. Als neue Generation von Verpackungswerkzeugen hat WebPack die Front-End-Verpackungswerkzeuge bereits dominiert und hat im Vergleich zum Browserify einen großen Vorteil. Was die ES6 -Spezifikation betrifft, obwohl Mainstream -Browser jetzt nicht kompatibel sind, können sie mit Konvertern wie Babel konvertiert werden.
Wenn ich einige andere Mainstream-Front-End-Frontworks kombiniert, bin ich persönlich der Meinung, dass es drei grundlegende Dinge gibt, um einseitige Anwendungen zu erstellen: Komponenten, Routing und Staatsmanagement . Dann werde ich React basierend auf diesen drei einführen, natürlich werden dort einige zusätzliche Wissenspunkte durchgesetzt.
Komponenten
Reacts Komponenten schreiben und aufrufen hängt hauptsächlich von der Modularität von ES6 und der JSX -Syntax ab. Hier ist ein Beispiel:
// main.jsimport reagieren aus 'react'import {render} aus' react-dom'import mycomponent from './component.js'import' ./main.css'// Main Component Class mydemo mydemo myDemo react.comPonent {return () return (<divcassname = "(box) =" box "> <mycomponent/> <) (<div>) (<divname ="> <mycomponent/> <) (<div>) (<div) (<divname = "> <mycomponent/> <) (<div>) (<divclassname) =" box) = "box"> <mycomponent /- }} render ((<mydemo/>), document.getElementById ('App') // component.js // subcomponent reagieren von 'react'export default class myComponent erweitert React. 100%}Im Vergleich zum Vue.js -Framework denke ich persönlich, dass die Art und Weise, wie React -Komponenten geschrieben werden, nicht so bequem wie Vue ist und der CSS -Stil der Komponente immer noch von der Außenseite der Komponente getrennt ist, sodass es nicht sehr bequem zu warten ist.
Aus diesem Beispiel können wir die Merkmale von Reacts virtuellem DOM und JSX erkennen. Im Vergleich zu anderen Frameworks kann das virtuelle DOM von React nicht nur die Leistung der Seite verbessern, sondern auch XSS -Angriffe usw. verhindern usw. Die spezifischen Prinzipien des virtuellen DOM werden hier nicht eingeführt
Bei der JSX -Syntax handelt es sich um eine Art Syntaxzucker von JS. Wir können einige Funktionen leicht über diesen Syntaxzucker implementieren. Hier konvertiert JSX die Syntax von XML in reines JavaScript, und XML -Elemente, Attribute und untergeordnete Knoten werden in Parameter von React.Creeelement konvertiert. Ähnliche JS -Syntaxzucker umfassen TypeScript und andere Typen.
Routing
Der Front-End-Routing-Mechanismus ist eine der wichtigsten Verbindungen beim Erstellen von einseitigen Anwendungen (SPAs). Durch Front-End-Routing können wir die Benutzererfahrung optimieren, ohne jedes Mal alle Daten vom Server zu erhalten, um die Seite dem Benutzer schnell vorzustellen.
React Routing hängt vom React -Router ab. React Router hält die UI und die URL synchronisiert. Es verfügt über einfache APIs und leistungsstarke Funktionen wie Codepufferladen, dynamisches Routing -Matching und das Erstellen des richtigen Standortübergangs.
Hier ist ein Beispiel für React Routing:
reagieren, {component} aus 'react'import {render} aus' React-dom'import {Router, Route, IndexRoute, Link, BrowserHistory} Aus 'React-Router'Const Active = {color:' red '} class-Apptend-Komponente {{) {{{{<div> <h1> <H1> <h1> my {h1> <{{<{<div> <h1> my {h1> <{{<{<h1> <H1> my uulter <{{{{<{<h1> <H1> my {h1>; to="/" activeStyle={ACTIVE}>Home</Link></li> <li><Link to="/users" activeStyle={ACTIVE}>User Page</Link></li> </ul> {this.props.children} </div> ) }}class Index extends React.Component { render() { return ( <div> <h2>Index!</h2> </div> )}} Klasse -Benutzer erweitert React.comPonent {render () {return (<div> <h2> Benutzer </H2> </div>)}} Reender ((<Router History = {browserHistory}> <Route path = "/" component = {App}> <Index component = {index}/"{user" user "user" user. component = {user}> </route> </route> </router>), document.getElementById ('App'))Hier ist nur eine Routing -Methode für React aufgeführt. Im Vergleich zu anderen Frameworks ist die Syntax des React -Routings leichter zu verstehen.
Statusverwaltung
Das Staatsmanagement ist keine notwendige einseitige Anwendung. Wenn wir es verwenden, können wir Änderungen in jedem Zustand auf einheitliche Weise verwalten, wodurch der gesamte Projektprozess klar und wartbar wird. React Implementation State Management kann die offiziell empfohlene Redux verwenden.
Redux verwendet einen strengen Einweg-Datenfluss. Der gesamte Anwendungszustand wird in einem Objektbaum gespeichert, und dieser Objektbaum existiert nur im einzigen Geschäft.
Projektbeispiel
Hier habe ich eine einzelne Seite mit React geschrieben, und die Seite lautet wie folgt:
Bringen
Da ich im obigen Beispiel für die Ajax -Interaktion verwendet habe, werde ich hier kurz Fetch einführen.
Wir können Fetch als die nächste Generation der Ajax -Technologie verwenden, die die aktuelle Methode für die beliebte Versprechen verwendet.
Mit Fetch können wir AJAX schreiben, um mit solchen Daten zu interagieren:
// Datenmethode abrufen fetchfn = () => {fetch ('../../ data.json') .then ((res) => {console.log (res.status) retree.json ()} .then ((data) => {thissetState ({{lists: data.listData})}). console.log (e.message)})}Zusammenfassen
Das Wichtigste beim Erlernen eines Rahmens ist das Erlernen seiner Technologie, sondern die mit sich bringt, die die Problemlösungsideen erlernen. Durch das Erlernen des React -Rahmens können Sie eine neue Denkweise aus den einzigartigen neuen Funktionen entdecken. Nur wenn das Denkstufe erweitert wird, können Sie am vorderen Ende frei im Ozean fliegen. Ich hoffe, dieser Artikel wird für alle hilfreich sein, um Reaktionen zu lernen.