Resumen de preguntas comunes de la entrevista de reacción (adecuado para front-end intermedio)

De https://segmentfault.com/a/1190000016885832?utm_source=tag-newest#item-11

¿Cuál es el papel de las claves en React?

Las claves son identificadores secundarios utilizados por React para rastrear qué elementos de una lista se han modificado, agregado o eliminado.

render () {
   return (
     <ul> 
      { this .state.todoItems.map (({item, key}) => {
         return <li key = {key}> {item} </li>
       })}
     </ ul >
   ) 
}

En el proceso de desarrollo, debemos asegurarnos de que la clave de un elemento sea única entre sus elementos hermanos. En el algoritmo React Diff, React utiliza el valor clave de un elemento para determinar si el elemento se acaba de crear o mover, lo que reduce la representación innecesaria de elementos. Además, React también necesita usar el valor Key para determinar la asociación entre el elemento y el estado local, por lo que no debemos ignorar la importancia de Key en la función de conversión.

¿Qué pasó después de llamar a setState?

Después de llamar a la función setState en el código, React fusionará el objeto de parámetro entrante con el estado actual del componente y luego activará el llamado proceso de reconciliación (Reconciliación). Después del proceso de reconciliación, React construirá el árbol de elementos React de acuerdo con el nuevo estado de una manera relativamente eficiente y se dedicará a volver a representar toda la interfaz de la interfaz de usuario. Después de que React obtiene el árbol de elementos, React calculará automáticamente la diferencia entre el árbol nuevo y el árbol viejo, y luego minimizará y volverá a procesar la interfaz de acuerdo con la diferencia. En el algoritmo de cálculo de la diferencia, React puede saber con relativa precisión qué posiciones han cambiado y cómo deberían cambiarse, lo que garantiza que se actualicen a pedido, en lugar de volver a representar todo.

reaccionar función del ciclo de vida

Fase de inicialización:
- getDefaultProps: obtiene las propiedades predeterminadas de la instancia
- getInitialState: obtiene el estado de inicialización de cada instancia
- componentWillMount: el componente está a punto de cargarse y representarse en la página
- render: el componente genera un nodo DOM virtual aquí
- componentDidMount: después de que el componente esté realmente montado
Estado de ejecución:
- componentWillReceiveProps: se llama cuando el componente está a punto de recibir propiedades
- shouldComponentUpdate: cuando un componente recibe una nueva propiedad o un nuevo estado (puede devolver falso, no se actualiza después de recibir los datos, impide la llamada de representación y las siguientes funciones no continuarán)
- componentWillUpdate: el componente está a punto de actualizarse y los atributos y el estado no pueden modificarse
- render: repintado de componentes
- componentDidUpdate: el componente ha sido actualizado
Fase de destrucción:
- componentWillUnmount: el componente está a punto de ser destruido

¿Qué debe hacer ComponentUpdate? (¿Para qué función periódica es la optimización del rendimiento de React?)

shouldComponentUpdate Este método se utiliza para determinar si el método de representación debe llamarse para volver a dibujar el dom. Debido a que la descripción de dom es muy costosa, si podemos escribir un algoritmo dom diff más optimizado en el método shouldComponentUpdate, podemos mejorar enormemente el rendimiento.

Referencia reaccionar optimización de rendimiento -sf

¿Por qué el dom virtual mejora el rendimiento? (Obligatorio)

Dom virtual es equivalente a agregar un caché entre js y dom real, utilizando el algoritmo dom diff para evitar operaciones dom innecesarias, mejorando así el rendimiento.

Use la estructura de objetos de JavaScript para representar la estructura del árbol DOM; luego use este árbol para construir un árbol DOM real, insértelo en el documento y cuando el estado cambie, reconstruya un nuevo árbol de objetos. Luego compare el árbol nuevo con el árbol viejo, registre la diferencia entre los dos árboles, aplique la diferencia registrada en 2 al árbol DOM real construido en el paso 1, y la vista se actualiza.

Referencia cómo entender un DOM virtual? -Zhihu

El principio de react diff (a menudo probado, debe ser probado por los principales fabricantes)

