Es dauert 3 Minuten, um diesen Artikel zu lesen, und 3 Stunden, um diesen Artikel zu schreiben, weil ich nicht weiß, welcher Winkel zum Schneiden angemessener wäre, also habe ich ihn geändert. Nach langem Ringen habe ich mich endlich für den heutigen Inhalt entschieden.
Ich habe zuvor die Low-Code-Artikel von phodal gelesen, und darin gibt es einen Satz, der ungefähr besagt, dass die Komplexität eines Projekts wie eine Kraft ist und sich nur überträgt und nicht aus dem Nichts verschwindet.
Ich denke, dieser Satz ist an vielen Stellen anwendbar, zum Beispiel ist der Zweck der Handschrift eines Frontend-Frameworks, die Komplexität von handgeschriebenen nativen Webprojekten auf das Framework zu übertragen.
Um also ein Front-End-Framework zu schreiben, können wir zum ursprünglichen Ausgangspunkt der Front-End-Entwicklung zurückkehren und uns an die erste Demo erinnern, die Sie über die Front-End-Entwicklung gelernt haben.
Zum Beispiel schreiben wir ein einfaches Hallo Welt:
<!DOCTYPE html>
<html lang="en">
<body>
<div id="malita">
<span>loading...</span>
</div>
<script>
const root = document.getElementById('malita');
root.innerHTML = '<span>Hello Malita!</span>';
root.addEventListener('click', (event) => {
event.target.innerHTML = '<span>Hi!</span>';
})
</script>
</body>
</html>
复制代码Schüler mit ein wenig Front-End-Grundlagen sollten in der Lage sein, die obige Codelogik auf einen Blick zu sehen, das heißt, „Hello Malita!“ wird auf der Seite angezeigt, und der Benutzer klickt darauf und es wird „Hi!“.
Obwohl die oben genannten Anforderungen sehr einfach sind, können auch Studenten ohne Frontend-Grundlage es mit ein paar weiteren Blicken verstehen, aber wenn Sie die MVC-Architektur verwenden, die in modernen Frontend-Frameworks oft erwähnt wird, um sie zu analysieren.
Hello Malita!und Hi!sind Daten, die in der ModelEbene gespeichert sind, <span>ist die Ansicht, die in der ViewEbene , Klickereignisse und Wertänderungen werden in der Steuerungsebene gespeichert Controller;
Nachdem wir den obigen Code zerlegt haben, erhalten wir das folgende Codesegment: Um es zu übertreiben, dies ist der Kernquellcode von React und Vue. Das können Sie sich nicht ansehen, ohne eine Mitgliedschaft zu erwerben. (Ich blase, ich kenne Vue nicht)
<script>
function Model() {
this.text = 'Hello Malita!';
this.setText = text => this.text = text;
}
function View(controller) {
const self = this;
self.root = document.getElementById('malita');
self.root.addEventListener('click', controller.onClick)
this.render = () => {
const text = controller.getModel().text;
self.root.innerHTML = `<span>${text}</span>`;
}
}
function Controller(model) {
const self = this;
self.model = model;
this.onClick = (event) => {
self.model.setText('Hi!');
// 数据驱动页面，页面应该根据 model 更改响应 render
const text = controller.getModel().text;
event.target.innerHTML = `<span>${text}</span>`;
}
this.getModel = () => {
return self.model;
}
}
const model = new Model();
const controller = new Controller(model);
const view = new View(controller);
view.render();
</script>
复制代码Werfen wir einen Blick darauf, wie React verwendet wird, um die oben genannten Funktionen zu erreichen.
Um die spätere Entwicklung zu erleichtern (tatsächlich bin ich zu faul, den cdn-Link zu kopieren), installieren wir React und React-Dom im Stammverzeichnis des aktuellen Projekts
npm i react react-dom
复制代码Dann stellen Sie es in der Demo vor
<script src="../../node_modules/react/umd/react.development.js"></script>
<script src="../../node_modules/react-dom/umd/react-dom.development.js"></script>
复制代码Verwenden Sie dann die Rohnutzung von React, um die oben genannte Funktionalität zu erreichen
<body>
<div id="malita">
<span>loading...</span>
</div>
<script>
const Hello = () => {
const [text, setText] = React.useState('Hello Malita!');
return React.createElement("span", {
onClick: () => {
setText('Hi!');
}
}, text);
};
const root = ReactDOM.createRoot(document.getElementById('malita'));
root.render(React.createElement(Hello));
</script>
</body>
复制代码Wenn Sie keine grundlegende React-Grundlage haben, vergleichen Sie diesen Anwendungsfall mit den oben genannten und sehen Sie sich das genauer an.
Das größte Problem bei der Verwendung createElementder Syntax für die React-Entwicklung besteht darin, dass es sehr kompliziert wird, wenn es Verschachtelungsebenen gibt. Sehr schlechte Lesbarkeit.
wie einfach
<div><p>Hello<span>Malita!</span></p></div>
复制代码Der folgende Code muss geschrieben werden:
React.createElement("div", null, React.createElement("p", null, "Hello", React.createElement("span", null, "Malita!")));
就相当于你在写 html 的时候，都不使用 html 的标签，而是全部使用 js 方法 document.createElement(tagName) 来编写整个页面。
所以为了更加便于书写和阅读，充分利用 html 和 js 的优势，我们进行 React 开发一般都会使用 jsx 语法。
依旧是上面的需求，我们引入 jsx，代码变得更直观了：
<body>
<div id="malita">
<span>loading...</span>
</div>
<script>
const Hello = () => {
const [text, setText] = React.useState('Hello Malita!');
return (<span onClick={()=> {
setText('Hi!')
}}> {text} </span>);
};
const root = ReactDOM.createRoot(document.getElementById('malita'));
root.render(React.createElement(Hello));
</script>
</body>
复制代码但是写完发现，浏览器是无法识别 jsx 语法的，所以我们要引入 babel 来将我们的 jsx 语法转换成 React 的原始语法。
其实 babel 的实现原理非常简单，就是通过将代码转换成抽象语法书 (AST)，再转换成目标语法，记下来，这是面试题。
在项目中安装 babel-standalone
npm i babel-standalone
复制代码然后在项目中引入，并且修改 script 的 type 为 text/babel。
<head>
+ <script src="../../node_modules//babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="malita">
<span>loading...</span>
</div>
- <script>
+ <script type="text/babel">
</script>
</body>
复制代码我测试的时候使用的是谷歌浏览器 V100 ,所以里面用到的 ES6 的一些语法，它都可以识别，后续我们也会使用 babel 将我们的 es6 代码转换成 es5。
到此我们就完成了让页面运行起来的所有尝试。
值得注意的是，这不是一个 React 的零基础入门教程，文章的用意在于讲清楚前端框架的部分运行原理和工作内容，你可以把这当作一篇需求文档来对待，因为我们会在后续的内容中，用更加科学合理的方式来实现它。
在这一个系列中，我会尽量讲明“为什么使用XXX”，它解了什么问题。
感谢阅读，如果你有其他的疑问，或者对这个系列书写的角度和切入点有其他的看法和建议的话，欢迎在评论区和我互动。