Las preguntas de entrevista React más completas

1. ¿Qué es DOM virtual?

El DOM virtual es la representación del DOM real en la memoria. La representación de ul se almacena en la memoria y se sincroniza con el DOM real. Este es un paso que ocurre cuando se llama a la función de representación y el elemento se muestra en la pantalla. todo el proceso se llama conciliar

2. ¿Cuál es la diferencia entre componentes de clase y componentes de función?

Los componentes de clase pueden usar otras funciones, como ganchos de estado y ciclo de vida, y él tiene esto

Los componentes de función solo pueden recibir accesorios para representar en la página, los componentes sin estado, sin esto, no pueden usar ganchos de ciclo de vida

El rendimiento de los componentes de función es mayor que el de los componentes de clase, porque es necesario crear una instancia de los componentes de clase, mientras que los componentes de función se pueden ejecutar directamente para obtener los resultados devueltos. Para mejorar el rendimiento, intente usar componentes de función

3. ¿Qué son las referencias en reaccionar?

Las referencias proporcionan una forma de acceder a los nodos DOM o a los elementos de React creados en el método de representación. En un flujo de datos típico, los accesorios son la única forma en que interactúan los componentes principal-secundario. Si desea modificar un componente secundario, debe volver a renderícelo con nuevos accesorios. En algunos casos, fuera del flujo de datos típico, los niños se ven obligados a modificar, y las referencias se pueden usar en este momento

Podemos agregar un atributo ref al componente a usar, que es una función de devolución de llamada que recibe como primer parámetro el elemento DOM subyacente o la instancia de montaje del componente.

El elemento de entrada tiene un atributo ref cuyo valor es una función que toma la entrada del elemento DOM real y la coloca en la instancia para que se pueda acceder a ella dentro de la  handleSubmit función.

A menudo mal entendido, solo funciona con componentes de clase  refs, pero refstambién se puede usar con componentes de función aprovechando los cierres en JS

4. ¿Cómo manejar eventos en reaccionar?

Para resolver los problemas de compatibilidad entre navegadores, SyntheticEvent la instancia se pasará a su función de controlador de eventos, SyntheticEventque es el contenedor de eventos nativo del navegador entre navegadores de React, y también tiene la misma interfaz que los eventos nativos del navegador, incluidos  stopPropagation() y  preventDefault().

Curiosamente, React en realidad no adjunta eventos a los nodos secundarios. React escucha todos los eventos en el nivel superior con un solo detector de eventos. Esto es bueno para el rendimiento y significa que React no necesita realizar un seguimiento de los detectores de eventos al actualizar el DOM.

5. ¿Cuál es la diferencia entre estado y props?

El mismo punto: todos son objetos js ordinarios, contienen información que afecta la salida de representación

La diferencia: el estado es que el componente administra los datos por sí mismo, controla su propio estado y es variable

props es el parámetro de datos pasado desde el exterior, inmutable

Un componente sin estado se denomina componente sin estado y un componente con estado se denomina componente con estado

Usa más accesorios y menos estado

6. ¿Cómo crear referencias?

Creado por React.createRef(), y adjunto al elemento de reacción a través del atributo ref, en el componente de construcción,

Por lo general, se  Refs asignarán a propiedades de instancia para que se pueda hacer referencia a ellas en todo el componente.

7. ¿Qué es un componente de orden superior?

Los componentes de orden superior (HOC) son funciones que toman un componente y devuelven un nuevo componente. Básicamente, este es un patrón que se derivó de la función de composición de React, llamados componentes puros , porque pueden aceptar cualquier componente secundario proporcionado dinámicamente, pero no modifican ni duplican ningún comportamiento en los componentes de entrada.

Los HOC se pueden usar para muchos casos de uso de la siguiente manera

• Reutilización de código, lógica y abstracción de bootstrapping
• secuestro de renderizado
• Abstracción de estado y operaciones.
• procesamiento de accesorios

8. ¿Cuál es la función de llamar a super en el constructor y pasar props como parámetros?

super() Los constructores de subclases no pueden usar referencias hasta que  se llame  al método this, y esto también es cierto para las subclases de ES6. La razón principal para pasar  props parámetros a  la llamada es poder pasarlos  super() en el subconstructor .this.propsprops

props El comportamiento de solo es diferente dentro del constructor, es el mismo fuera del constructor.

9. ¿Qué es un componente controlado?

