Este artículo es una nota de estudio que escribí cuando estaba aprendiendo React, la grabaré y la compartiré aquí. Este es el tercer artículo, que presenta principalmente módulos y componentes en reaccionar.
Tabla de contenido
2. Reaccionar programación orientada a componentes
Revisión de conocimientos tipo 2.2.1
2.2.2 Aprendizaje de los componentes de la clase
1. Módulos y componentes
1.1 Módulo
Comprensión: Un programa js que proporciona funciones específicas al mundo exterior es generalmente un archivo js.
Por qué dividirlo en módulos: a medida que aumenta la lógica empresarial, el código se vuelve más complejo.
Función: reutilizar js, simplificar la escritura de js y mejorar la eficiencia operativa de js.
1.2 Componentes
Comprensión: una colección de códigos y recursos (html, css, imágenes, etc.) utilizados para lograr efectos funcionales locales.
Por qué utilizar componentes: las funciones de una interfaz son muy complejas. Divida un grupo de funciones complejas en componentes y luego utilice componentes para formar esta interfaz funcional compleja.
Función: reutilizar la codificación, simplificar la codificación del proyecto y mejorar la eficiencia operativa.
1.3 Modularidad
Cuando el js de una aplicación está escrito en módulos, entonces la aplicación es una aplicación modular.
1.4 Componentización
Cuando una aplicación se implementa de manera multicomponente, entonces la aplicación es una aplicación en componentes.
2. Reaccionar programación orientada a componentes
2.1 Componentes funcionales
1. Cuando ReactDOM.render genera un dom virtual, porque el lenguaje jsx tratará los nombres de dom que comienzan con letras minúsculas como etiquetas html y los nombres de dom que comienzan con letras mayúsculas como componentes. Por eso tenemos que escribir con mayúscula los nombres de los componentes funcionales.
2. ReactDOM.render (<MyComponent/>, parámetro 2), cuando usamos ReactDOM.render para generar dom virtual, el nombre de nuestro componente funcional debe estar entre <> y debe ser una etiqueta cerrada.
3. Después de ejecutar ReactDOM.render, React analizará la etiqueta del componente, buscará el componente MyComponent, luego encontrará que este componente está definido por una función y luego llamará a la función para convertir el dom virtual devuelto en un dom real para mostrarlo. la página.
4.babel activa el modo estricto después de la compilación, por lo que esto, que originalmente apuntaba a la ventana, apunta a indefinido.
El código se muestra a continuación:
<div id="test"></div><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
//1.创建函数式组件
function MyComponent() {
console.log(this);//此处的this是undefined，因为babel在编译后开启了严格模式
return <h2>我是用函数定义的组件（适用于【简单组件】的定义）</h2>
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>, document.getElementById('test'))
/*
执行了ReactDOM.render之后，
1.React解析组件标签，找到了MyComponent组件
2.发现组件是使用函数定义的，然后调用该函数，将返回的虚拟dom转为真实dom，随后展示在页面中
*/El efecto es el siguiente:
2.2 componentes de clase
Revisión de conocimientos tipo 2.2.1
1.Crea una clase
El código se muestra a continuación:
//创建一个Person类
class Person{
//构造器方法
constructor(name,age){
this.name = name
this.age = age
}
//普通方法,speak方法放在了Person的原型对象上，供实例使用
//通过person实例调用speak时，speak中的this指向person实例
speak(){
console.log(`我的名字是${this.name},我的年龄是${this.age}`);
}
}
//创建Person类的实例对象、
const p1 = new Person('tom',28)
const p2 = new Person('jerry',29)
console.log(p1);
console.log(p2);
p1.speak()
p2.speak()2. Herencia de clases
//创建一个Student类，继承于Person类
class Student extends Person{
constructor(name,age,grade){
super(name,age)//super关键字，用于继承父类的属性，必须放在第一行
this.grade = grade
}
//speak方法是父类的方法，在子类依然可以使用。从子类Student的原型链依次向上查找，在父类的原型中找到speak方法并调用
//重写从父类继承的方法，那么speak方法在子类的原型中就已存在，在从子类原型链向上查找的时候，在子类原型中找到，就会直接调用停止查找。
speak(){
console.log(`我的名字是${this.name},我的年龄是${this.age},我的年纪是${this.grade}`);
}
}
const s1 = new Student('张三',15,'大一')
console.log(s1);
s1.speak()3. Resumen de conocimientos de clase
1. No es necesario escribir el constructor de la clase, es necesario realizar algunas operaciones de inicialización en la instancia, como agregar atributos específicos.
2. Si la clase A hereda la clase B y se escribe un constructor en la clase A, entonces se debe llamar a super en el constructor de la clase A.
3. Los métodos definidos en la clase se colocan en el objeto prototipo de la clase para que los utilicen las instancias.
2.2.2 Aprendizaje de los componentes de la clase
1. Cree componentes de clase.
Heredemos la clase incorporada de React React.Component para crear una clase MyComponent.
2. Utilice la función de renderizado.
El renader se coloca en el objeto prototipo de la clase para que lo utilice la instancia MyComponent que creamos. Cuando se llama a la función de renderizado, apunta al objeto de instancia de MyComponent. Podemos registrar esto en el código para observar la dirección de esto.
Imprima los resultados de salida:
3. Cuando el render devuelve el dom virtual, el dom virtual se convertirá en un dom real.
4. Represente el componente en la página. Después de escribir la etiqueta del componente, reaccionar generará automáticamente una instancia.
En ReactDOM.render(<MyComponent/>, document.getElementById('test')), escribimos un
<MyComponent/>, reacciona detecta que se trata de un componente, luego encuentra el componente de clase correspondiente según el nombre y genera automáticamente una instancia basada en este componente.
El código se muestra a continuación:
<div id="test"></div><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
//1.创建类式组件 如果创建类式组件，必须去继承React.Component，此为react内置类
class MyComponent extends React.Component{
render(){
//renader是放在类的原型对象上，供MyComponent实例使用
//render中的this在被调用时指向MyComponent的实例对象，MyComponent的组件实例对象
console.log('reder中的this',this);
return <h2>我是用类式定义的组件（适用于【复杂组件】的定义）</h2>
}
}
//2.渲染组件到页面，写了组件标签后react会自动生成一个实例
ReactDOM.render(<MyComponent/>, document.getElementById('test'))
/*
执行了ReactDOM.render（）后发生了什么？
1.React解析组件标签，找到MyComponent组件
2.发现组件是类定义的，随后new出该类的实例，并通过该实例调用到原型上的render方法
3.将renader返回的虚拟DOM转换为真实DOM，随后呈现到页面上
*/
</script>