Se necesitan 3 minutos para leer este artículo y 3 horas para escribir este artículo, porque no sé qué ángulo cortar sería más apropiado, así que lo cambié. Después de luchar durante mucho tiempo, finalmente me decidí por el contenido de hoy.
Leí los artículos relacionados con el código bajo de phodal antes, y hay una oración que dice aproximadamente que la complejidad de un proyecto es como una fuerza, y solo se transferirá y no desaparecerá de la nada.
Creo que esta oración es aplicable en muchos lugares, por ejemplo, el propósito de escribir a mano un marco front-end es transferir la complejidad de los proyectos web nativos escritos a mano al marco.
Entonces, para escribir un marco de front-end, podemos volver al punto de partida original del desarrollo de front-end y recordar la primera demostración que aprendió sobre el desarrollo de front-end.
Por ejemplo, escribimos 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>
复制代码Los estudiantes con algunos conceptos básicos de front-end deberían poder ver la lógica del código anterior de un vistazo, es decir, "Hola Malita" se muestra en la página, y luego el usuario hace clic en él y se convierte en "¡Hola!".
Aunque los requisitos anteriores son muy simples, incluso los estudiantes sin una base de front-end pueden entenderlo con algunas miradas más, pero si usa la arquitectura MVC que a menudo se menciona en los marcos de front-end modernos para analizar.
Hello Malita!y Hi!son datos almacenados en la Modelcapa, <span>es la vista almacenada en la Viewcapa , los eventos de clic y los cambios de valor se almacenan en la capa de control Controller;
Después de desensamblar el código anterior, obtenemos el siguiente segmento de código. Para exagerar, este es el código fuente central de React y Vue. Esto no es algo que pueda ver sin comprar una membresía. (Estoy soplando, no sé 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>
复制代码Echemos un vistazo a cómo usar React para lograr las funciones anteriores.
Para facilitar el desarrollo posterior (de hecho, soy demasiado perezoso para copiar el enlace cdn), instalamos react y react-dom en el directorio raíz del proyecto actual
npm i react react-dom
复制代码Luego introdúcelo en la demo
<script src="../../node_modules/react/umd/react.development.js"></script>
<script src="../../node_modules/react-dom/umd/react-dom.development.js"></script>
复制代码Luego use el uso sin procesar de React para lograr la funcionalidad anterior
<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 no tiene una base básica de React, compare este caso de uso con los anteriores y eche un vistazo más de cerca.
El mayor problema con el uso de createElementla sintaxis para el desarrollo de React es que se vuelve muy complicado cuando hay niveles de anidamiento. Muy mala legibilidad.
como simple
<div><p>Hello<span>Malita!</span></p></div>
复制代码Se necesita escribir el siguiente código:
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”，它解了什么问题。
感谢阅读，如果你有其他的疑问，或者对这个系列书写的角度和切入点有其他的看法和建议的话，欢迎在评论区和我互动。