En HTML, los elementos de formulario como  <input>, <textarea>y <select>generalmente mantienen su propio estado y se actualizan según la entrada del usuario. Cuando el usuario envía el formulario, los valores de los elementos anteriores se enviarán con el formulario.

Reaccionar funciona de manera diferente. El componente que contiene el formulario realizará un seguimiento de los valores de entrada en su estado y onChangevolverá a representar el componente cada vez que se active la función de devolución de llamada (por ejemplo) porque el estado se actualiza. Los elementos de formulario de entrada cuyo valor es controlado por React de esta manera se denominan componentes controlados.

10. ¿Cómo reaccionar.createElement?

const element = (

  <h1 className="greeting">

    Hello, world!

  </h1>

)

const element = React.createElement(

  'h1',

  {className: 'greeting'},

  'Hello, world!'

);

11. ¿Qué es jsx?

Cuando se lanzó por primera vez reaccionar, también se introdujo un nuevo dialecto js, ​​jsx, para incrustar la plantilla HTML original en el código JS. El navegador no puede leer el código JSX en sí mismo y debe convertirse a JS tradicional usando herramientas como y Babel. webpackMuchos desarrolladores pueden usar JSX sin darse cuenta porque ya está integrado con React

12. ¿Por qué no actualizar el estado directamente?

Si intenta actualizar el estado directamente, el componente no se volverá a procesar

El estado debe actualizarse mediante el método setState(), que actualiza el objeto de estado y, cuando el estado cambia, el componente responde volviendo a renderizar

13. ¿Cuáles son las diferentes fases del ciclo de vida de los componentes de React?

1. Inicialización : en esta fase, el componente está listo para establecer el estado de inicialización y las propiedades predeterminadas.
2. Montaje : el componente de reacción está listo para montarse en el navegador DOM. Esta fase incluye componentWillMounty componentDidMountmétodos de ciclo de vida.
3. Actualización : en esta fase, el componente se actualiza de dos maneras, enviando nuevas propiedades y estado. Esta fase incluye los métodos shouldComponentUpdate, componentWillUpdatey componentDidUpdateciclo de vida.
4. Desmontaje : en esta etapa, el componente ya no es necesario y se desmonta del DOM del navegador. Esta fase contiene  componentWillUnmount métodos de ciclo de vida.

Además de los cuatro ciclos de vida comunes anteriores, también hay una fase de manejo de errores:

Manejo de errores : en esta etapa, se llamará al componente cada vez que ocurra un error durante la representación, en un método de ciclo de vida o en el constructor de cualquier componente secundario. Esta fase contiene  componentDidCatch los métodos del ciclo de vida.

14. ¿Cuáles son los métodos de ciclo de vida de reacción?

• componentWillMount: se ejecuta antes de renderizar, se usa para la configuración a nivel de la aplicación en el componente raíz.
• componentDidMount: se ejecuta después de la primera representación, donde puede realizar solicitudes AJAX, operaciones DOM o actualizaciones de estado, y establecer detectores de eventos.
• componentWillReceiveProps: No se ejecutará durante la inicialización render, se activará cuando el componente reciba un nuevo estado (Props), generalmente se usa para volver a renderizar los componentes secundarios cuando se actualiza el estado del componente principal.
• shouldComponentUpdate: determina si actualizar el componente. Por defecto, devuelve true.  Esto se puede devolver si se determina que  el componente no necesita volver a renderizarse después state o  después de una actualización , que es una forma de mejorar el rendimiento.propsfalse
• componentWillUpdate: se ejecuta antes de shouldComponentUpdatedevolver  true la condición previa que determina que el componente debe actualizarse.
• componentDidUpdate: Se utiliza principalmente para actualizar el DOM en respuesta propso statecambios.
• componentWillUnmount: se utiliza para cancelar cualquier solicitud de red o eliminar todos los detectores de eventos asociados con el componente.

15. ¿Para qué se usan los tres puntos (...) en React?

 El operador de extensión, u operador de extensión, es útil para crear nuevos objetos con la mayoría de las propiedades de los objetos existentes y, a menudo, se usa al actualizar el estado.

16. ¿Cuáles son los beneficios de usar React Hooks?

Los ganchos son una nueva incorporación en React 16.8. statePermiten usar y otras características de React sin escribir clases . Con Hooks, la lógica con estado se puede extraer de los componentes para que se pueda probar y reutilizar de forma independiente. Los Hooks nos permiten reutilizar la lógica con estado sin cambiar la jerarquía de los componentes, lo que facilita compartir Hooks entre muchos componentes o con la comunidad.