Descomponga la estructura de árbol de acuerdo con la jerarquía y compare solo elementos del mismo nivel.
Agregue un atributo clave único a cada celda de la estructura de la lista para facilitar la comparación.
Reaccionar solo coincidirá con componentes de la misma clase (la clase aquí se refiere al nombre del componente)
En la operación de fusión, cuando se llama al método setState del componente, React lo marca como sucio. Al final de cada bucle de eventos, React verifica que todos los componentes marcados como sucios se vuelvan a dibujar.
Representación selectiva de subárbol. Los desarrolladores pueden reescribir shouldComponentUpdate para mejorar el rendimiento de diff.

Referencia: algoritmo diff de React

¿Cuál es el papel de los árbitros en React?

Las referencias son los identificadores proporcionados por React para el acceso seguro a elementos DOM o una instancia de componente. Podemos agregar un atributo ref al elemento y luego aceptar el identificador del elemento en el árbol DOM en la función de devolución de llamada. Este valor se devolverá como el primer parámetro de la función de devolución de llamada:

clase CustomForm extiende Componente { 
  handleSubmit = () => { 
    console.log ( "Input Value:", this .input.value) 
  } 
  render () { 
    return (
       <form onSubmit = { this .handleSubmit}> 
        < input 
          type = ' texto ' 
          ref = {(input) => this .input = input} /> 
        <button type =' submit '> Submit </button> 
      </form>     ) 
  } 
}

El campo de entrada en el código anterior contiene un atributo ref. La función de devolución de llamada declarada por este atributo recibirá el elemento DOM correspondiente a la entrada. Lo vinculamos a este puntero para usarlo en otras funciones de clase. También vale la pena mencionar que las referencias no son exclusivas de los componentes de clase. Los componentes funcionales también pueden usar cierres para almacenar temporalmente sus valores:

función CustomForm ({handleSubmit}) { 
  let inputElement 
  return (
     <form onSubmit = {() => handleSubmit (inputElement.value)}> 
      < input 
        type = 'text' 
        ref = {(input) => inputElement = input} /> 
      <button type = 'submit'> Enviar </button> 
    </form>   ) 
}

Si crea un elemento de Twitter similar al siguiente, ¿cómo se ve su definición de clase relacionada?

<Twitter username = 'tylermcginnis33'> 
  {(usuario) => usuario === 
    ¿ nulo ? <Loading /> 
    : <Badge info = {user} />} 
</Twitter> 
import React, {Component, PropTypes} de 'react' 
import fetchUser de 'twitter'
 // fetchUser take in a username devuelve una promesa 
// que se resolverá con los datos de ese nombre de usuario. 
clase Twitter extiende Componente {
   // terminar esto 
}

Si no está familiarizado con el patrón de devolución de llamada, este código puede parecer un poco extraño. En este modo, el componente recibirá una función como componente secundario y luego lo llamará con props.children en la función de representación:

import React, {Component, PropTypes} de 'react' 
import fetchUser de la 
clase 'twitter' Twitter extiende Component { 
  state = { 
    user: null , 
  } 
  static propTypes = { 
    username: PropTypes.string.isRequired, 
  } 
  componentDidMount () { 
    fetchUser ( this .props.username) 
      .then ((user) => this .setState ({user})) 
  } 
  render () { 
    return  this .props.children ( this .state.user) 
  } 
}

La ventaja de este modelo es que desacopla el componente primario del componente secundario. El componente primario puede acceder directamente al estado interno del componente secundario sin pasar por Props, de modo que el componente primario pueda controlar más fácilmente la interfaz de UI que muestra el componente secundario. Por ejemplo, el gerente de producto nos pidió que reemplazáramos la Insignia que mostramos originalmente con el Perfil. Podemos modificar fácilmente la función de devolución de llamada:

<Twitter username = 'tylermcginnis33'> 
  {(usuario) => usuario === 
    ¿ nulo ? <Cargando /> 
    : <Información del perfil = {usuario} />} 
</Twitter>

Mostrar la diferencia entre el componente Presentacional y el componente Contenedor

El componente de presentación se preocupa por el aspecto del componente. La pantalla acepta específicamente datos y devoluciones de llamada a través de accesorios, y casi nunca tiene su propio estado, pero cuando el componente de la pantalla tiene su propio estado, generalmente solo le importa el estado de la IU en lugar del estado de los datos.
Los componentes del contenedor están más preocupados por cómo funcionan los componentes. El componente contenedor proporcionará datos y comportamiento para el componente de visualización u otros componentes del contenedor. Invocarán acciones de Flux y lo proporcionarán como una devolución de llamada al componente de visualización. Los componentes del contenedor a menudo tienen estado porque son fuentes de datos (de otros componentes).

