[Preguntas de la entrevista inicial] Preguntas de la entrevista inicial 2023 - React

Siempre hay altibajos en la vida de una persona. No siempre saldrá como el sol naciente, ni siempre será miserable. Los altibajos repetidos son entrenamiento para una persona. Por lo tanto, aquellos que flotan arriba no necesitan estar orgullosos; aquellos que se hunden abajo no necesitan ser pesimistas. Debemos ser francos y humildes, optimistas y emprendedores, y seguir adelante. ——Konosuke Matsushita

Hola a todos, mi nombre es Jiang Chen. En el entorno actual de Internet, todo el mundo debe haberlo sentido hasta cierto punto. En esta sociedad impetuosa, sólo manteniendo constantemente el carácter se pueden percibir diferentes beneficios y animarse unos a otros.

Una colección de las últimas preguntas de las entrevistas de 2023, así que esté preparado en todo momento.

Este artículo se publicó por primera vez en la cuenta pública de WeChat: Programador salvaje Jiang Chen

Todos son bienvenidos a dar me gusta, coleccionar y seguir.

Lista de artículos

¿Cuándo utilizar administradores estatales?

Desde la perspectiva de la estructura general del proyecto, es necesario elegir una velocidad que se adapte a los antecedentes del proyecto. Si el fondo del proyecto no es adecuado para usar el administrador de estado, entonces no hay necesidad de usarlo, como el subprograma WeChat, etc., que se puede ver desde las siguientes dimensiones

El uso del usuario es complejo

Los usuarios con diferentes identidades tienen diferentes métodos de uso (como usuarios y administradores normales)
La colaboración entre múltiples usuarios es posible.
Interactuar intensamente con el servidor o utilizar WebSockets
Ver necesita obtener datos de múltiples fuentes

Desde la perspectiva de los componentes

Es necesario compartir el estado de un determinado componente.
Un determinado estado debe estar disponible desde cualquier lugar.
Un componente necesita cambiar el estado global
Un componente necesita cambiar el estado de otro componente.

¿Qué es el secuestro de renderizado?

¿Qué es el secuestro de renderizado? El concepto de secuestro de renderizado es la capacidad de controlar la salida de un componente desde otro componente. Por supuesto, este concepto generalmente se explica más claramente junto con los componentes de orden superior (HOC) en reaccionar.

Los componentes de orden superior pueden realizar muchas operaciones en la función de renderizado para controlar la salida de renderizado del componente original. Siempre que se cambie el renderizado del componente original, lo llamamos una especie de secuestro de renderizado.

De hecho, en componentes de alto orden, el renderizado combinado y el renderizado condicional son dos tipos de secuestro de renderizado. A través de la herencia inversa, no solo se pueden lograr los dos puntos anteriores, sino que también se pueden lograr los elementos React generados por la función de renderizado del componente original. ser mejorado.

En operaciones reales, el secuestro de renderizado se puede lograr mediante el estado operativo y los accesorios.

¿Cómo lograr la internacionalización de los componentes de React?

La solución que se basa en i18next tiene un problema muy doloroso para grandes proyectos empresariales: el mantenimiento de archivos json. Cada iteración del producto necesita agregar nuevas configuraciones, por lo que quién mantendrá esta configuración y cómo mantenerla causará muchos problemas. Y si su proyecto necesita soportar docenas de idiomas, ¿qué pasa con esas docenas de documentos?

Por lo tanto, una solución más común entre los grandes fabricantes ahora es utilizar AST. Cada vez que se desarrolla una nueva versión, todos los códigos se escanean a través de AST para encontrar el chino en el código. El chino se utiliza como clave y el servicio de traducción inteligente es llamado para generar automáticamente el archivo .json del proyecto. De esta manera, los humanos ya no necesitan mantener archivos json, todo depende de herramientas de automatización. En la actualidad, ya existen fuentes abiertas de los principales fabricantes, como di18n de Didi y kiwi de Alibaba.

¿Cómo React divide el código? ¿Cuál es el principio de división?

Creo que el requisito previo para la división de reacción son las especificaciones de diseño del directorio de código, las especificaciones de definición de módulo, las especificaciones de diseño de código y el cumplimiento de los principios generales del diseño de programas, como alta cohesión, bajo acoplamiento, etc.

En nuestro proyecto de reacción:

En el nivel de API, lo encapsulamos por separado y exponemos los resultados de las solicitudes http al mundo exterior.
En la capa de datos, utilizamos la encapsulación mobx para manejar solicitudes asincrónicas y procesamiento de lógica empresarial.
En la capa de vista, intente utilizar los datos pasados desde la capa mobx para modificar la lógica.
Los recursos de tipo estático se colocan por separado.
Los componentes públicos, los componentes de alto nivel y los complementos se colocan por separado.
Los archivos de herramientas se colocan por separado.

¿Dónde detectar errores en React?

Ejemplo de sitio web oficial:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

usar

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

Pero los límites de error no se detectarán:

try{}catch(err){}
///异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
///服务端渲染
///它自身抛出来的错误（并非它的子组件)

¿Por qué los accesorios en React son de solo lectura?

El patrón de diseño que garantiza el flujo de datos unidireccional de React hace que el estado sea más predecible. Si se permite la modificación del autocomponente, entonces un componente principal pasará el estado a varios subcomponentes. Si estos subcomponentes se modifican a voluntad, será completamente impredecible. No sabemos dónde se modifica el estado, por lo que debemos proteger los accesorios para que no se modifiquen como funciones puras.

¿Cómo utilizar Hooks para obtener datos del lado del servidor?

import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
  const [data, setData] = useState({ hits: [] });
  useEffect(async () => {
    const result = await axios(
      'https://api/url/to/data',
    );
    setData(result.data);
  });
  return (
    <ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}
export default App;

¿Qué principios se deben seguir al utilizar Hooks?

Utilice únicamente ganchos en el nivel superior

No llames a Hooks dentro de bucles, condicionales o funciones anidadas, asegúrate de llamarlos siempre en el nivel superior de tu función React.

Solo llame a Hooks en funciones de React

No llame a Hooks en funciones ordinarias de JavaScript. puede:

✅ Call Hook en el componente de función React
✅ Llama a otros Hooks en Hooks personalizados

¿Para qué problema está diseñado React Fiber?

Debido al problema de recursividad ininterrumpida de la solución React15 StackReconciler, si el tiempo de diferenciación es demasiado largo (tiempo de cálculo de JS), la interfaz de usuario de la página dejará de responder (como los cuadros de entrada) y vdomno se podrá aplicar a domella.

Para resolver este problema, React16 implementó un nuevo requestIdleCallbackprogramador basado en (debido a requestIdleCallbackproblemas de compatibilidad y estabilidad, lo implementé yo mismo polyfill) A través de la idea de prioridad de tarea, cuando ingresa una tarea de alta prioridad, se interrumpe reconciler.

Para adaptarse a este nuevo programador, se lanzó FiberReconcilerpara convertir la estructura de árbol original (vdom) en forma de lista enlazada de Fiber (hijo/hermano/retorno). Todo el recorrido de Fiber se basa en bucles en lugar de recursividad y puede ser interrumpido en cualquier momento.

Más importante aún, la estructura de lista vinculada basada en fibra tiene una muy buena base de aplicación para la representación asincrónica posterior (arquitectura de carriles React 17) y (posibles) cálculos de trabajadores.

Dime cuáles crees que son las mejores prácticas en React

Consulte el sitio web oficial.

¿Por qué React necesita Hooks?

Respuesta del sitio web oficial:

motivación

Los ganchos resuelven una variedad de problemas aparentemente no relacionados que hemos encontrado durante cinco años de escritura y mantenimiento de miles de componentes. Ya sea que esté aprendiendo React, lo use todos los días o prefiera probar otro marco con un modelo de componentes similar a React, es posible que esté familiarizado con estos problemas.

Reutilizar la lógica de estado entre componentes es difícil

React no proporciona una forma de "adjuntar" comportamiento reutilizable a los componentes (por ejemplo, conectar componentes a una tienda). Si ha estado usando React por un tiempo, es posible que esté familiarizado con algunas soluciones a este problema, como accesorios de renderizado y componentes de orden superior. Pero estas soluciones requieren reorganizar la estructura de sus componentes, lo que puede resultar engorroso y dificultar la comprensión del código. Si observa las aplicaciones React en React DevTools, encontrará que los componentes compuestos por proveedores, consumidores, componentes de orden superior, accesorios de renderizado y otras capas abstractas formarán un "infierno anidado". Aunque podemos filtrarlos en DevTools, esto ilustra un problema más profundo: React necesita proporcionar una mejor forma nativa para la lógica de estado compartida.