¿Qué problema resuelven los ganchos?

        Los problemas de características en los componentes de clase se pueden usar en los componentes de función

17: ¿Qué hay en React  useState() ?

useState es un React Hook incorporado. useState(0) Devuelve una tupla donde el primer argumento countes el estado actual del contador, setCounter proporcionando métodos para actualizar el estado del contador.

Podemos usar el método para actualizar el estado de conteo en cualquier lugar setCounter; en este caso, setCountpodemos usarlo dentro de la función para hacer más cosas, usando Hooks, podemos mantener nuestro código más funcional y evitar el uso excesivo basado en componentes de clase.

Defina los datos del estado, el parámetro son los datos inicializados y el valor de retorno son dos valores 1. Valor de inicialización, 2. Método de modificación

El método modificado en useState es asíncrono

1. Supervisión de datos con la ayuda de useEffect

2. Puede definir el método de Hooks usted mismo, y la lógica puede devolverse dentro del método

18. ¿Qué es StrictMode en React?

React StrictModees un componente auxiliar que puede ayudarnos a escribir mejores componentes de reacción, que se puede usar para <StrictMode />envolver un conjunto de componentes y puede ayudarnos a verificar lo siguiente:

• Verifique que los componentes internos sigan ciertas prácticas recomendadas y le avise en la consola si no lo hacen.
• Verifique que se use un método en desuso y, de ser así, aparecerá una advertencia en la consola.
• Prevenga algunos efectos secundarios identificando los riesgos potenciales.

19. ¿Por qué los métodos de clase deben vincularse a una instancia de clase?

En js, el valor de this cambia según el contexto actual. En los métodos de componente de clase React, los desarrolladores generalmente quieren que esto se refiera a la instancia actual del crimen, por lo que es necesario vincular estos métodos a la instancia.

20. ¿Qué es la perforación puntal y cómo evitarla?

Al crear una aplicación React, anide los componentes en varios niveles para consumir los datos proporcionados por otro componente anidado. La forma más sencilla de hacer esto es  prop pasar una propiedad hacia abajo desde cada componente, desde el componente de origen hasta los componentes profundamente anidados .

prop drillingLa principal desventaja es que los componentes que de otro modo no requieren datos se vuelven innecesariamente complejos y difíciles de mantener.

Para evitar eso prop drilling, una forma común es usar React Context . Al definir componentes que proporcionan datos Providery permitir que los componentes anidados  usen datos contextuales a través de Consumercomponentes o HooksuseContext

21. ¿Describa Flux y MVC?

El patrón MVC tradicional funciona bastante bien para separar datos (Modelo), IU (Vista) y lógica (Controlador), pero las arquitecturas MVC a menudo sufren dos problemas principales:

Flujo de datos insuficiente : las actualizaciones en cascada que ocurren en las vistas a menudo conducen a redes caóticas de eventos que son difíciles de depurar.

Falta de integridad de los datos : los datos del modelo pueden mutar en cualquier lugar, produciendo resultados impredecibles en toda la interfaz de usuario.

Las interfaces de usuario complejas que usan el patrón Flux ya no sufren actualizaciones en cascada, cualquier componente de React dado puede  store reconstruir su estado en función de los datos proporcionados. El patrón Flux también refuerza la integridad de los datos al restringir el acceso directo a los datos compartidos.

22. ¿Cuál es la diferencia entre componentes controlados y componentes no controlados?

• Un componente controlado es un componente en un control React y es la única fuente de verdad para los datos del formulario.
• Los componentes no controlados son donde el DOM procesa los datos del formulario, no en los componentes de React.

Aunque los componentes no administrados suelen ser más fáciles de implementar porque simplemente puede usarlos refspara obtener el valor del DOM, generalmente se recomienda preferir los componentes controlados a los componentes no administrados.

La razón principal de esto es que los componentes controlados admiten la validación de campos sobre la marcha, permiten deshabilitar/habilitar botones condicionalmente, forzar el formato de entrada

23.  ¿Qué es el contexto de reacción?

Context Proporciona una forma de pasar datos a través del árbol de componentes, evitando la necesidad de pasar  props propiedades manualmente en cada nivel

24. ¿Qué es React Fiber?

