Dado que React, Vue y otros marcos front-end se han utilizado ampliamente en el mercado, el desarrollo de componentes se ha convertido gradualmente en el principal método de desarrollo front-end. Hoy compartiré con ustedes cómo debemos empaquetar los componentes en nuestro desarrollo habitual. Principalmente de los siguientes tres aspectos para explicarte:
- que es un componente
- Por qué dividir componentes
- Cómo dividir componentes
que es un componente
Encapsulación de funciones y estilos de interfaz de usuario, una función o un estilo de interfaz de usuario es un componente, barra de navegación, banner, pie de página, etc. Estas funciones y estilos son todos componentes.
Los diferentes marcos clasifican los componentes de forma ligeramente diferente. Por ejemplo, algunas personas dividen los componentes de reacción en componentes funcionales, componentes sin estado y componentes con estado, componentes de presentación y componentes de contenedor, etc.; algunas personas dividen los componentes de Vue en componentes globales, componentes locales, funcionales (sin estado) componentes, componentes normales (con estado), componentes dinámicos, componentes normales (no dinámicos), componentes asíncronos, componentes normales (no asíncronos), componentes recursivos, componentes normales (no recursivos). Pero en esencia son todos iguales. Dado que actualmente estamos utilizando el marco vue, todo el intercambio de hoy es principalmente para el análisis de los componentes de vue.
1. Clasificación por método de registro de componentes: vue divide los componentes en componentes globales y componentes locales
Componentes globales: componentes registrados globalmente usando Vue.component ( en nuestros proyectos, generalmente se registran uniformemente en el archivo utils )
Vue.component("my-component-name", {
/****/
});
Componentes parciales: importados por separado a través de componentes en la página en uso ( en general, se recomienda utilizar el método de importación de componentes bajo demanda )
2. Clasificación según si el componente tiene estado propio: se puede dividir en componentes funcionales (sin estado) y componentes ordinarios (sin estado)
Estilo funcional: agregue etiquetas funcionales a html o de plantilla escritas en sintaxis jsx. En general, un componente sin estado (sin datos de respuesta) se puede registrar como un componente funcional ( no administra ningún estado, no escucha ningún estado que se le pase y no tiene un método de ciclo de vida. De hecho, es solo una aceptación). algunos accesorios funcionan, por lo que la sobrecarga de representación es mucho menor, lo que puede mejorar el rendimiento hasta cierto punto )
sintaxis jsx:
<script>
import OtherComponent from "./other";
export default {
name: "FunctionComponent",
functional: true,
components: {
OtherComponent
},
props: {
title: {
type: String,
required: true
}
},
render(h, { props }) {
const { title } = props;
return (
<div>
<p> 我是函数式组件</p>
<p>props {title}</p>
<OtherComponent otherInfo={title} title="我是函数式组件的其他组件" />
</div>
);
}
};
</script>
La etiqueta de plantilla marca funcional:
<template functional>
<div>
{
{ props.title }}
<p>
otherInfo {
{ props.otherInfo }}
</p>
</div>
</template>
<script>
export default {
functional: true,
props: {
title: {
default: "",
type: String
},
otherInfo: {
default: "",
type: String
}
}
};
</script>
3. Según si el componente es dinámico o no: se puede dividir en componentes dinámicos y componentes ordinarios (no dinámicos) Componentes
dinámicos: componentes importados a través de la etiqueta del componente más el atributo is (el valor del atributo es el nombre del componente importado)
<template>
<div>
<component :is="currentTabComponent"></component>
</div>
</template>
export default {
components: {
DynamicComponent1
},
data() {
return {
currentTabComponent: "DynamicComponent1"
};
}
};
En general, los componentes dinámicos se pueden usar cuando se requiere cambiar entre muchos componentes. Por ejemplo, el siguiente código se puede optimizar como un componente dinámico: ( la parte del código el-tab-pane es básicamente conocimiento repetitivo y una pequeña cantidad de datos es diferente En este caso, solo puede definir los datos en el-tab-pane como una variable de matriz en data, y luego hacer un bucle en el-tab-pane, y los componentes internos se pueden reemplazar con componentes personalizados) Después de la optimización: (si el cambio de componentes es
frecuente , puede agregar una etiqueta de mantenimiento fuera de la etiqueta de componentes para almacenar en caché los componentes desactivados, de modo que no necesite volver a crear y montar la próxima vez que cambie componentes )
<template>
<el-tabs v-model="activeTab">
<el-tab-pane v-for="(item) in tabList" :key="item.id" :label="item.name" :name="item.id">
<component :is="item.components"></component>
</el-tab-pane>
</el-tabs>
</template>
<script>
import page1 from "@/views/example/page1";
import page2 from "@/views/example/page2";
import page3 from "@/views/example/page3";
export default {
name: "tab",
data() {
return {
activeTab: '1',
tabList: [
{ id: '1', name: "页面1", components: page1 },
{ id: '2', name: "页面2", components: page2 },
{ id: '3', name: "页面3", components: page3 }
]
};
},
};
</script>
4. Según si los componentes son asincrónicos o no: se puede dividir en componentes asincrónicos y componentes ordinarios (no asincrónicos) Velocidad de representación en la primera pantalla, como la carga diferida de las rutas utilizadas en nuestro proyecto, y los componentes introducidos de esta manera localmente () => import('./my-async-component') son todos los componentes asincrónicos )
La forma de introducir componentes asíncronos:
a. A través de la función de fábrica
Vue.component('async-example', function (resolve, reject) {
resolve({
template: '<div>hello vue !</div>'
})
})
B. Usar junto con la función de corte de código de webpack:
Vue.component('async-wepack-example', function (resolve) {
// require会告诉webpack将你的代码切割成多个包，然后通过ajax加载
require(['./my-async-component'], resolve)
})
C. a través de la importación ()
Vue.component('async-wepack-example', () => import('./my-async-component'))
Los componentes locales registran componentes asíncronos ( este método actualmente se usa comúnmente en nuestros proyectos )
new Vue({
components: {
myComponent: () => import('./my-async-component')
}
})
Componentes asincrónicos avanzados
const asyncComponent = () => ({
component:import('./my-async-component.vue'),//需要加载的组件
delay: 200, // 展示加载时组件的延时时间，默认200毫秒
error: errorComponent, // 加载失败显示组件
loading: loadingComponent, // 加载时使用组件
timeout: 2000 // 超时时间，默认 Infinity（组件加载也超时后则使用加载失败时使用的组件。）
})
5. Clasificación según si los componentes son referencias circulares: se pueden dividir en componentes recursivos y componentes ordinarios (no recursivos)
Componentes recursivos: los componentes pueden llamarse a sí mismos en sus propias plantillas ( se debe definir el valor del componente de nombre, generalmente se usa para componentes de árbol, componentes de enrutamiento de barra lateral, etc. )
<template>
<div>
<ul>
<li v-for="item in list" :key="item.name">
<span>{
{ item.name }}</span>
<recursive-component v-if="item.children" :list="item.children" />
</li>
</ul>
</div>
</template>
<script>
export default {
name: "RecursiveComponent",
props: {
list: {
default: () => [],
type: Array
}
}
};
</script>
6. En general, en nuestro desarrollo, los componentes se dividen en componentes de visualización de ui (centrándose en la visualización de estilos de ui, como nuestro element-ui de uso común), componentes funcionales (no preste atención a los estilos, solo encapsule funciones), componentes comerciales, etc
Por qué dividir componentes
1. Mejorar la eficiencia del desarrollo
Antes del desarrollo de componentes, cada una de nuestras páginas estaba separada. Si encontrábamos una parte similar desarrollada por Zeng Jin al desarrollar una página, solo podíamos copiarla y pegarla en la página actual y luego hacer algunos cambios. Si la clase se pierde, la página aún puede informar un error, y llevará mucho tiempo solucionar el problema. Después de la creación de componentes, solo necesitamos introducir componentes para partes similares, sin desarrollo repetido. Hasta cierto punto, la cantidad de código también se reduce. , que mejoran en gran medida la velocidad de compilación del proyecto
2. Fácil de reutilizar
Un componente se puede utilizar en varios lugares
3. Simplifique los pasos de depuración
Cuando una página tiene un problema, primero puede ubicar un determinado módulo y luego ubicar directamente un determinado componente, sin tener que leer todos los códigos de toda la página y luego solucionar el problema.
4. Mejorar la mantenibilidad de todo el proyecto
Todas las páginas están compuestas por componentes, y se reduce el acoplamiento entre módulos, al eliminar y modificar la función de un módulo, solo es necesario modificar directamente los componentes.
5. Facilitar el desarrollo colaborativo
Cada componente converge las funciones comerciales correspondientes en un proyecto sin perturbarse entre sí. En un equipo de varias personas, cada persona solo es responsable de su propio módulo comercial, y la adición, eliminación, modificación y consulta de funciones comerciales se limitan a su propio módulo comercial y no afectarán el negocio de otras personas.
Cómo dividir componentes
1. Responsabilidad única garantizada.
Un componente "solo hace bien una cosa", y solo hace bien lo más básico, dejando un hueco que se puede combinar. Subcontratar la mayor funcionalidad posible.
2. El principio de apertura y cierre.
Abierto para extensión, cerrado para modificación. Cuando haya nuevos requisitos comerciales, primero considere cómo expandirse. Un solo componente solo implementa las funciones más simples, y se logra más a través de la expansión en lugar de la modificación de los componentes.
3. Un archivo de un solo componente preferiblemente no debe exceder los 200 o 400 kb
Perseguir breve y conciso, que es propicio para la depuración y reduce el alcance de la resolución de problemas
4. Evite funciones con demasiados parámetros. Verifique la validez de los parámetros en la entrada y verifique la corrección de la devolución en la salida
Evite errores al pasar parámetros cuando otros usan componentes, lo que genera muchos errores impredecibles.
5. Acoplamiento suelto, los componentes encapsulados no dependen de muchos otros componentes
Cuando todos los problemas se resuelven apilando un montón de códigos fuente abiertos, en primer lugar, habrá redundancia y, en segundo lugar, es difícil de depurar. Cuando uno de los módulos tiene un problema, todo el componente puede quedar inutilizable y dependencias complejas. también ocurren Cosas como conflictos de versión. Si desea confiar en componentes o bibliotecas, debe confiar en los estables que no cambian con frecuencia.
6. Sin efectos secundarios: sin dependencia, sin modificación de variables externas, las operaciones internas no afectan a otros componentes
Se puede reemplazar de forma segura con la condición de que se garantice que la entrada/salida no cambiará.
7. Extraiga la esencia, algunas cosas irrelevantes, como la adquisición de datos, la organización de datos o la lógica de procesamiento de eventos, idealmente deben moverse a js externos o colocarse en el componente principal para el procesamiento, el componente solo es responsable de la visualización de la interfaz de usuario o el cumplimiento de la función.
8. Componentización razonable
Convertir grandes bloques de código en componentes reutilizables y poco acoplados tiene muchas ventajas, pero no todas las estructuras de página deben extraerse en componentes, y no todas las partes lógicas deben extraerse fuera de los componentes. Cuando realmente llevamos a cabo el trabajo de extracción de componentes, debemos considerar no sobre-componentizar. Entonces podemos juzgar de acuerdo con los siguientes puntos al decidir si extraer componentes:
a) ¿Hay suficiente estructura/lógica de página para garantizarlo? Si son solo unas pocas líneas de código, puede terminar creando más código para separarlo.
b. ¿Duplicación de código (o posible duplicación)? Si algo se usa solo una vez y sirve para un caso de uso específico que es poco probable que se use en otro lugar, podría ser mejor incrustarlo.
c. ¿Se verá afectado el rendimiento? El cambio de estado/accesorios hará que el componente se vuelva a renderizar.Cuando esto sucede, todo lo que necesita es volver a renderizar los nodos de elementos relevantes obtenidos después de la diferenciación. En componentes más grandes y estrechamente acoplados, es posible que los cambios de estado provoquen que se vuelvan a renderizar en muchos lugares donde no es necesario, y el rendimiento de la aplicación puede comenzar a verse afectado.