Puede utilizar Hooks para extraer la lógica de estado de los componentes, de modo que la lógica pueda probarse de forma independiente y reutilizarse. Los ganchos le permiten reutilizar la lógica de estado sin modificar la estructura del componente. Esto facilita compartir Hooks entre componentes o dentro de la comunidad.

Los componentes complejos se vuelven difíciles de entender

A menudo mantenemos algunos componentes, que al principio son simples, pero gradualmente se van llenando de lógica de estado y efectos secundarios. Cada ciclo de vida a menudo contiene alguna lógica no relacionada. Por ejemplo, los componentes suelen obtener datos en componenteDidMount y componenteDidUpdate. Sin embargo, el mismo componenteDidMount también puede contener mucha otra lógica, como configurar la escucha de eventos, que luego debe borrarse en componenteWillUnmount. El código que está relacionado y necesita ser modificado se divide, mientras que el código completamente no relacionado se combina en el mismo método. Esto puede provocar fácilmente errores e inconsistencias lógicas.

En la mayoría de los casos, no es posible dividir los componentes en granularidades más pequeñas porque la lógica con estado está en todas partes. Esto también plantea ciertos desafíos a las pruebas. Al mismo tiempo, esta es una de las razones por las que muchas personas usan React con una biblioteca de administración estatal. Sin embargo, esto a menudo introduce muchos conceptos abstractos y requiere alternar entre diferentes archivos, lo que dificulta la reutilización.

Para resolver este problema, Hooks divide las partes interrelacionadas del componente en funciones más pequeñas (como configurar una suscripción o solicitar datos), en lugar de obligarlas a dividirse según el ciclo de vida. También puede utilizar reductores para gestionar el estado interno de un componente y hacerlo más predecible.

clase incomprensible

Además de las dificultades encontradas en la reutilización y gestión del código, también descubrimos que las clases son una barrera importante para aprender React. Tienes que entender cómo funciona esto en JavaScript, que es muy diferente de otros lenguajes. No olvide vincular los controladores de eventos. No existe una propuesta de sintaxis estable y el código es muy redundante. Todos pueden entender muy bien los accesorios, el estado y el flujo de datos de arriba hacia abajo, pero no saben qué clases. Incluso entre los desarrolladores experimentados de React, existen desacuerdos sobre las diferencias entre los componentes de función y los componentes de clase, e incluso los escenarios de uso de los dos componentes.

Además, React ha estado disponible durante cinco años y esperamos que también se mantenga al día en los próximos cinco años. Como han demostrado bibliotecas como Svelte, Angular, Glimmer y otras, la precompilación de componentes tiene un enorme potencial. Especialmente cuando no se limita a plantillas. Recientemente, hemos estado utilizando Prepack para experimentar con el plegado de componentes y hemos logrado resultados iniciales. Sin embargo, descubrimos que el uso de componentes de clase inadvertidamente animaba a los desarrolladores a utilizar soluciones que invalidaban las medidas de optimización. Las clases también plantean algunos problemas a las herramientas actuales. Por ejemplo, las clases no se comprimen bien y pueden hacer que la recarga en caliente sea inestable. Por lo tanto, queríamos proporcionar una API que facilitara la optimización del código.

Para resolver estos problemas, los Hooks te permiten usar más funciones de React sin clases. Conceptualmente, los componentes de React siempre se han parecido más a funciones. Los ganchos abarcan funciones sin sacrificar los principios espirituales de React. Los ganchos brindan soluciones a problemas sin tener que aprender técnicas complejas de programación funcional o reactiva.

¿Qué problema resuelve la gestión estatal?

Centrarse en la capa de vista

Esta es la introducción al sitio web oficial de React. Biblioteca JavaScript para crear interfaces de usuario. Las características de centrarse en la capa de vista determinan que no es un marco completo. En comparación con marcos completos como Angular, React tiene funciones más simples y únicas. Por ejemplo, no hay enrutamiento de front-end, ni gestión de estado, ni documentación de desarrollo integral, etc.

f(estado) = ver