Fiber  es el nuevo motor de coordinación o reimplementación del algoritmo central en React 16. Su objetivo principal es admitir la representación incremental del DOM virtual. El objetivo de React Fiber  es mejorar su usabilidad para animación, diseño, gestos, pausa, cancelación o reutilización, y asignar prioridades a diferentes tipos de actualizaciones, así como nuevas primitivas de concurrencia.

El objetivo de React Fiber es mejorar su aplicabilidad en áreas como animación, diseño y gestos. Su característica principal es el renderizado incremental: la capacidad de dividir el trabajo de renderizado en partes y distribuirlo en varios fotogramas.

25. ¿Cómo aplicar la validación de Props en ReactJS?

Cuando la aplicación se ejecuta en modo de desarrollo, React verificará automáticamente todo lo que configuramos en los componentes  propspara asegurarse de que tengan los tipos de datos correctos. Para los tipos incorrectos, se genera un mensaje de advertencia en la consola en el modo de desarrollo y se desactiva en el modo de producción debido al impacto en el rendimiento. Obligatorio  props por  isRequireddefinición.

Los siguientes son un conjunto de tipos de accesorios predefinidos:

• React.PropTypes.cadena
• React.PropTypes.número
• React.PropTypes.func
• React.PropTypes.nodo
• React.PropTypes.bool

26. ¿Cuál es la diferencia entre usar constructor y getInitialState en React?

La diferencia entre constructor y getInitialStatees la diferencia entre ES6y en ES5sí mismo. Al usar ES6una clase, debe inicializarse en el constructor statey los métodos React.createClassdeben definirse cuando se usan getInitialState.

27. ¿Reemplazarán  render props los ganchos componentes de orden superior?

render propsy los componentes de orden superior representan solo un componente secundario. El equipo de React cree que los Hooks son una forma más fácil de atender este caso de uso.

Ambos patrones aún tienen su lugar (por ejemplo, un  scroller componente virtual puede tener uno  renderItem propo un componente de contenedor visual puede tener su propia estructura DOM). Pero en la mayoría de los casos, los Ganchos son suficientes y pueden ayudar a reducir la anidación en el árbol.

28. ¿Cómo evitar volver a renderizar los componentes?

Uno de los problemas más comunes en React es que los componentes se vuelven a renderizar innecesariamente. React proporciona dos métodos que son útiles en estas situaciones:

• React.memo(): Esto evita que los componentes de la función se vuelvan a renderizar innecesariamente
• PureComponent: Esto evita que se vuelvan a renderizar innecesariamente los componentes de la clase.

Ambos métodos se basan en propsuna comparación superficial de lo que se pasa al componente y, si  props no ha cambiado, el componente no se volverá a procesar. Si bien ambas herramientas son muy útiles, las comparaciones superficiales conllevan una penalización de rendimiento adicional, por lo que ambos métodos pueden afectar negativamente el rendimiento si se usan incorrectamente.

Al usar  React Profiler , el rendimiento se puede medir antes y después de usar estos métodos, lo que garantiza que el rendimiento realmente mejore al realizar un cambio determinado.

29. ¿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.

30. Cómo  funciona React  cuando se invocasetStaterender

1. Representación DOM virtual: cuando renderse llama al método, devuelve la estructura DOM virtual de un nuevo componente. Cuando se llame setState(), se volverá a llamar, porque siempre regresa renderde forma predeterminada , por lo que React no está optimizado de forma predeterminada.shouldComponentUpdatetrue
2. Representación nativa de DOM: React solo modifica 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.

31. ¿Cómo evitar volver a vincular la instancia en React ?

1. Defina el controlador de eventos como una función de flecha en línea

class SubmitButton extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      isFormSubmitted: false

    };

  }

 

  render() {

    return (

      <button onClick={() => {

        this.setState({ isFormSubmitted: true });

      }}>Submit</button>

    )

  }

}

2. Use funciones de flecha para definir métodos:

class SubmitButton extends React.Component {

  state = {

    isFormSubmitted: false

  }

 

  handleSubmit = () => {

    this.setState({

      isFormSubmitted: true

    });

  }

 

  render() {

    return (

      <button onClick={this.handleSubmit}>Submit</button>

    )

  }

}

3. Usa componentes de funciones con Hooks

const SubmitButton = () => {

  const [isFormSubmitted, setIsFormSubmitted] = useState(false);

 

  return (

    <button onClick={() => {

        setIsFormSubmitted(true);

    }}>Submit</button>

  )

};

