Web-Frontend
js-Tutorial
Was kann das Reaktionsframework tun? Detaillierte Einführung in das React Framework (mit vollst?ndigen Anwendungsbeispielen)
Was kann das Reaktionsframework tun? Detaillierte Einführung in das React Framework (mit vollst?ndigen Anwendungsbeispielen)
Sep 11, 2018 pm 04:45 PM
React ist ein JavaScript-Framework zum Erstellen ?vorhersehbarer“ und ?deklarativer“ Web-Benutzeroberfl?chen, das es Facebook erm?glicht hat, Webanwendungen schneller zu entwickeln. Werfen wir einen Blick auf den Inhalt des Artikels
1. Merkmale:
1. Beschreiben Sie einfach Ihre Anwendung zu einem beliebigen Zeitpunkt. Was Es sollte so aussehen, dass React automatisch UI-Updates verwaltet, wenn sich die Daten ?ndern.
2. Deklarativ Wenn sich die Daten ?ndern, ist ?Reagieren“ konzeptionell dasselbe wie das Klicken auf F5. Tats?chlich wird nur ein Teil der ?nderung aktualisiert. Bei React geht es darum, wiederverwendbare Komponenten zu erstellen. Tats?chlich erstellen Sie mit React nur Komponenten. Durch die Kapselung wird die Wiederverwendung, Prüfung und Trennung von Komponentencode erleichtert.
Darüber hinaus sind folgende Punkte zu beachten:
React ist kein MVC-Framework
React verwendet keine Vorlagen
Responsive Update ist sehr einfach
2. Hauptprinzipien
Für traditionelles Web Bei Anwendungen handelt es sich beim Betrieb von DOM im Allgemeinen um einen direkten Aktualisierungsvorgang. Wir wissen jedoch, dass DOM-Aktualisierungen normalerweise teuer sind. Um Vorg?nge im DOM so weit wie m?glich zu reduzieren, bietet React eine andere und leistungsstarke M?glichkeit, das DOM anstelle direkter DOM-Vorg?nge zu aktualisieren. Es handelt sich um Virtual DOM, ein leichtes virtuelles DOM, bei dem es sich um ein von React abstrahiertes Objekt handelt, das beschreibt, wie das Dom aussehen und wie es pr?sentiert werden soll. Das reale DOM wird über dieses virtuelle DOM aktualisiert, und dieses virtuelle DOM verwaltet die Aktualisierung des realen DOM.
Warum kann es durch diese zus?tzliche Ebene virtueller DOM-Operationen schneller gehen? Dies liegt daran, dass React über einen Diff-Algorithmus verfügt, der nicht garantiert, dass er sich sofort auf das reale DOM auswirkt, und dann diesen Diff-Algorithmus verwendet, um den kleinsten Wert durch Vergleich mit dem aktuellen neuen zu berechnen DOM-Darstellung mit den vorherigen Schritten zum Aktualisieren des echten DOM.
Komponenten Komponenten
Knoten im DOM-Baum werden Elemente genannt, aber hier ist es anders, Virtual DOM It hei?t Komponente. Der Knoten von Virtual DOM ist eine vollst?ndige abstrakte Komponente, die aus Komponenten besteht.
Hinweis: Die Verwendung von Komponenten ist in React ?u?erst wichtig, da die Existenz von Komponenten die Berechnung von DOM-Differenzen effizienter macht.
Status und Rendern
Wie React das echte DOM darstellt, wie Komponenten gerendert werden, wann gerendert wird und wie synchron aktualisiert wird. Dies erfordert ein kurzes Verst?ndnis des Status und Rendern gerendert. Das Statusattribut enth?lt einige Daten, die zum Definieren der Komponente erforderlich sind. Wenn sich die Daten ?ndern, wird Render zum erneuten Rendern aufgerufen. Hier k?nnen die Daten nur über die bereitgestellte setState-Methode aktualisiert werden auf der offiziellen Website-Demo:
<!DOCTYPE html> <html> <head> <script src="http://fb.me/react-0.12.1.js"></script> <script src="http://fb.me/JSXTransformer-0.12.1.js"></script> </head> <body> <p id="example"></p> <script type="text/jsx"> React.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html>
Es ist ganz einfach. Wenn Sie mit einem Browser darauf zugreifen, k?nnen Sie die Worte Hello, world! sehen.
JSXTransformer.js unterstützt das Parsen der JSX-Syntax. JSX ist eine Syntax, die HTML-Code in Javascript schreiben kann. Wenn es Ihnen nicht gef?llt, bietet React auch native Javascript-Methoden.(Wenn Sie mehr sehen m?chten, besuchen Sie die Spalte React Reference Manual der PHP Chinese-Website, um mehr zu erfahren) Eine weitere Demo:
<html>
<head>
<title>Hello React</title>
<script src="http://fb.me/react-0.12.1.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<style>
#content{
width: 800px;
margin: 0 auto;
padding: 5px 10px;
background-color:#eee;
}
.commentBox h1{
background-color: #bbb;
}
.commentList{
border: 1px solid yellow;
padding:10px;
}
.commentList .comment{
border: 1px solid #bbb;
padding-left: 10px;
margin-bottom:10px;
}
.commentList .commentAuthor{
font-size: 20px;
}
.commentForm{
margin-top: 20px;
border: 1px solid red;
padding:10px;
}
.commentForm textarea{
width:100%;
height:50px;
margin:10px 0 10px 2px;
}
</style>
</head>
<body>
<p id="content"></p>
<script type="text/jsx">
var staticData = [
{author: "張飛", text: "我在寫一條評(píng)論~！"},
{author: "關(guān)羽", text: "2貨，都知道你在寫的是一條評(píng)論。。"},
{author: "劉備", text: "哎，咋跟這倆逗逼結(jié)拜了！"}
];
var converter = new Showdown.converter();//markdown
/** 組件結(jié)構(gòu)：
<CommentBox>
<CommentList>
<Comment />
</CommentList>
<CommentForm />
</CommentBox>
*/
//評(píng)論內(nèi)容組件
var Comment = React.createClass({
render: function (){
var rawMarkup = converter.makeHtml(this.props.children.toString());
return (
<p className="comment">
<h2 className="commentAuthor">
{this.props.author}:
</h2>
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
</p>
);
}
});
//評(píng)論列表組件
var CommentList = React.createClass({
render: function (){
var commentNodes = this.props.data.map(function (comment){
return (
<Comment author={comment.author}>
{comment.text}
</Comment>
);
});
return (
<p className="commentList">
{commentNodes}
</p>
);
}
});
//評(píng)論表單組件
var CommentForm = React.createClass({
handleSubmit: function (e){
e.preventDefault();
var author = this.refs.author.getDOMNode().value.trim();
var text = this.refs.text.getDOMNode().value.trim();
if(!author || !text){
return;
}
this.props.onCommentSubmit({author: author, text: text});
this.refs.author.getDOMNode().value = '';
this.refs.text.getDOMNode().value = '';
return;
},
render: function (){
return (
<form className="commentForm" onSubmit={this.handleSubmit}>
<input type="text" placeholder="Your name" ref="author" /><br/>
<textarea type="text" placeholder="Say something..." ref="text" ></textarea><br/>
<input type="submit" value="Post" />
</form>
);
}
});
//評(píng)論塊組件
var CommentBox = React.createClass({
loadCommentsFromServer: function (){
this.setState({data: staticData});
/*Um der Sache willen Bequemlichkeit, ich werde hier nicht darauf eingehen. Serverseitig, Sie k?nnen es selbst ausprobieren
$.ajax({
url: this.props.url + "?_t=" + new Date().valueOf(),
dataType: 'json',
success: function (data){
this.setState({data: data});
}.bind(this),
error: function (xhr, status, err){
console.error(this.props.url, status, err.toString());
}.bind(this)
});
*/
},
handleCommentSubmit: function (comment){
//TODO: submit to the server and refresh the list
var comments = this.state.data;
var newComments = comments.concat([comment]);
//這里也不向后端提交了
staticData = newComments;
this.setState({data: newComments});
},
//初始化 相當(dāng)于構(gòu)造函數(shù)
getInitialState: function (){
return {data: []};
},
//組件添加的時(shí)候運(yùn)行
componentDidMount: function (){
this.loadCommentsFromServer();
this.interval = setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
//組件刪除的時(shí)候運(yùn)行
componentWillUnmount: function() {
clearInterval(this.interval);
},
//調(diào)用setState或者父級(jí)組件重新渲染不同的props時(shí)才會(huì)重新調(diào)用
render: function (){
return (
<p className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data}/>
<CommentForm onCommentSubmit={this.handleCommentSubmit} />
</p>
);
}
});
//當(dāng)前目錄需要有comments.json文件
//這里定義屬性，如url、pollInterval，包含在props屬性中
React.render(
<CommentBox url="comments.json" pollInterval="2000" />,
document.getElementById("content")
);
</script>
</body>
</html>Wirkung:
Dieser Artikel endet hier (wenn Sie m?chten Weitere Informationen finden Sie auf der chinesischen Website von PHP (React User Manual
Das obige ist der detaillierte Inhalt vonWas kann das Reaktionsframework tun? Detaillierte Einführung in das React Framework (mit vollst?ndigen Anwendungsbeispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
React vs. Vue: Welches Framework verwendet Netflix?
Apr 14, 2025 am 12:19 AM
NetflixuSesacustomframeworkcalted "Gibbon" Builtonreact, NotreactorVuedirect.1) TeamExperience: W?hlen Sie beob?dtes Vertrauen
Reacts ?kosystem: Bibliotheken, Tools und Best Practices
Apr 18, 2025 am 12:23 AM
Das React-?kosystem umfasst staatliche Verwaltungsbibliotheken (z. B. Redux), Routing-Bibliotheken (z. B. Reactrouter), UI-Komponentenbibliotheken (wie Material-UI), Testwerkzeuge (wie Scherz) und Erstellung von Tools (z. B. Webpack). Diese Tools arbeiten zusammen, um Entwicklern dabei zu helfen, Anwendungen effizient zu entwickeln und zu pflegen, und die Effizienz der Code zu verbessern.
Netflix -Frontend: Beispiele und Anwendungen von React (oder Vue)
Apr 16, 2025 am 12:08 AM
Netflix verwendet React als Front-End-Framework. 1) Reacts komponentiertes Entwicklungsmodell und ein starkes ?kosystem sind die Hauptgründe, warum Netflix es ausgew?hlt hat. 2) Durch die Komponentierung spaltet Netflix komplexe Schnittstellen in überschaubare Teile wie Videotiere, Empfehlungslisten und Benutzerkommentare auf. 3) Die virtuelle DOM- und Komponentenlebenszyklus von React optimiert die Rendering -Effizienz und die Verwaltung des Benutzerinteraktion.
React: Die Kraft einer JavaScript -Bibliothek für die Webentwicklung
Apr 18, 2025 am 12:25 AM
React ist eine von Meta entwickelte JavaScript -Bibliothek zum Erstellen von Benutzeroberfl?chen, wobei der Kern die Komponentenentwicklung und die virtuelle Dom -Technologie ist. 1. Komponenten und Staatsmanagement: React verwaltet den Zustand durch Komponenten (Funktionen oder Klassen) und Hooks (wie Usestate), wodurch die Wiederverwendbarkeit und Wartung von Code verbessert wird. 2. Virtuelle DOM- und Leistungsoptimierung: Reagieren Sie durch virtuelles DOM effizient die reale DOM, um die Leistung zu verbessern. 3. Lebenszyklus und Haken: Hooks (wie die Verwendung von UseEffect) erm?glichen Funktionskomponenten, Lebenszyklen zu verwalten und Nebeneffektoperationen durchzuführen. V.
Die Zukunft von React: Trends und Innovationen in der Webentwicklung
Apr 19, 2025 am 12:22 AM
Die Zukunft von React wird sich auf die ultimative Komponentenentwicklung, Leistungsoptimierung und eine tiefe Integration in andere Technologiestapel konzentrieren. 1) React vereinfacht die Erstellung und Verwaltung von Komponenten weiter und f?rdert die ultimative Komponentenentwicklung. 2) Die Leistungsoptimierung wird insbesondere in gro?en Anwendungen im Mittelpunkt. 3) React wird tief in Technologien wie GraphQL und Typecript integriert, um die Entwicklungserfahrung zu verbessern.
Frontend -Entwicklung mit Reaktionen: Vorteile und Techniken
Apr 17, 2025 am 12:25 AM
Die Vorteile von React sind seine Flexibilit?t und Effizienz, die sich in: 1) basierendem Design widerspiegeln, verbessert die Wiederverwendbarkeit des Codes. 2) Virtual DOM -Technologie optimiert die Leistung, insbesondere beim Umgang mit gro?en Mengen an Datenaktualisierungen. 3) Das reiche ?kosystem bietet eine gro?e Anzahl von Bibliotheken und Tools von Drittanbietern. Wenn Sie verstehen, wie React Beispiele funktioniert und verwendet, k?nnen Sie seine Kernkonzepte und Best Practices beherrschen, um eine effiziente, wartbare Benutzeroberfl?che zu erstellen.
Reagieren gegen Backend Frameworks: Ein Vergleich
Apr 13, 2025 am 12:06 AM
React ist ein Front-End-Framework zum Erstellen von Benutzeroberfl?chen. Ein Back-End-Framework wird verwendet, um serverseitige Anwendungen zu erstellen. React bietet komponentierte und effiziente UI -Updates, und das Backend -Framework bietet eine vollst?ndige Backend -Service -L?sung. Bei der Auswahl eines Technologie -Stacks sollten Projektanforderungen, Teamf?higkeiten und Skalierbarkeit berücksichtigt werden.
Reagieren Sie gegen andere Frameworks: Vergleichen und Kontrastoptionen
Apr 17, 2025 am 12:23 AM
React ist eine JavaScript -Bibliothek zum Erstellen von Benutzeroberfl?chen, die für gro?e und komplexe Anwendungen geeignet sind. 1. Der Kern von React ist Komponentierung und virtuelles DOM, wodurch die UI -Rendering -Leistung verbessert wird. 2. Im Vergleich zu VUE ist React flexibler, hat aber eine steile Lernkurve, die für gro?e Projekte geeignet ist. 3. Im Vergleich zum Angular ist React leichter, h?ngt von der Gemeinschafts?kologie ab und geeignet für Projekte, die Flexibilit?t erfordern.