El componente de reacción representa la página según el estado (o accesorios), similar a una función que ingresa el estado y genera la vista. Sin embargo, esto no es MDV (Vista basada en modelo) en el sentido completo y no tiene una capa de modelo completa. Por cierto, creo que la componenteización y MDV son actualmente populares en el desarrollo front-end, y es la tendencia general...

el estado fluye de arriba a abajo, los accesorios son de solo lectura

Hemos entendido esta característica desde que comenzamos a escribir React. La dirección del flujo del estado es desde el exterior hacia el interior del componente y de arriba a abajo, y los accesorios pasados son de solo lectura. Si desea cambiar los accesorios, solo puede pasar un método setState empaquetado desde la parte superior. componente. A diferencia de angular, que tiene ng-model, vue tiene v-model, que proporciona instrucciones de enlace bidireccional. Esta es la convención en React. Puede pensar que es engorroso, pero el flujo de estado es más claro. El flujo de datos unidireccional siempre es más agradable en spas grandes.

Estas características determinan que React en sí no proporciona funciones potentes de gestión del estado y existen aproximadamente tres métodos nativos.

¿Los componentes funcionales tienen un ciclo de vida?

No proporciona el concepto de ciclo de vida, a diferencia de los componentes de clase que heredan React.component, que le permite utilizar el ciclo de vida y enfatizar específicamente los conceptos relacionados.

¿Cuál es el principio de inmutabilidad?

Utilice el árbol de diccionario para conservar la estructura de datos, optimizar la lógica de generación de objetos y reducir los costos al actualizar

¿Cómo evitar que se escape HTML?

dangerouslySetInnerHTML

Cuéntame cómo mejoras la eficiencia de renderizado de los componentes.

prestar

qué es

React se basa en la combinación perfecta de DOM virtual y un algoritmo Diff eficiente para lograr la actualización de granularidad más pequeña de DOM. En la mayoría de los casos, la eficiencia de representación de DOM de React es suficiente para nuestro negocio diario.

En escenarios comerciales complejos, los problemas de rendimiento aún nos preocuparán. En este momento, es necesario tomar algunas medidas para mejorar el rendimiento de ejecución. Evitar el renderizado innecesario es uno de los métodos de optimización más comunes en los negocios.

Cómo hacer

Componente de clase:

Heredar componente puro
Optimizar usando deberíaComponentUpdate

Componente funcional:

memo simula PureComponent
Utilice useMemo para almacenar en caché las variables
Utilice la función de caché useCallback
Agregue claves en un bucle. Es mejor usar el valor único del elemento de la matriz para la clave. No se recomienda el índice.

Resumir

En el proceso de desarrollo real, los problemas de rendimiento del front-end son una cuestión que debe tenerse en cuenta: a medida que el negocio se vuelve más complejo, la probabilidad de encontrar problemas de rendimiento también aumenta.

Además, se recomienda granular la página en granularidades más pequeñas. Si una es demasiado grande, cuando se modifica el estado, provocará la representación de todo el componente grande. Después de dividir los componentes, la granularidad se vuelve más pequeña y el Capacidad para reducir la representación innecesaria de subcomponentes.

¿Habla sobre tu comprensión de los componentes de alto orden (HOC)?

Función de orden superior, una función que cumple al menos una de las siguientes condiciones

Acepta una o más funciones como entrada.
generar una función

En React, un componente de orden superior acepta uno o más componentes como parámetros y devuelve un componente, que es esencialmente una función, no un componente.

const EnhancedComponent = highOrderComponent(WrappedComponent);

En el código anterior, la función acepta un componente WrappedComponentcomo parámetro y devuelve el nuevo componente procesado.EnhancedComponent

Esta implementación de componentes de orden superior es esencialmente un patrón de diseño decorador.

¿Cuéntame sobre tu comprensión de las referencias de React?

Las referencias se denominan Resilient File System en las computadoras (inglés: Resilient File System, denominado ReFS)

Las referencias en React proporcionan una forma de acceder a los nodos DOM o elementos de React creados en el método de renderizado.

Es esencialmente la instancia del componente devuelta por ReactDOM.render(). Si es un componente de renderizado, devuelve la instancia del componente. Si representa dom, devuelve el nodo dom específico.

clase

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref="myref" />;
  }
}

manos

function App(props) {
  const myref = useRef()
  return (
    <>
      <div ref={myref}></div>
    </>
  )
}