32. ¿Distinguir entre Real DOM y Virtual DOM ?

DOM real	DOM virtual
1. Las actualizaciones son lentas.	1. Actualizar más rápido.
2. HTML se puede actualizar directamente.	2. No se puede actualizar HTML directamente.
3. Si se actualiza el elemento, se crea un nuevo DOM.	3. Si el elemento está actualizado, actualice el JSX.
4. Las operaciones DOM son costosas.	4. La manipulación de DOM es muy simple.
5. Se consume más memoria.	5. Muy poco consumo de memoria.

 33.  ¿Qué es Reaccionar?

• React es una biblioteca JavaScript front-end desarrollada por Facebook en 2011.
• Sigue un enfoque basado en componentes que ayuda a crear componentes de interfaz de usuario reutilizables.
• Se utiliza para desarrollar interfaces de usuario móviles y web complejas e interactivas.
• Aunque solo fue de código abierto en 2015, tiene una gran comunidad de apoyo.

34. ¿Cuáles son las características de React?

Las principales funciones de React son las siguientes:

1. Utiliza DOM virtual  en lugar de DOM real.
2. Puede hacer renderizado del lado del servidor .
3. Sigue el flujo de datos unidireccional o el enlace de datos.

35.  Enumera algunas de las principales ventajas de React

1. Mejora el rendimiento de la aplicación.
2. Se puede usar fácilmente en el lado del cliente y del servidor
3. Gran legibilidad de código gracias a JSX
4. React se integra fácilmente con otros marcos como Meteor, Angular
5. Con React, escribir casos de prueba de UI se vuelve muy fácil

36.  ¿Cuáles son las limitaciones de React?

1. React es solo una biblioteca, no un marco completo
2. Su biblioteca es enorme y toma tiempo entender
3. Puede ser difícil de entender para los programadores novatos
4. La codificación se vuelve complicada ya que utiliza plantillas en línea y JSX

37.  ¿Por qué los navegadores no pueden leer JSX?

 Los navegadores solo pueden manejar objetos JavaScript, no pueden leer JSX dentro de objetos JavaScript normales. Entonces, para que el navegador lea JSX, primero debe usar un convertidor JSX como Babel para convertir el archivo JSX en un objeto JavaScript y luego pasarlo al navegador.

38. ¿En qué se diferencia la sintaxis de ES6 de React de la de ES5?

1. requerir e importar

2.exportación y exportaciones

3. componente 和 función

4 accesorios

5.estado

39.  ¿En qué se diferencia React de Angular?

tema	Reaccionar	Angular
1. Arquitectura	Solo ver en MVC	MVC completo
2. Representación	Puede hacer renderizado del lado del servidor	representación del cliente
3. DOM	Usar DOM virtual	Usar DOM real
4. Enlace de datos	enlace de datos unidireccional	enlace de datos bidireccional
5. Depuración	depuración en tiempo de compilación	depuración en tiempo de ejecución
6. Autor	Facebook	Google

40.  ¿Cómo entiendes la frase "En React, todo es un componente"?

Los componentes son los componentes básicos de la interfaz de usuario de una aplicación React. Estos componentes dividen toda la interfaz de usuario en pequeñas partes independientes y reutilizables. Cada componente es independiente entre sí sin afectar al resto de la interfaz de usuario.

41. Cómo explicar el propósito de render() en React

Cada componente de React es obligatorio tener un  render() . Devuelve un elemento React que es una representación de un componente DOM nativo. Si es necesario representar varios elementos HTML, deben agruparse dentro de una sola etiqueta adjunta, por ejemplo  <form>, <group>, <p> etc. Esta función debe ser pura, es decir, debe devolver el mismo resultado cada vez que se llama

42. ¿Qué son los accesorios?

Props es la abreviatura de propiedades en React. Son componentes de solo lectura y deben permanecer puros, es decir, inmutables. Siempre se pasan de los componentes principales a los secundarios a lo largo de la aplicación. Los componentes secundarios nunca deben devolver accesorios a los principales. Esto ayuda a mantener un flujo de datos unidireccional y, a menudo, se usa para representar datos generados dinámicamente.

43.  ¿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. this.state() Se puede acceder a través de 

44. Distinguir entre estado y utilería