¿Cuál es la diferencia entre el componente de clase y el componente funcional?

Los componentes de clase no solo le permiten usar más funciones adicionales, como el estado del componente y los ganchos del ciclo de vida, sino que también permiten que el componente acceda directamente a la tienda y mantenga el estado
Cuando un componente solo recibe accesorios y presenta el componente en la página, el componente es un 'componente sin estado', y se puede usar una función pura para crear dicho componente. Dichos componentes también se denominan componentes tontos o componentes de visualización.

¿Cuál es la diferencia entre el estado (componente) y las propiedades (accesorios)

El estado es una estructura de datos utilizada para el valor predeterminado de los datos requeridos cuando se monta el componente. El estado puede mutar con el tiempo, pero la mayoría de las veces como resultado del comportamiento del evento del usuario.
Props (abreviatura de propiedades) es la configuración de componentes. Los accesorios se pasan del componente padre al componente hijo y, en lo que respecta al componente hijo, los accesorios son inmutables. Los componentes no pueden cambiar sus propios accesorios, pero pueden juntar los accesorios de sus subcomponentes (gestión unificada). Los accesorios no son solo funciones de devolución de llamada de datos, también se pueden pasar a través de accesorios.

¿Qué es un componente controlado?

En HTML, de forma similar <input>, <textarea> y <select> por lo que los elementos de formulario mantendrán su propio estado, y en base a la entrada del usuario a la actualización. Cuando el usuario envía el formulario, el valor del elemento mencionado se enviará junto con el formulario. Pero en React, será un poco diferente. El componente que contiene el elemento de formulario rastreará el valor de entrada en el estado, y cada vez que se llama a la función de devolución de llamada, como onChange actualizará el estado y volverá a representar el componente. Un elemento de formulario de entrada cuyo valor es controlado por React de esta manera, dicho elemento se denomina "elemento controlado".

¿Qué es un componente de orden superior?

Un componente de orden superior es una función que toma un componente como parámetro y devuelve un nuevo componente. HOC le permite reutilizar código, lógica y abstracciones de arranque. Quizás la más común es la función de conexión de Redux. Además de simples bibliotecas de herramientas para compartir y combinaciones simples, la mejor manera para HOC es compartir el comportamiento entre los componentes React. Si encuentra que escribe mucho código en diferentes lugares para hacer lo mismo, debería considerar refactorizar el código en un HOC reutilizable.

Por qué se recomienda que el parámetro pasado a setState sea una devolución de llamada en lugar de un objeto

Debido a que las actualizaciones de this.props y this.state pueden ser asíncronas, no puede confiar en sus valores para calcular el siguiente estado.

Además de vincular esto en el constructor, ¿hay alguna otra manera?

Puede usar inicializadores de propiedades para enlazar correctamente las devoluciones de llamada, y create-react-app también es compatible de forma predeterminada. Puede usar las funciones de flecha en las devoluciones de llamada, pero el problema es que se crea una nueva devolución de llamada cada vez que se representa el componente.

(En el constructor) cuál es el propósito de llamar a super (props)

Las subclases no pueden usar esto antes de llamar a super (). En ES2015, las subclases deben llamar a super () en el constructor. La razón para pasar accesorios a super () es hacer que sea más fácil (en subclases) acceder a this.props en el constructor.

Dónde deben reaccionar los componentes para iniciar solicitudes de Ajax

En los componentes React, las solicitudes de red deben iniciarse en componentDidMount. Este método se ejecutará cuando el componente se "monte" por primera vez (agregado al DOM) y solo se ejecutará una vez durante el ciclo de vida del componente. Más importante aún, no puede garantizar que la solicitud de Ajax se haya completado antes de montar el componente. Si es así, significa que intentará llamar a setState en un componente desmontado, lo que no funcionará. Al iniciar una solicitud de red en componentDidMount se asegurará de que haya un componente que se pueda actualizar.

Describa cómo se manejan los eventos en React.

Para abordar problemas de compatibilidad entre navegadores, el controlador de eventos en su React pasará una instancia de SyntheticEvent, que es un contenedor cruzado para los eventos nativos del navegador de React.

