El origen y desarrollo de React
El origen de React: Facebook salió en 2013 y se introdujo en China en 2014. Al mismo tiempo, recibió mucha atención en Github. Las principales empresas nacionales asignarán. mano de obra y recursos materiales para investigarlo y utilizarlo.
El punto de partida de React: el desarrollo de una interfaz front-end basada en HTML se está volviendo cada vez más complejo. La esencia del problema se puede atribuir básicamente a cómo reflejar de manera eficiente los datos dinámicos del servidor o la entrada del usuario. en una interfaz de usuario compleja. El marco React de Facebook es una solución a este problema. Según su sitio web oficial, su punto de partida es: crear grandes aplicaciones con datos que cambian con el tiempo. En comparación con el desarrollo front-end tradicional, React abre otra forma de lograr un desarrollo de interfaz front-end eficiente y de alto rendimiento.
Conocimiento conceptual de React:
Proyectos aplicables: aplicaciones a gran escala con datos que cambian con el tiempo, ventajas: alto rendimiento y eficiencia
React It is; un marco js front-end liviano que intenta crear capas;
Características y ventajas de React:
1. Sintaxis JSX sugar
El nombre completo es javascript xml se usa para ayudar a React a construir una estructura dom virtual. No use jsx. Debe usar React.createElement(tagName,options:(id,className),contents...).
El uso de la sintaxis jsx facilitará el desarrollo de reacción, xml significa que solo necesita tomar prestada algo de sintaxis XML, la etiqueta debe estar cerrada y la capa más externa debe estar envuelta con nodos.
La sintaxis jsx debe compilarse en React.createElement
2. DOM virtual
React construirá un conjunto completo de api de DOM virtual en js basado en la estructura de DOM virtual del componente. React lo reconstruirá cada vez que cambien los datos. Un conjunto completo de DOM virtual y utiliza el algoritmo DIFF para calcular la diferencia entre el último DOM virtual y el renderizado. Dado que todas las operaciones se realizan en el DOM virtual, las operaciones se realizan en el real. Los DOM se evitan en gran medida, por lo que el rendimiento es extremadamente alto. Además, React también puede fusionar dos cambios de datos consecutivos
Nota: ¿Cómo crea React un DOM virtual y cómo se compara el algoritmo DIFF?
3. Flujo de datos unidireccional
De hecho, el núcleo de reaccionarjs es el enlace de datos. El llamado enlace de datos significa que siempre que algunos datos en el lado del servidor estén vinculados a la página de inicio, el desarrollador solo necesita vincular algunos datos. desde el lado del servidor a la página de inicio Solo concéntrese en realizar el negocio
Flujo de datos unidireccional: mientras los datos en el lado del servidor cambien, los datos en el extremo frontal también cambiarán. en consecuencia
4. Desarrollo de componentes
El desarrollo de componentes de React es un reflejo de su alta eficiencia
Los componentes son en realidad la agregación de html, JS, CSS e imágenes en la estructura de la página
Los componentes deben tener los siguientes atributos:
(1) Composibilidad: los componentes son fáciles de usar con otros componentes o están anidados dentro de otros componentes. Si un componente se crea dentro de otro componente, entonces el componente principal es propietario de los componentes secundarios que creó. A través de esta función, una interfaz de usuario compleja se puede dividir en varios componentes de interfaz de usuario simples (2) Reutilizable: la función de cada componente es independiente; se puede usar en múltiples escenarios de interfaz de usuario; (3) Mantenible: cada componente pequeño es fácil de usar con otros componentes o está anidado dentro de otro componente.
(3) Mantenible: cada componente pequeño solo contiene su propia lógica, que es más fácil de entender y mantener (4) Comprobable: debido a que cada componente es independiente, cada componente se prueba por separado, obviamente, es mucho más fácil que probar la interfaz de usuario completa.
Principio de división de componentes: alta reutilización, lógica más independiente
5. Objetos centrales de React
react.js React, react-dom.js tiene un ReactDOM
6 estilos y eventos de React
R Se recomienda utilizar estilos en línea, que pueden proteger los componentes en mayor medida. R recomienda usar estilos en línea, que pueden proteger en mayor medida la independencia de los componentes, y los eventos deben configurarse mediante métodos de configuración en línea
7 accesorios y estado de los componentes de React
R depende en gran medida de los accesorios y el estado para instalar los datos; 1. Las propiedades se pasan fuera del componente o se configuran internamente y se obtienen internamente a través de this.props del componente. Similitud: ambos son objetos js puros, ambos activan actualizaciones de representación y ambos son deterministas (mismo estado/propiedad, mismo resultado). Diferencia: las propiedades se pueden obtener del componente principal, pero el componente principal no puede modificar las propiedades. y las propiedades de estado No permitido pueden tener valores predeterminados establecidos internamente y su estado puede ser modificado por los componentes principales. El componente principal puede modificar las propiedades, pero no los estados. Las propiedades pueden tener valores predeterminados establecidos internamente y el estado se puede cambiar. Las propiedades pueden establecer el valor inicial de los subcomponentes, pero el estado no se puede cambiar. Marque el DOM y los subcomponentes mediante ref en la estructura de renderdom y obtengalos a través de this.refs en el componente. Puede operar el DOM real y llamar a las propiedades y métodos de los subcomponentes
9. Ciclo de vida
10. Comunicación del componente
11.