condición	Estado	Accesorios
1. Recibir el valor inicial del componente padre	Sí	Sí
2. El componente principal puede cambiar el valor	No	Sí
3. Establecer el valor predeterminado en el componente	Sí	Sí
4. Cambios dentro del componente	Sí	No
5. Establecer el valor inicial del componente secundario	Sí	Sí
6. Cambio dentro del componente hijo	No	Sí

45.  ¿Cómo actualizar el estado de un componente?

 El estado del componente se puede  this.setState()actualizar con .

46.  ​​¿Qué son las funciones de flecha en React? ¿cómo utilizar?

 Las funciones de flecha ( => ) son una sintaxis corta para escribir expresiones de función. Estas funciones permiten vincular correctamente el contexto del componente, ya que la vinculación automática no está disponible de forma predeterminada en ES6. Las funciones de flecha son muy útiles cuando se trabaja con funciones de orden superior

47.  Distinguir entre componentes con estado y sin estado

componentes con estado	componentes sin estado
1. Almacenar información sobre los cambios de estado de los componentes en la memoria	1. Calcular el estado interno del componente
2. El derecho a cambiar de estado	2. Sin derecho a cambiar de estado
3. Incluir cambios de estado pasados, presentes y futuros posibles	3. No incluye posibles cambios de estado pasados, presentes y futuros
4. Acepte notificaciones de requisitos de cambio de estado para componentes sin estado y envíeles accesorios.	4. Reciba accesorios de componentes con estado y trátelos como funciones de devolución de llamada.

 48.  ¿Qué son los eventos en React?

En React, los eventos son reacciones desencadenadas a acciones específicas, como pasar el mouse por encima, hacer clic con el mouse, presionar una tecla, etc. El manejo de estos eventos es similar al manejo de eventos en elementos DOM. Pero hay algunas diferencias de sintaxis como:

1. Use camelCase para nombres de eventos en lugar de solo minúsculas.
2. Los eventos se pasan como funciones en lugar de cadenas.

Los parámetros de eventos contienen un conjunto de propiedades específicas de eventos. Cada tipo de evento contiene sus propias propiedades y comportamiento, a los que solo se puede acceder a través de sus controladores de eventos.

49. ¿Qué son los eventos sintéticos en React?

Los eventos sintéticos son objetos que actúan como contenedores entre navegadores en torno a los eventos nativos del navegador. Combinan el comportamiento de diferentes navegadores en una API. Esto se hace para garantizar que los eventos muestren propiedades consistentes en todos los navegadores.

50. ¿Cuál es la importancia de la clave en React?

Se utiliza una clave para identificar un elemento DOM virtual único y sus datos correspondientes que controlan la interfaz de usuario. Ayudan a React a optimizar el renderizado al reciclar todos los elementos que se encuentran actualmente en el DOM. Estas claves deben ser números o cadenas únicos, React simplemente reordena los elementos en lugar de volver a renderizarlos. Esto puede mejorar el rendimiento de la aplicación.

51. ¿ Qué es Redux ?

Redux es una de las bibliotecas de desarrollo front-end más populares de la actualidad. Es un contenedor de estado predecible para programas JavaScript, utilizado para la gestión de estado de toda la aplicación. Las aplicaciones desarrolladas con Redux son fáciles de probar, pueden ejecutarse en diferentes entornos y muestran un comportamiento consistente

 52. ¿Cuáles son los tres principios que sigue Redux?

1. Fuente única de verdad: el estado de toda la aplicación se almacena en un árbol de objeto/estado en una sola tienda. Un solo árbol de estado facilita el seguimiento de los cambios a lo largo del tiempo y la depuración o inspección de aplicaciones.
2. El estado es de solo lectura: la única forma de cambiar el estado es desencadenar una acción. Las acciones son objetos JS simples que describen cambios. Así como el estado es una representación mínima de datos, la operación es una representación mínima de un cambio en los datos.
3. Cambios usando funciones puras: para especificar cómo se transforma el árbol de estado mediante operaciones, necesita funciones puras. Las funciones puras son aquellas cuyo valor de retorno depende únicamente de los valores de sus argumentos.

53.  ¿Qué entiende por “única fuente de verdad”?

 Redux usa una "Tienda" para almacenar todo el estado del programa en un solo lugar. Entonces, el estado de todos los componentes se almacena en la Tienda y reciben actualizaciones de la Tienda misma. Un solo árbol de estado facilita el seguimiento de los cambios a lo largo del tiempo y la depuración o inspección de programas.