Estos SyntheticEvents tienen la misma interfaz que los eventos nativos a los que está acostumbrado, excepto que son compatibles en todos los navegadores. Curiosamente, React no asocia eventos a los propios nodos secundarios. React utilizará un único oyente de eventos para escuchar todos los eventos en el nivel superior. Esto es bueno para el rendimiento, lo que también significa que React no necesita preocuparse por el seguimiento de los oyentes de eventos al actualizar el DOM.

¿Cuál es la diferencia entre createElement y cloneElement?

React.createElement (): la sintaxis JSX usa React.createElement () para construir elementos React. Acepta tres parámetros, el primer parámetro puede ser un nombre de etiqueta. Como los componentes div, span o React. El segundo parámetro es el atributo entrante. El tercer parámetro y los siguientes son todos los subcomponentes del componente.

React.createElement ( 
    tipo, 
    [accesorios], 
    [... niños] 
)

React.cloneElement () es similar a React.createElement (), excepto que el primer parámetro que pasa es un elemento React, no un nombre de etiqueta o componente. Los atributos recién agregados se fusionarán con los atributos originales y se pasarán al nuevo elemento devuelto, y se reemplazará el trofeo del elemento hijo.

React.cloneElement ( 
  elemento, 
  [accesorios], 
  [... hijos] 
)

Hay tres formas de construir componentes en React

React.createClass (), clase ES6 y funciones sin estado.

Reaccionar componente división negocio componente tecnología componente?

Los componentes generalmente se dividen en componentes de UI y componentes de contenedor de acuerdo con sus responsabilidades.
El componente UI es responsable de la presentación de la interfaz de usuario, y el componente contenedor es responsable de administrar los datos y la lógica.
Los dos están conectados por el método Connect proporcionado por React-Redux.

Breve descripción del pensamiento de flujo

La característica más importante de Flux es el "flujo unidireccional" de datos.

Acceso de usuario a Ver
Ver problemas de acciones del usuario
El despachador recibe la acción y le pide a la tienda que actualice según corresponda
Después de actualizar la Tienda, se emite un evento de "cambio"
Después de que View recibe el evento "change", actualiza la página

Qué andamiaje se ha utilizado en el proyecto React (esta pregunta es un tema abierto)

aplicación creat-react-Yeoman 等

¿Entiendes redux?

Redux es un marco de flujo de datos de aplicaciones, que resuelve principalmente el problema de compartir el estado entre los componentes. El principio es la administración centralizada. Hay tres métodos principales: acción, tienda, reductor y el flujo de trabajo es que la vista llama al despacho de la tienda para recibir la acción y la tienda entrante. , Reducer realiza la operación de estado, la vista obtiene los últimos datos a través del getState proporcionado por la tienda, el flujo también se usa para la operación de datos, hay cuatro componentes de acción, despacho, vista, almacenamiento, el flujo de trabajo es que la vista envía una acción y el despachador recibe Acción, deje que la tienda actualice los datos. Una vez completada la actualización, la tienda emite un cambio y la vista acepta el cambio para actualizar la vista. Redux es muy similar a Flux. La principal diferencia es que Flux tiene varias tiendas que pueden cambiar el estado de la aplicación. En Flux, el despachador se usa para pasar datos al evento de devolución de llamada registrado, pero en redux, solo se puede definir una tienda con un estado actualizable. Redux combina la tienda y el Despachador. La estructura es más simple y clara.
Se agrega el nuevo estado, la gestión del estado es más clara, a través de redux, el proceso está más estandarizado, se reduce la cantidad de codificación manual y se mejora la eficiencia de codificación. Al mismo tiempo, cuando se actualizan los datos, a veces los componentes no son necesarios, pero también necesitan ser redibujados Eficiencia En general, solo los usamos al construir proyectos complejos con múltiples interacciones y múltiples flujos de datos.

¿Cuáles son las desventajas de redux

Los datos requeridos por un componente deben ser pasados por el componente padre, no directamente de la tienda como en flujo.
Cuando se actualizan los datos relacionados con un componente, incluso si el componente primario no necesita usar el componente, el componente primario todavía se volverá a representar, lo que puede tener un efecto en la eficiencia, o se debe escribir un juicio complejo para actualizar el Componente.