1. Que es reaccionar
React](https://reactjs.org) es una biblioteca de JavaScript dedicada a la creación de **interfaces de usuario**.
Reaccionar núcleo
núcleo concepto
componentes
¿Entiendes los componentes?
Componible, reutilizable, mantenible, comprobable
2. ¿Cuáles son las características de React?
● Diseño declarativo: React adopta una declaración de paradigma. Los desarrolladores solo necesitan declarar el contenido de la pantalla y React lo completará automáticamente. ●
Eficiente: React minimiza la interacción con DOM al simular DOM (es decir, DOM virtual)
● Flexible: React puede funciona bien con bibliotecas o marcos conocidos.Componentización
: cree componentes a través de React para facilitar la reutilización del código.Se puede aplicar bien en el desarrollo de proyectos a gran escala y dividir las funciones de la página en pequeños módulos.Cada módulo pequeño es el componente ●
Unidireccional flujo de datos: reaccionar es un flujo de datos unidireccional, y los datos se pasan del nodo principal al nodo secundario a través de accesorios. Si cambia un accesorio del padre, reaccionar volverá a representar todos los nodos secundarios
3. ¿Qué es JSX?
JSX es una extensión de sintaxis de JavaScript que nos permite escribir código similar a HTML en JavaScript. Es uno de los núcleos de React y se utiliza para describir la estructura y el estilo de los componentes de la interfaz de usuario.
4. ¿Cuáles son los tipos de componentes en React?
Los componentes en React se pueden dividir en dos tipos:
Componentes funcionales: use funciones para definir componentes.
Componentes de clase: use clases de ES6 para definir componentes.
4.1 Enumere algunas de las principales ventajas de React
- Mejore el rendimiento de la aplicación con DOM virtual.
- JSX hace que el código sea fácil de leer y escribir.
- Hace renderizado (SSR) tanto en el lado del cliente como en el del servidor.
- Fácil de integrar con marcos (Angular, Backbone) ya que es solo una biblioteca de vistas.
- Es fácil escribir pruebas unitarias y de integración con herramientas como Jest.
4.2 Limitaciones de React
- React es solo una biblioteca de vista, no un marco completo.
- Para los principiantes nuevos en el desarrollo web, hay una curva de aprendizaje.
- La integración de React en un marco MVC tradicional requiere una configuración adicional.
- La complejidad del código aumenta con la adición de plantillas en línea y JSX.
- Demasiados componentes pequeños conducen a un exceso de ingeniería o creación de plantillas.
4.2 ¿Cómo modularizar código en React?
Puede usar los atributos de exportación e importación para modularizar su código. Ayudan a escribir componentes por separado en diferentes archivos.
Focus reaccionar vs vue? / ¿Diferencia entre vue y react? (Dahua, Alí)
1. Los mismos puntos:
● Ambos admiten la representación del servidor
● Ambos tienen dom virtual, desarrollo basado en componentes, transfieren datos de componentes padre-hijo a través de parámetros props, y ambos implementan especificaciones de componentes web ● Ambos
son vistas basadas en datos
● Ambos tienen administración de estado, react tiene redux, Vue tiene vuex
● Hay soluciones compatibles con native. React tiene react native vue tiene weex.
2. Diferencias:
● React es estrictamente solo para la capa de vista de mvc, y vue es el modo mvvm
● El método de representación de plantilla es diferente
○ La sintaxis de la plantilla es diferente, y React se procesa a través de jsx, vue se procesa a través de una sintaxis html extendida.
○ El principio de la plantilla es diferente: React implementa la sintaxis común en la plantilla a través de JS nativo en el código JS del componente, como interpolación, condiciones, bucles, etc., que se realizan a través de la sintaxis JS, que es más pura y nativo. Vue se implementa a través de instrucciones en una plantilla separada separada del código JS del componente. Por ejemplo, las declaraciones condicionales requieren v-if para lograr esto.
● El dom virtual es diferente, vue rastreará las dependencias de cada componente y no es necesario volver a representar todo el árbol de componentes del dom, pero la reacción es diferente, cuando se cambia el estado de la aplicación, todos los componentes se volverán a generar. -renderizado, por lo que la vida de shouldcomponentupdate se usa en la función de gancho periódico de reacción para controlar
● Los componentes se escriben de manera diferente, reaccionar es jsx y estilo en línea, es decir, todo html y css se escriben en js, vue es html, css, y js están en el mismo archivo ● el enlace de datos es diferente,
vue Enlace de datos bidireccional realizado, el flujo de datos de reacción es unidireccional
● En reaccionar, el objeto de estado necesita usar el método setstate para actualizar el estado. En vue, el objeto de estado no es necesario y los datos son administrados por el atributo de datos en el objeto vue.
¿Escenarios aplicables para vue y react? / vue, selección de tecnología de reacción?
● Si la aplicación necesita ser lo más pequeña y rápida posible, use vue. La velocidad de renderizado de vue es más rápida que la de react.
● Se recomienda usar react para proyectos a gran escala, porque el uso de plantillas de vue no es fácil de encontrar errores, y no es fácil de dividir y probar.
● Si es adecuado para aplicaciones web y nativas Para proyectos, use reaccionar nativo
¿La diferencia y la conexión entre vue y react?
Representación de plantilla de vue y react, dominio virtual entre los dos, diferencia de diferencias (vue2, vue3, react16), actualización por lotes de los dos, diferencia de enrutamiento, métodos de optimización comunes, cómo comunicar datos y contenido nuevo: ¿Cuáles son las características? de vue3, y finalmente, hablemos de la ecología actual de los dos. . .
5. ¿Qué son los accesorios?
Los accesorios son propiedades que se pasan a los componentes en React. Son de solo lectura y no se pueden cambiar dentro del componente. Piense en los accesorios como configuración para un componente. es una forma de pasar valores
6. ¿Qué es el estado?
state es un objeto usado en React para almacenar el estado interno de un componente. Son mutables y se pueden cambiar dentro del componente. Cuando el estado cambie, el componente se volverá a renderizar. herramienta de gestión del estado
7. ¿Qué son los métodos del ciclo de vida?
Los métodos de ciclo de vida son un conjunto especial de métodos en React que se llaman durante el ciclo de vida de un componente. Estos métodos nos permiten realizar acciones específicas en diferentes etapas del componente, como inicializar el componente, actualizar el componente, desmontar el componente, etc.
8. ¿Cuáles son los métodos de ciclo de vida en React?
Hay tres fases del ciclo de vida en React:
Fase de montaje: los componentes se crean y se agregan al DOM.
Fase de actualización: cuando cambian las propiedades o el estado del componente, el componente se vuelve a renderizar.
Fase de desmontaje: el componente se elimina del DOM.
Entre estas fases, React proporciona los siguientes métodos de ciclo de vida:constructor()
estático getDerivedStateFromProps()
render()
componenteDidMount()
shouldComponentUpdate()
getSnapshotBeforeUpdate()
componenteDidUpdate()
componenteWillUnmount()
9. ¿Qué es el método constructor()?
El método constructor() es el constructor del componente React. Se llama cuando se crea el componente y se puede utilizar para inicializar el estado del componente y los métodos enlazados.
10. ¿Qué es el método render()?
El método render() es uno de los métodos principales de los componentes de React. Devuelve la estructura DOM virtual del componente y es responsable de manejar la representación del componente.
11. ¿Qué es el método componentDidMount()?
El método componentDidMount() es uno de los métodos de ciclo de vida de los componentes de React. Se llama después de que el componente se haya agregado al DOM y se puede usar para realizar algunas operaciones de inicialización, como obtener datos o agregar detectores de eventos.
12. ¿Qué es el método shouldComponentUpdate()?
El método shouldComponentUpdate() es uno de los métodos de ciclo de vida de los componentes de React. Se llama cuando cambian las propiedades o el estado de un componente, y se puede usar para decidir si el componente debe volver a renderizarse.
13. ¿Qué es el método componentDidUpdate()?
El método componentDidUpdate() es uno de los métodos de ciclo de vida de los componentes de React. Se llama después de que las propiedades o el estado de un componente hayan cambiado, y se puede usar para realizar algunas operaciones de actualización, como actualizar el DOM o recuperar datos.
14. ¿Qué es el método componentWillUnmount()?
El método componentWillUnmount() es uno de los métodos de ciclo de vida de los componentes de React. Se llama antes de que se desmonte el componente y se puede usar para realizar algunas operaciones de limpieza, como cancelar detectores de eventos o borrar temporizadores.
15. ¿Qué es el método setState()?
El método setState() es uno de los métodos de los componentes de React. Se utiliza para actualizar el estado del componente y activará una nueva representación del componente.
16. ¿Qué es React Router?
React Router es una biblioteca React para crear aplicaciones de una sola página. Nos permite definir rutas en la aplicación y renderizar diferentes componentes basados en cambios de URL.
17. ¿Cuáles son los componentes de React Router?
Hay los siguientes componentes en React Router:BrowserRouter: se utiliza para habilitar el enrutamiento del historial de HTML5 en la aplicación.
HashRouter: se utiliza para habilitar el enrutamiento hash en la aplicación.
Ruta: se utiliza para definir reglas de enrutamiento en la aplicación.
Conmutador: se utiliza para seleccionar una de varias reglas de enrutamiento.
Enlace: se utiliza para navegar a otras páginas de la aplicación.
18. ¿Qué es Redux?
Redux es una biblioteca de JavaScript para administrar el estado de la aplicación. Es una arquitectura de flujo de datos unidireccional que nos permite organizar y administrar mejor el estado de la aplicación.
19. ¿Cuáles son los conceptos básicos en Redux?
Existen los siguientes conceptos básicos en Redux:Store: Se utiliza para gestionar el estado de la aplicación.
Acción: Se utiliza para describir el evento que ocurrió.
Reductor: se utiliza para procesar la Acción y actualizar el estado.
Despacho: se usa para enviar Acción a Reductor.
20. ¿Qué es React Redux?
React Redux es una biblioteca para usar Redux en aplicaciones React. Proporciona algunos ayudantes para facilitarnos el uso de Redux en los componentes de React.
21. ¿Cómo usar Redux en React?
El uso de Redux con React requiere los siguientes pasos:
Instala Redux y React Redux.
Crea una tienda Redux.
Cree un Reductor para procesar la Acción y actualizar el estado.
Use la función connect() en un componente React para conectar el componente a la tienda Redux.
22. ¿Qué son los ganchos de reacción?
Los React Hooks son un conjunto de funciones introducidas en React 16.8 que nos permiten usar el estado y otras características de React en componentes funcionales sin usar componentes de clase.
23. ¿Qué son los ganchos de reacción?
Los ganchos de reacción tienen las siguientes funciones:
useState()
useEffect()
useContext()
useReducer()
useCallback()
useMemo()
useRef()
useImperativeHandle()
useLayoutEffect()
useDebugValue()
24. ¿Qué es useState()?
useState() es una de las funciones más utilizadas en React Hooks. Nos permite usar el estado en componentes funcionales y puede persistir el estado durante la vida útil del componente.
25. ¿Qué es useEffect()?
useEffect() es una función en React Hooks que nos permite realizar operaciones de efectos secundarios en componentes funcionales, como obtener datos o agregar detectores de eventos. Es similar a una combinación de los métodos de ciclo de vida componentDidMount() y componentDidUpdate().
26. ¿Qué es useContext()?
useContext() es una función en React Hooks que nos permite usar el contexto de React en componentes de funciones. Nos permite compartir fácilmente datos entre componentes.
27. ¿Qué es useReducer()?
useReducer() es una función en React Hooks que nos permite usar reductores de estilo Redux en componentes funcionales para administrar el estado. Nos permite organizar y gestionar mejor el estado de nuestros componentes.
28. ¿Qué es useCallback()?
useCallback() es una función en React Hooks que nos permite almacenar en caché funciones de devolución de llamada en componentes funcionales para evitar recrearlos en cada renderizado. Esto puede mejorar el rendimiento del componente.
29. ¿Qué es useMemo()?
useMemo() es una función en React Hooks que nos permite almacenar en caché los resultados de los cálculos en los componentes de la función para evitar volver a calcularlos en cada renderizado. Esto puede mejorar el rendimiento del componente.
30. ¿Qué es useRef()?
useRef() es una función en React Hooks que nos permite crear una referencia mutable en los componentes de la función. Se puede usar para guardar el estado del componente o para hacer referencia a elementos DOM.
¿Qué son los componentes controlados y no controlados?
Comprendamos un poco qué son los componentes controlados y los componentes no controlados:
Componentes controlados: los componentes que solo pueden modificar datos o estados a través de React son componentes controlados;
componentes no controlados: a diferencia de los componentes controlados, como input, textarea, select, checkbox y otros componentes, el control en sí mismo puede controlar datos y cambios de estado, y React no sabe acerca de estos cambios,
entonces, ¿cómo cambia un componente no controlado en un componente controlado? Eso es entregar los datos del componente html puro anterior o los cambios de estado a React para la operación:const App = () => { const [valor, setValue] = useState(''); const [marcado, setChecked] = useState(false); return ( <> <valor de entrada={valor} onInput={evento => setValue(evento.objetivo.valor)} /> <input type="casilla de verificación" marcada={marcada} onChange={evento => setChecked(evento.objetivo.marcada)} /> </ > ); }; en lo anterior code , los cambios del cuadro de entrada y la casilla de verificación son operados por React, y React puede saber cuándo cambian los datos.
¿Por qué usar Hook en React?
Es difícil reutilizar la lógica de estado entre los componentes: en los componentes de clase, es posible que se requieran accesorios de representación y componentes de orden superior, pero formará una "región anidada"; y usando Hook, la lógica de estado se puede extraer de los componentes, que es Estos las lógicas se pueden probar por separado y reutilizar;
los componentes complejos se vuelven difíciles de entender: en los componentes de clase, cada ciclo de vida a menudo contiene alguna lógica no relacionada. Por ejemplo, se deben ejecutar y adquirir diferentes lógicas de ejecución en componenteDidMount, y luego borrarlas en componenteWillUnmount; pero en los componentes de función, se pueden ejecutar diferentes lógicas en diferentes ganchos sin interferir entre sí; clase incomprensible: los componentes de clase están llenos de varios usos
de this, como this.onClick.bind(this), this.state, this.setState(), etc. Al mismo tiempo, la clase no se puede comprimir bien y hará que el calor se recargue La carga es inestable; Hook te permite usar más funciones de React en situaciones que no sean de clase;
Escenarios de uso de useCallback y useMemo
useCallback y useMemo se pueden usar para almacenar en caché funciones y variables para mejorar el rendimiento y reducir el desperdicio de recursos. Pero no todas las funciones y variables deben implementarse con estos dos, y también tiene escenarios de uso correspondientes.
Sabemos que useCallback puede almacenar en caché el cuerpo de la función. Cuando no hay cambios en las dependencias, el cuerpo de la función utilizado es el mismo en las dos representaciones. Sus escenarios de uso son:
Cuando las funciones son dependencias de otros ganchos (como en useEffect());
las funciones se usan como accesorios de componentes en React.memo() (o shouldComponentUpdate);
principalmente para evitar funciones regeneradas que causarán otros ganchos o componentes No es necesario actualizar .useMemo se utiliza para almacenar en caché el resultado de la ejecución de la función. Si necesita realizar una operación compleja cada vez que renderiza, o si una variable necesita depender del resultado de otra variable, puede usar useMemo().
Proceso de diferencias de React
React solo compara nodos en el nivel actual, no comparaciones entre niveles;
de acuerdo con diferentes tipos de nodos, como nodos de componentes de función, nodos de componentes de clase, nodos de fibra ordinarios, nodos de matriz, etc., ingrese diferentes funciones de procesamiento; compare
dos nodos de fibra antes y después, si el tipo es diferente, descarte directamente el antiguo nodo de fibra y cree un nuevo nodo de fibra; si la clave es diferente, debe juzgar de acuerdo con la situación, si es un solo elemento, deséchelo directamente y cree un nuevo nodo de fibra; si es un elemento digital, verifique si la posición se ha movido; si no se encuentra, cree un nuevo nodo; si la clave y el tipo son los mismos, recurra hacia abajo; si es un solo nodo de
fibra , regrese directamente; si es un nodo de fibra con múltiples elementos en paralelo, aquí se formará una lista enlazada unidireccional, y luego se devolverá el puntero principal (el nodo de fibra al frente de la lista enlazada); a través
del arriba del proceso de comparación de diferencias, también podemos ver que cuando el componente sufre cambios relativamente grandes, React necesita hacer más acciones para construir un nuevo árbol de fibra, por lo que en el proceso de desarrollo, si lo consideramos desde la perspectiva de la optimización del rendimiento, deberíamos pagar atención especial a:No genere una gran cantidad de operaciones de salto en los nodos: debido a que React solo compara nodos en el mismo nivel, si un nodo secundario en la misma posición tiene un cambio relativamente grande, solo descartará el nodo de fibra anterior y ejecutará el proceso de creación una nueva operación de nodo de fibra; React no moverá el nodo de fibra anterior a otra ubicación; en consecuencia, después de que el nodo jsx anterior se mueva a otra ubicación, también realizará más operaciones de creación después de comparar antes y después; no modifique la clave del
nodo y los tipos de tipos, como el uso de números aleatorios como la clave de la lista, o el cambio de la etiqueta div a la etiqueta p, etc., descartarán directamente el nodo de fibra anterior y todos los nodos secundarios durante el proceso de comparación de diferencias (incluso si el nodo secundario no tiene cambios), y luego recrear un nuevo nodo de fibra;
31. ¿Qué es useImperativeHandle()?
useImperativeHandle() es una función en React Hooks que nos permite personalizar el valor de instancia expuesto al componente principal en el componente de función. Esto se puede utilizar para crear componentes reutilizables.
32. ¿Qué es useLayoutEffect()?
useLayoutEffect() es una función en React Hooks, es similar a useEffect(), pero se activa sincrónicamente antes de la actualización de DOM. Esto se puede usar para manejar situaciones en las que el DOM debe actualizarse sincrónicamente.
33. ¿Qué es useDebugValue()?
useDebugValue() es una función en React Hooks que nos permite depurar el valor de Hooks personalizados en las herramientas de desarrollo de React.
34. ¿Qué es React Native?
React Native es una biblioteca React para crear aplicaciones móviles nativas. Nos permite crear aplicaciones multiplataforma utilizando JavaScript y React, y puede ejecutarse en iOS y Android.
35. ¿Cuáles son los componentes principales de React Native?
Hay los siguientes componentes básicos en React Native:
Vista: Similar al elemento div en HTML, usado para contener otros componentes.
Texto: se utiliza para mostrar texto.
Imagen: se utiliza para mostrar imágenes.
TextInput: se utiliza para obtener el texto ingresado por el usuario.
ScrollView: se utiliza para desplazarse por las páginas.
FlatList: se utiliza para mostrar la lista.
TouchableOpacity: se utiliza para crear elementos en los que se puede hacer clic.
36. ¿Qué es React Native CLI?
React Native CLI es una herramienta de línea de comandos para React Native para crear y administrar aplicaciones React Native. Nos permite construir y ejecutar aplicaciones React Native en nuestro entorno de desarrollo local.
37. ¿Qué es Expo?
Expo es una plataforma de servicios y herramientas de desarrollo para crear aplicaciones React Native. Proporciona funciones útiles, como creación rápida de prototipos, compilaciones y lanzamientos automatizados, pruebas de dispositivos y más.
38. ¿Qué es React Native Navigation?
React Native Navigation es una biblioteca para implementar la navegación en aplicaciones React Native. Proporciona un conjunto de API fáciles de usar para administrar la pila de navegación de una aplicación y las transiciones entre pantallas. Admite varios tipos de navegación, como navegación por pilas, navegación por pestañas y navegación por cajones, y se puede integrar con bibliotecas de administración de estado como Redux. React Native Navigation también cuenta con alto rendimiento, efectos de animación suaves y la capacidad de personalizar temas, lo que facilita a los desarrolladores la creación de interfaces de navegación hermosas y fáciles de usar.
¿Cuáles son las diferentes formas de declarar componentes en React? / ¿Cuáles son las diversas formas de construir componentes en React?
1. Hay tres formas de declarar componentes en React:
● Componentes funcionales sin estado
○ Es para crear componentes de visualización puros. Este componente solo es responsable de mostrar de acuerdo con los accesorios entrantes y no involucra operaciones de estado
○ Los componentes no se utilizarán Creación de instancias, se mejora el rendimiento general de la representación, no se puede acceder a este objeto, no se puede acceder al método de ciclo de vida
ES5 nativo React.createClass componentes definidos // RFC
○ React.createClass se vinculará automáticamente a los métodos de función, lo que resultará en una sobrecarga de rendimiento innecesaria. aumentando la probabilidad de que el código se vuelva obsoleto.
● El formulario de herencia ES6 amplía los componentes definidos por React.Component // RCC
○ La forma actualmente muy recomendada de crear componentes con estado eventualmente reemplazará el formulario React.createClass; en comparación con React.createClass, puede lograr una mejor reutilización del código.
2. Diferencias
1. La diferencia entre los componentes sin estado y estos últimos:
(1) En comparación con los componentes sin estado, React.createClass y React.Component crean componentes con estado, que deben ser instanciados y pueden acceder al método del ciclo de vida del componente. .
2. La diferencia entre React.createClass y React.Component:
(1) La función this es autovinculante
● Para un componente creado por React.createClass, el this de cada función miembro del componente está vinculado automáticamente por React, y esto en la función se establecerá correctamente.
● Para los componentes creados por React.Component, sus funciones miembro no vincularán esto automáticamente, y los desarrolladores deben vincularlo manualmente; de lo contrario, no podrá obtener el objeto de instancia del componente actual.
(2) El tipo de propiedad del componente propTypes y su propiedad props predeterminada defaultProps se configuran de manera diferente
● Cuando React.createClass crea un componente, el tipo de propiedad de los accesorios del componente y la propiedad predeterminada del componente se configurarán como las propiedades de la instancia del componente, donde defaultProps se configura utilizando el método getDefaultProps para obtener las propiedades predeterminadas del componente.
● Cuando React.Component configura estas dos informaciones correspondientes al crear un componente, se configuran como propiedades de la clase del componente, no como propiedades de la instancia del componente, es decir, las tan- llamadas propiedades estáticas de la clase.
(3) La configuración del estado inicial del componente es diferente
● El estado del componente creado por React.createClass es configurar el estado relacionado del componente a través del método getInitialState ●
El estado del componente creado por React. El componente es como el componente de inicialización en las propiedades del constructor se declaran iguales.
¿Cómo construir componentes en React?
● Componente personalizado: componente de función o componente sin estado, la primera letra del componente está en mayúscula
● Componente de clase: un componente de clase debe implementar un método de representación, que debe devolver un elemento jsx y envolver todo el contenido con un elemento externo
¿Cómo entiendes la frase "en React, todo es un componente"?
¿Cuál es la diferencia y la conexión entre Componente, Elemento, Instancia?
● Elemento: un elemento elemento es un objeto simple que describe cómo desea que se vea en la pantalla para un nodo DOM u otro componente componente. El elemento elemento puede contener otros elementos en sus props. Crear un elemento React es barato. Los elementos son inmutables una vez creados.
● Componente: un componente componente se puede declarar de muchas maneras. Puede ser una clase con un método render(), o simplemente definida como una función. En ambos casos, toma props como entrada y devuelve un árbol de elementos como salida.
● Instancia: una instancia de instancia es lo que señala con la palabra clave this en la clase de componente que escribe (Anotación: Instancia de componente). Es útil para almacenar el estado local y responder a los eventos del ciclo de vida.
Los componentes funcionales no tienen instancias en absoluto. Los componentes de clase (Class components) tienen instancias, pero nunca necesita crear una instancia de un componente directamente, porque React lo hace por nosotros.
¿Cómo agregar condicionalmente propiedades a los componentes de React?
Con algunas propiedades, React es lo suficientemente inteligente como para omitir la propiedad si el valor que se le pasa es un valor falso.
var InputComponent = React.createClass({ render: function() { var requerido = verdadero; var deshabilitado = falso;
return(
<input type="text" disabled={disabled} required={required}>
)
1
2
3
}
})
resultado de representación:
Otra forma posible es:
var condition = true;
var component = (
Componentes con estado, componentes sin estado
¿Diferenciar entre componentes con estado y sin estado?
Componentes con estado Componentes sin estado
1, almacenan información sobre los cambios de estado de los componentes en la memoria 1, calculan el estado interno de los componentes
2, tienen derecho a cambiar el estado 2, no tienen derecho a cambiar el estado
3, contienen estado pasado, presente y posible futuro cambios Caso 3. No incluye cambios de estado pasados, presentes y futuros posibles Caso
4. Recibe notificaciones de requisitos de cambio de estado de componentes sin estado y luego les envía accesorios 4. Recibe accesorios de componentes con estado y los trata como funciones de devolución de llamada
Escenarios de comprensión y uso de componentes con estado y sin estado
1. Componentes con estado
1. Características:
● Es un componente de clase
● Tiene herencia
● Puede usar esto
● Puede usar el ciclo de vida de reaccionar
● Se usa con más frecuencia y es fácil para desencadenar el ciclo de vida con frecuencia Función de enlace, que afecta el rendimiento
● Use el estado internamente para mantener sus propios cambios de estado, y los componentes con estado se renderizan de acuerdo con los accesorios pasados por los componentes externos y su propio estado.
2. Escenarios de uso:
● Necesidad de usar el estado.
● Necesidad de usar componentes de operación con estado (los componentes sin estado también pueden implementar una nueva versión de ganchos de reacción)
3. Resumen:
los componentes de clase pueden mantener sus propias variables de estado, es decir, el estado del componente, y los componentes de clase también tienen diferentes métodos de ciclo de vida , lo que permite a los desarrolladores tener más control sobre los componentes en las diferentes etapas del componente (montaje, actualización, desmontaje). Los componentes de clase pueden actuar como componentes sin estado y con estado. Cuando un componente de clase no necesita administrar su propio estado, también puede denominarse componente sin estado.
2. Componentes sin estado
1. Características:
● No depende de su propio estado
● Puede ser un componente de clase o un componente de función.
● La palabra clave this se puede evitar por completo. (Debido a que se usa el evento de función de flecha, no se requiere vinculación)
● Tiene un mayor rendimiento. Cuando no necesite usar ganchos de ciclo de vida, primero debe usar componentes de función sin estado.
● El componente no mantiene el estado dentro del componente y solo representa el componente de acuerdo con los accesorios pasados por el componente externo. Cuando los accesorios cambian , el componente se vuelve a renderizar.
2. Escenarios de uso:
● Los componentes no necesitan administrar el estado, visualización pura
3. Ventajas:
● Simplifica el código, enfócate en renderizar
● Los componentes no necesitan ser instanciados, no tienen ciclo de vida y mejoran el rendimiento. La salida (representación) solo depende de la entrada (propiedad), sin efectos secundarios
● Desacoplamiento y separación de vistas y datos
4. Desventajas:
● No se puede usar ref
● No hay método de ciclo de vida
● No se puede controlar la nueva representación de componentes porque No se puede usar el método shouldComponentUpdate, cuando Cuando el componente recibe nuevas propiedades, se volverá a representar
3. Resumen:
Para los componentes con estado interno y sin relación externa, se pueden considerar los componentes de estado, de modo que el árbol de estado no sea demasiado complicado y fácil de entender y manejar. Cuando un componente no necesita administrar su propio estado, es decir, un componente sin estado, debe diseñarse primero como un componente funcional. Tales como la costumbre, y otros componentes.
Componente funcional, componente de clase
¿Cuáles son las similitudes y diferencias entre el componente funcional (componente funcional, también llamado componente tonto, componente de visualización o componente de ganchos) y el componente de clase (componente de clase)? (Amigos de impuestos)
1. Similitudes: Ambos pueden recibir accesorios y devolver elementos de reacción
2. Diferencias:
● Ideas de programación: los componentes de clase necesitan crear instancias, orientados a objetos, los componentes de función no necesitan crear instancias, recibir entrada, devolver salida, programación funcional
● Ocupación de memoria: la construcción de clases necesita crear y guardar instancias, que ocupan una cierta cantidad de memoria
● Característica de captura de valor: los componentes de función tienen la característica de captura de valor. El componente de función puede capturar los valores representados (capturar los valores representados) y leer los datos en el cierre de representación, mientras que el componente de clase lee esto. en reaccionar, esto es variable, por lo que siempre puede obtener los accesorios más recientes ●
Estado : Los componentes de clase tienen su propio estado, los componentes de función no, solo a través de useState. Class guarda el objeto montado por el atributo de estado en el atributo memoizedState, mientras que Function usa una lista vinculada para guardar el estado, y el atributo memoizedState guarda el puntero principal de la lista vinculada.
● Ciclo de vida: los componentes de clase tienen un ciclo de vida completo, pero los componentes de función no. Puede usar useEffect para lograr un ciclo de vida similar. Comprobabilidad: los componentes de función son convenientes
para las pruebas.
Reutilización lógica: los componentes de clase heredan Hoc (anidamiento de caos lógico) , y la combinación es excelente. Para herencia, reutilización de lógica de enlace de componente de función
● Omitir actualización: shouldComponentUpdate PureComponent, React.memo
● Desarrollo futuro: los componentes de función se convertirán en la corriente principal, protegiendo esto, especificación, reutilización, adecuado para división de tiempo y representación
Componentes controlados, componentes no controlados ¿
Qué es un componente controlado (componente controlado)?
React es responsable de representar el componente del formulario, el valor es del elemento de formulario de entrada controlado por el estado se llama componente controlado
¿Qué sabes sobre los componentes controlados y no controlados? / ¿Qué es un componente controlado? ¿Qué son los componentes no controlados?
● El componente controlado es el componente en el control de React y es la única fuente de verdad para los datos del formulario.
● Los componentes no controlados son aquellos en los que el DOM procesa los datos del formulario, no en los componentes de React.
Aunque los componentes no administrados a menudo son más fáciles de implementar porque simplemente puede usar referencias para obtener valores del DOM, generalmente se recomienda preferir los componentes controlados a los componentes no administrados.
La razón principal de esto es que el componente controlado admite la validación de campos sobre la marcha, permite deshabilitar/habilitar botones de forma condicional y aplica el formato de entrada.
Componente controlado Componente no controlado
1, no mantiene su propio estado 1, mantiene su propio estado
2, los datos están controlados por el componente principal 2, los datos están controlados por dom
3, obtiene el valor actual a través de accesorios y luego notifica el cambio a través de devolución de llamada 3, refs para obtener el valor actual
los accesorios
distinguen entre estado (state) y propiedades (props)? / ¿Cuál es la diferencia entre (componente) state (estado) y props (props)?
● Props es un parámetro que se pasa al componente desde el exterior. Es de solo lectura. Una vez que se asigna el valor, no se puede modificar y el subcomponente solo se puede volver a renderizar pasando activamente nuevos accesorios desde el componente externo. Estado La
forma de visualización de un componente puede determinarse por el estado de los datos y los parámetros externos. El parámetro externo son los accesorios y los datos El estado es el estado. En primer lugar, cuando se inicialice el componente, use this.state para establecer un estado inicial para el componente. Estos datos se usarán para representar el componente cuando se represente por primera vez. El estado es diferente de los accesorios, y el estado puede ser Modify, modifique la condición del estado mediante este método.setState() los elementos de estado
reciben
el valor inicial del componente principal sí sí
puede cambiar el valor del componente principal no sí
establecer el valor predeterminado en el componente sí sí
cambiar dentro del componente sí no
establece el componente secundario El valor inicial de sí sí
se cambia dentro del componente secundario no sí
Funciones puras
¿Qué es una función pura?
Una función pura es aquella que no tiene dependencias y no modifica el estado de las variables fuera de su alcance. Esencialmente, las funciones puras siempre devuelven el mismo resultado dados los mismos argumentos.
estado
¿Qué es el estado en React? ¿Cómo se usa?
El estado es el núcleo de los componentes de React, la fuente de datos, y debe ser lo más simple posible. Básicamente, el estado es un objeto que determina la representación y el comportamiento de un componente. A diferencia de los accesorios, son mutables y crean componentes dinámicos e interactivos. Se puede acceder a ellos a través de this.state().
Cómo actualizar el estado del componente
this.setState(), useState
¿Cómo funciona el renderizado de React cuando se llama a setState?
La representación se puede dividir en dos pasos
● Representación de DOM virtual: cuando se llama al método de representación, devuelve una nueva estructura de DOM virtual del componente. Al llamar a setState(), se volverá a llamar a render, porque shouldComponentUpdate siempre devuelve verdadero de forma predeterminada, por lo que React no está optimizado de forma predeterminada.
● Representación nativa de DOM: React solo modificará los nodos DOM reales en el DOM virtual, y la cantidad de modificaciones es muy pequeña. Esta es una excelente característica de React, que optimiza los cambios del DOM real y hace que React sea más rápido.
¿Qué sucede después de que setState llama a setState ?
Después de que React llame a setstate, reaccionar combinará el objeto de parámetro entrante y el estado actual del componente para activar el proceso de reconciliación.
Durante el proceso de reconciliación, reaccionar construirá el árbol de elementos de reacción y volverá a representar toda la interfaz de la interfaz de usuario de acuerdo con el nuevo estado , y obtenga el árbol de elementos. Después de eso, reaccionar calculará automáticamente la diferencia entre los nodos antiguo y nuevo, y minimizará la representación de la interfaz de acuerdo con la diferencia.
¿setState es síncrono o asíncrono?
1. setState no es puramente síncrono/asincrónico, y su rendimiento variará según el escenario de la llamada:
● En las funciones de enlace de React y los eventos sintéticos, se comporta de forma asíncrona
● Síncrono:
○ En los eventos nativos de DOM (sin pasar por React La función de procesamiento de eventos directamente agregado por addEventListener)
○ Llamadas asincrónicas generadas por setTimeout/setInterval
2. Esta diferencia está determinada esencialmente por el método de trabajo del mecanismo de transacción de React y el mecanismo de actualización por lotes: en la implementación de la función setState de React, se juzgará si se actualiza este .state directamente o ponerlo en la cola de acuerdo con una variable isBatchingUpdates, e isBatchingUpdates es falso por defecto, lo que significa que setState actualizará este. React llama a this batchedUpdates antes de llamar a la función de procesamiento de eventos, la consecuencia es que el proceso de procesamiento de eventos setState controlado por React no actualizará this.state sincrónicamente.
¿Por qué se recomienda que el parámetro pasado a setState sea una devolución de llamada en lugar de un objeto
? Porque en setstate, las propiedades y el estado pueden actualizarse de forma asíncrona, es decir, cuando se procesa la misma variable, el procesamiento múltiple se combinará en uno. es el procesamiento por lotes; si se pasa una función, se realizará una llamada en cadena, y esta función se agregará a una cola de ejecución mediante reacción, y el código de la función se ejecutará secuencialmente.
● ¿
UseRef puede acceder a las referencias en el renderizado en React? ¿Por qué?
No, el DOM no se ha generado en la fase de renderizado y no se puede obtener el DOM. La adquisición de DOM debe estar en la fase previa a la confirmación y en la fase de confirmación.
Comunicación de componente
¿Comunicación de componente padre-hijo?
● Paso de valor directo: componente principal -> componente secundario
○ accesorios
● Paso de valor inverso: componente secundario -> componente principal
○ accesorios + devolución de llamada
● suscripción-publicación
● redux
¿Enfoque de componentes de niveles cruzados?
● Pasar valor capa por capa
○ padre -> hijo -> nieto..., pasar a través de accesorios, cargar a través de devolución de llamada
● transferencia de valor entre niveles
○ contexto
● suscribirse-publicar
● redux
¿Método de comunicación de componentes de Brother?
● A través del nodo principal común de los nodos hermanos, el nodo principal reenvía el mensaje
● Almacenamiento del navegador: use sessionStorage, localStorage
● Valor de transferencia de enrutamiento: si hay un salto entre dos componentes, puede usar la asignación de salto de enrutamiento
● Suscribir-publicar
● redux
¿Cuál es el papel de la clave en React?
Las teclas ayudan a React a identificar qué elementos han cambiado, como agregarlos o eliminarlos. Por lo tanto, debe asignar a cada elemento de la matriz un identificador definido.
Cuando se actualiza el componente, React compara internamente si el elemento ha cambiado según la clave y el tipo del elemento. Si hay un problema con los datos seleccionados como clave, puede ocurrir una excepción durante el proceso de actualización.