54. Lista los componentes de Redux

1. Acción  : este es un objeto que describe lo que sucedió.
2. Reductor  - Aquí es donde se determina cómo cambiará el estado.
3. Store  : el árbol de estado/objetos de todo el programa se mantiene en Store.
4. Ver  : solo muestra los datos proporcionados por la Tienda.

55.  ¿Cómo fluyen los datos a través de Redux?

56.  Cómo definir Acción en Redux

Las acciones en React deben tener un atributo de tipo que indique el tipo de ACCIÓN que se está ejecutando. Deben definirse como constantes de cadena y también se les pueden agregar más propiedades. En Redux, las acciones son creadas por funciones llamadas creadores de acciones.

57. Explique el papel del Reductor

Los reductores son funciones puras que especifican cómo cambia el estado de la aplicación en respuesta a las ACCIONES. Los reductores funcionan tomando un estado y una acción anteriores, luego devuelve un nuevo estado. Determina qué tipo de actualización debe realizarse en función del tipo de operación y devuelve el nuevo valor. Si no hay necesidad de completar la tarea, volverá al estado original

58. ¿ Cuál es el significado de Store en Redux?

Una tienda es un objeto de JavaScript que contiene el estado del programa y proporciona métodos para acceder al estado, enviar operaciones y registrar oyentes. Todo el árbol de estado/objetos de la aplicación se mantiene en un único almacén. Por lo tanto, Redux es muy simple y predecible. Podemos pasar middleware a la tienda para procesar datos y registrar varias operaciones que cambian el estado de la tienda. Todas las operaciones devuelven un nuevo estado a través de reductores.

59. ¿Cuáles son las ventajas de Redux?

Las ventajas de Redux son las siguientes:

• Previsibilidad de los resultados:  dado que siempre hay una fuente de la verdad, la tienda, no hay duda de cómo sincronizar el estado actual con las acciones y otras partes de la aplicación.
• Mantenibilidad:  el código se vuelve más fácil de mantener, con resultados predecibles y una estructura estricta.
• Representación del lado del servidor:  simplemente pasa la tienda creada en el servidor al cliente. Esto es útil para la representación inicial y optimiza el rendimiento de la aplicación para una mejor experiencia de usuario.
• Herramientas para desarrolladores:  desde acciones hasta cambios de estado, los desarrolladores pueden realizar un seguimiento de todo lo que sucede en la aplicación en tiempo real.
• Comunidad y ecosistema:  hay una gran comunidad detrás de Redux que lo hace aún más fascinante. Una gran comunidad de personas talentosas ha contribuido a las mejoras de la biblioteca y ha desarrollado varias aplicaciones.
• Facilidad de prueba:  el código de Redux es principalmente funciones pequeñas, puras y autónomas. Esto hace que el código sea comprobable y autónomo.
• Organización:  Redux explica exactamente cómo se organiza el código, lo que hace que el código sea más consistente y simple cuando lo usa el equipo.

60. ¿Qué es el enrutamiento de reacción?

 React Routing es una poderosa biblioteca de enrutamiento construida sobre React que ayuda a agregar nuevas pantallas y flujos a la aplicación. Esto mantiene la URL sincronizada con los datos que se muestran en la página web. Es responsable de mantener una estructura y un comportamiento estandarizados, y se utiliza para desarrollar aplicaciones web de una sola página. El enrutamiento de reacción tiene una API simple

61. ¿  Por qué se usa la palabra clave switch en React Router v4? 

 Aunque  <p> se usa para encapsular varias rutas en un enrutador, la palabra clave "cambiar" se puede usar cuando desea mostrar solo una ruta para representarla entre varias rutas definidas. Cuando se usan, <switch> las etiquetas hacen coincidir las URL definidas con las rutas definidas en orden. Después de encontrar la primera coincidencia, representa la ruta especificada. evitando así otras rutas

62.   ¿Por qué necesita enrutamiento en React?

El enrutador se usa para definir múltiples rutas, cuando un usuario define una URL específica, si esta URL coincide con la ruta de cualquier "ruta" definida dentro del enrutador, el usuario será redirigido a esa ruta específica. Básicamente, necesitamos agregar una biblioteca de enrutadores a nuestra aplicación que permita crear múltiples rutas, cada una de las cuales nos proporcionará una vista única.

63. Enumere las ventajas de React Router.

