Il faut 3 minutes pour lire cet article, et 3 heures pour écrire cet article, car je ne sais pas quel angle couper serait le plus approprié, alors je l'ai changé. Après avoir longtemps lutté, j'ai finalement décidé du contenu d'aujourd'hui.
J'ai déjà lu les articles sur le low-code de phodal, et il y a une phrase qui dit en gros que la complexité d'un projet est comme une force, et qu'elle ne fera que se transférer et ne disparaîtra pas de nulle part.
Je pense que cette phrase est applicable dans de nombreux endroits.Par exemple, le but de l'écriture manuscrite d'un framework frontal est de transférer la complexité des projets Web natifs manuscrits vers le framework.
Donc, pour écrire un framework front-end, nous pouvons revenir au point de départ initial du développement front-end et rappeler la première démo que vous avez apprise sur le développement front-end.
Par exemple, nous écrivons un simple Hello World :
<!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>
复制代码Les étudiants connaissant un peu les bases du front-end devraient être en mesure de voir la logique de code ci-dessus en un coup d'œil, c'est-à-dire que "Hello Malita !" s'affiche sur la page, puis l'utilisateur clique dessus et cela devient "Salut !".
Bien que les exigences ci-dessus soient très simples, même les étudiants sans fondation frontale peuvent le comprendre avec quelques coups d'œil supplémentaires, mais si vous utilisez l'architecture MVC qui est souvent mentionnée dans les frameworks frontaux modernes à analyser.
Hello Malita!et Hi!sont des données stockées dans la Modelcouche ; <span>la vue est-elle stockée dans la Viewcouche ; les événements de clic et les changements de valeur sont stockés dans la couche de contrôleController ;
Après avoir désassemblé le code ci-dessus, nous obtenons le segment de code suivant. Pour exagérer, il s'agit du code source principal de React et Vue. Ce n'est pas quelque chose que vous pouvez regarder sans acheter un abonnement. (Je souffle, je ne connais pas Vue)
<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>
复制代码Voyons comment utiliser React pour réaliser les fonctions ci-dessus.
Afin de faciliter les développements ultérieurs, (en fait, j'ai la flemme de copier le lien cdn), on installe react et react-dom dans le répertoire racine du projet en cours
npm i react react-dom
复制代码Puis présentez-le dans la démo
<script src="../../node_modules/react/umd/react.development.js"></script>
<script src="../../node_modules/react-dom/umd/react-dom.development.js"></script>
复制代码Utilisez ensuite l'utilisation brute de React pour obtenir la fonctionnalité ci-dessus
<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>
复制代码Si vous n'avez pas de fondation React de base, comparez ce cas d'utilisation avec ceux ci-dessus et regardez de plus près.
Le plus gros problème avec l'utilisation de createElementla syntaxe pour le développement React est qu'elle devient très compliquée lorsqu'il y a des niveaux d'imbrication. Très mauvaise lisibilité.
comme simple
<div><p>Hello<span>Malita!</span></p></div>
复制代码Le code suivant doit être écrit :
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”，它解了什么问题。
感谢阅读，如果你有其他的疑问，或者对这个系列书写的角度和切入点有其他的看法和建议的话，欢迎在评论区和我互动。