1. Al igual que React se basa en componentes, en React Router v4 la API es  "Todo sobre los componentes" . Un enrutador se puede visualizar como un único componente raíz ( ), donde envolvemos <BrowserRouter>subrutas específicas ( ).<route>
2. No es necesario configurar manualmente los valores del historial: en React Router v4, todo lo que teníamos que hacer era envolver las rutas en  <BrowserRouter> componentes.
3. Los paquetes están separados: hay tres paquetes para Web, Native y Core. Esto hace que nuestra aplicación sea más compacta. Fácil de cambiar según un estilo de codificación similar

64. ¿En qué se diferencia React Router del enrutamiento normal?

tema	enrutamiento regular	Enrutamiento de reacción
paginas participantes	Cada vista corresponde a un nuevo archivo	solo involucra una sola página HTML
cambios de URL	Se envía una solicitud HTTP al servidor y se recibe la página HTML correspondiente	Cambiar solo las propiedades del historial
experimentar	El usuario realmente cambia entre diferentes páginas en cada vista	Los usuarios piensan que están cambiando entre diferentes páginas

65. Ganchos de uso común

 useState: define los datos del estado, el parámetro son los datos inicializados y el valor de retorno son dos valores 1. Valor de inicialización, 2. Método de modificación

useEffect: función de efectos secundarios, como su nombre lo indica, los efectos secundarios solo ocurren después del uso

1. Úselo como un ciclo de vida: si el segundo parámetro no está escrito, se activará cuando se actualice la página, compoentDidMount compoentDidUpdate

2. Si el segundo parámetro es una matriz vacía, solo se ejecutará una vez, compoentDidMount

3. Algunas variables en la matriz se utilizan como oyentes para monitorear los cambios de datos,

4. useEffect es una función de efecto secundario, que se activa después de que se completa la actualización del componente

5. Si devolvemos una función de useEffect, se activa cuando se destruye el componente

useMemo: se utiliza para calcular datos, devolver un resultado y monitorear los cambios de datos. El segundo parámetro son los datos monitoreados, que se pueden almacenar en caché.

En comparación con useMemo y useEffect, useMemo activa el ciclo de vida cuando se actualiza el componente

¿Cómo optimiza el rendimiento useMemo?

Cuando el componente principal se comunica con el componente secundario, los datos del componente principal cambian. La actualización del componente principal hará que el componente secundario se actualice y represente, pero si los datos modificados no tienen nada que ver con el componente secundario, la actualización del componente secundario El componente causará DOM innecesario para el componente secundario La representación consume más rendimiento En este momento, podemos usar useMemo o memo como caché de componente para reducir la representación DOM innecesaria de los subcomponentes

useCallback: cuando el componente principal pasa una función al componente secundario, el cambio del componente principal provocará que se vuelva a llamar a la función para generar un nuevo alcance, por lo que seguirá provocando la representación actualizada del componente secundario. tiempo, podemos usar useCallback para almacenar en caché el componente

useRef: equivalente al uso de createRef, creando información de atributos de componentes

useContext: Es equivalente a obtener la información de contenido del número de estado del contexto en el componente de la función

useReducer: useReducer se usa para suplir la deficiencia de useState, puede administrar los datos de manera centralizada y procesar la información lógica de los datos por separado.

66. ¿Cómo usar ref en reaccionar?

1. Puede escribir una cadena directamente, pero solo se aplica a los componentes de clase

2. createRef y useRef para definir la variable ref, ref.current para obtener datos

3. Puede usar el método de función de flecha para definir una variable por adelantado, y el parámetro formal de la función de flecha es el objeto actual 

const App = ()=>{
  let h = useRef();

  let inp = null;//定义一个空变量

  const setVal = ()=>{
    console.log(inp.value);
  }
  return (
    <div>
      <h3 ref={h}>ceshi</h3>
      <button onClick={()=>console.log(h.current)}>获取</button>

      <hr />
      <input placeholder="输入内容" ref={(el)=>{ inp = el; }} onChange={setVal}/>
    </div>
  )
}

El atributo ref no se puede vincular directamente al subcomponente de la función. El componente de la función no tiene este objeto y el contenido del objeto del subcomponente de la función no se puede obtener. Finalmente, el componente de la función forwardRef componente de orden superior puede pasar el atributo ref a el subcomponente de función a través del parámetro parámetro Internamente, la operación de reenviar el atributo ref