Ensayo estereotipado de la entrevista inicial (versión detallada) - medio

Language 2023-01-24 01:38:55 views: null

El artículo anterior explicó en detalle HTML, CSS, JavaScript, conocimiento de redes informáticas, etc .. Este artículo explicará en detalle React, git, webpack, etc .. ¡Le deseo un aterrizaje exitoso!

 Marco de reacción

Use andamios de reacción para construir proyectos

npx create-react-app app-name

La diferencia entre clase y función.

Los componentes definidos por función pueden usar ganchos para establecer el estado y simular el ciclo de vida, no hay esto para señalar el problema. El código es más simple y fácil de entender, lleno de componentes funcionales, muy fácil de entender.

La versión actual de reaccionar es la versión 17

¿Cuál es la diferencia entre 17 y 16?

¿Qué cambia después del equivalente a react16.8?

详细介绍：
https://segmentfault.com/a/1190000040453119?utm_source=sf-similar-article

Biblioteca de interfaz de usuario común

Agregar texto enriquecido

dangerouslySetInnerHTML={
   
   { __html: this.state.newHtml }}

¿Cuál se ejecuta primero entre el enlace de componentes y el evento de enlace nativo js?

Ejecute primero el evento de enlace nativo js y luego ejecute el evento sintético, porque el evento sintético ocurre en la etapa burbujeante

¿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;

¿Cuáles son los dos tipos de componentes en reaccionar?

  • componente de clase
  • componente de función

manos

Ventajas de los ganchos

El código es más legible. La lógica del código original de la misma función se divide en diferentes funciones de ciclo de vida, lo que dificulta el mantenimiento y la iteración de los desarrolladores. Los códigos de función se pueden agregar a través de React Hooks, lo cual es conveniente para la lectura y el mantenimiento.

  useState，定义局部状态
  useEffect，模拟生命周期
  useContext，获取上下文
  useCallback，缓存一个function
  useMemo，缓存一个值
  useReducer，又一种存储数据的形式

 当组件的属性或者数据改变的时候组件会重新刷新(就是组件的 function 会重新被执行)

useState, define el estado local

Los datos de estado local se pueden definir en el componente definido por función, y el componente se volverá a representar cuando cambien los datos

Devuelve una matriz, el primer elemento de la matriz es un nombre de variable y el segundo elemento es el método para cambiar los datos. Cabe señalar que el parámetro dos

Hay dos formas de utilizar el método de cambio de datos:

  • 1. es directamente un valor
  • 2. Puede configurar una función, el último valor de los datos de estado se pasa en la función de forma predeterminada, y el valor de retorno de la función se utilizará como el último valor de los datos de estado. Se recomienda utilizar este método para cambiar los datos de estado.

useEffect, simula el ciclo de vida

La función de enlace del ciclo de vida del componente se puede simular en el componente definido por función

El parámetro 1 es una función de devolución de llamada. El parámetro 1 puede devolver una función y el método devuelto se ejecuta cuando se destruye el componente.

El segundo parámetro es una matriz de dependencia. en tres formas

  • 1. Si el parámetro 2 no existe, la función de devolución de llamada se ejecutará cada vez que se actualice el componente;
  • 2. Si el parámetro 2 es una matriz vacía, solo se ejecutará una vez durante la inicialización;
  • 3. Si hay datos en la matriz en el parámetro 2, la función de devolución de llamada se ejecutará cuando se cambie cada elemento de la matriz;

useMemo, cachea un valor

La función es almacenar en caché un valor, que recibe dos parámetros, el primer parámetro es un valor almacenado en caché y el segundo parámetro es una dependencia;

useCallback

La función es almacenar en caché una función, que recibe dos parámetros. El primer parámetro es una función de devolución de llamada y el segundo parámetro es una dependencia. Cuando la matriz de dependencia en el segundo parámetro no cambia, la función no se redefinirá;

usarreductor

La función del rol es realizar una gestión de datos, que se basa en un flujo de datos unidireccional.

useReducer puede entenderse como una versión simplificada de redux

Recibir dos parámetros: el parámetro uno es una función, el parámetro dos es un valor inicial

Devuelve una matriz: el primer elemento son los datos de estado y el segundo elemento es el método de envío

Si desea cambiar los datos, solo puede enviar una acción a través de envío.

memorándum

memo es una función que recibe un componente como parámetro y devuelve un nuevo componente. La función es almacenar en caché el componente, y el componente no se volverá a procesar cuando las propiedades recibidas por el componente no cambien

Se recomienda la API de notas durante el desarrollo para facilitar la optimización del rendimiento de los componentes.

La función de memo es almacenar en caché los componentes y hacer comparaciones superficiales de las propiedades de los componentes. Los componentes no se actualizan cuando las propiedades no han cambiado. La función es facilitar la optimización del rendimiento de los componentes, lo que tiene el mismo efecto que pureComponent

La diferencia entre componente y componente puro

El componente hace una comparación profunda (cada capa compara)

PureComponent hace una comparación superficial (solo la primera comparación)

En términos relativos, el rendimiento de los componentes PureComponent es mejor

Si es un componente normal, cuando el componente recibe nuevos accesorios, el renderizado volverá a renderizar. Si es pureComponent, cuando se pasen nuevos accesorios, realizará una comparación superficial con los antiguos. Si no hay cambios, entonces la función de renderizado no volverá a renderizar.

useRef

La función es obtener el elemento dom en el componente de reacción.

La diferencia entre useMemo y useCallback

useMemo almacena en caché un valor

useCallback es almacenar en caché una función

Su segundo parámetro es la matriz dependiente.Cuando los datos en la matriz dependiente cambian, el valor almacenado en caché se actualizará nuevamente.

useCallback no ejecutará la función del primer parámetro, sino que se la devolverá, y useMemo ejecutará la primera función y le devolverá el resultado de la ejecución de la función. Por lo tanto, useCallback a menudo recuerda funciones de eventos, genera funciones de eventos memorizadas y las pasa a subcomponentes para su uso. Y useMemo es más adecuado para obtener un determinado valor a través del cálculo de funciones, como los componentes de la memoria.

Notas sobre los ganchos:

Como se menciona en la documentación oficial de React, los ganchos no se pueden usar en condiciones/bucles, sino que solo se pueden escribir en la parte superior de los componentes funcionales/en ganchos personalizados, lo que tiene problemas de orden;

¿Qué son los ganchos personalizados?

Defina un método useXxx usted mismo. Enlaces personalizados, que pueden eliminar y encapsular código de lógica empresarial

为了界面更加美观。获取浏览器窗口的尺寸是一个经常使用的功能，这样经常使用的功能，就可以封装成一个自定义Hooks函数。
新建一个文件Example9.js，然后编写一个 useWinSize，编写时我们会用到useState、useEffect和useCallback所以先用import进行引入
import React, { useState ,useEffect ,useCallback } from 'react';
然后编写函数，函数中先用 useState 设置size状态，然后编写一个每次修改状态的方法onResize，这个方法使用useCallback，目的是为了缓存方法(useMemo 是为了缓存变量)。
然后在第一次进入方法时用useEffect来注册resize监听时间。为了防止一直监听所以在方法移除时，使用 return 的方式移除监听。
最后返回 size 变量就可以了。
https://zhuanlan.zhihu.com/p/264304340

clase

El ciclo de vida de los componentes de clase:

  1. fase de inicialización

    constructor (ejecutar propiedades de configuración y datos de estado durante la inicialización)

  2. fase de montaje

    componenteWillmount (ejecutado antes del montaje)

    [Importante] componentDidMount (ejecutado después de que se completa el montaje): ejecute la operación de adquisición de datos en esta función de enlace de ciclo de vida y llame a la interfaz para obtener datos

  3. fase de actualización

      componenteWillReceiveProps (ejecutado cuando se reciben nuevas propiedades)

    [Importante] shouldComponentUpdate (a juzgar si el componente necesita ser actualizado):

    Este método se usa a menudo cuando se optimiza el rendimiento de un componente.Este método recibe dos parámetros (nueva propiedad y nuevo estado) y devuelve un valor booleano. Este método se usa a menudo en la optimización del rendimiento de los componentes usando componentWillUpdate (el componente se actualizará) componentDIdUpdate (actualización del componente completada)                                                                                        

    	shouldComponentUpdate(np, ns) {
        // 接受两个参数
        // 参数一：最新的属性信息  属性二：最新的状态数据
        console.log(np, ns);
        // 
        if (this.state.count === ns.count) {
          return false
        }
        console.log("shouldComponentUpdate---组件是否需要更新");
        // 很重要  需要返回一个布尔值
        // true  后续更新阶段的钩子函数会执行
        // false 后续更新阶段的钩子函数不会执行 页面不会重新渲染
        // 这个方法在组件性能优化的时候使用，我们可以自行判断是否需要在页面上面展示，如果不需要可以返回false
        return true
      }

  4. Fase de destrucción componenteWillUnmount (ejecutado cuando se destruye el componente)

Después de 16.3, se eliminan tres funciones de enlace de ciclo de vida con voluntad

  • se montará el componenteWillMount
  • componenteWillReceiveProps recibirá nuevos accesorios
  • componenteWillUpdate se actualizará

Funciones de ciclo de vida añadidas:

getDerivedStateFromProps se activa cuando el componente recibe nuevas propiedades y actualiza el estado del componente de acuerdo con las propiedades actuales getSnapshotBeforeUpdate se activa antes de que el componente se actualice para garantizar que el estado de lectura sea coherente con componentDidUpdate

Correspondencia entre useEffect y class

useEffect puede simular la función de enlace del ciclo de vida del componente en el componente definido por función. Recibe dos parámetros: uno es un parámetro de función de devolución de llamada y otro puede devolver una función. Este método devuelto se ejecuta cuando se destruye el componente.

El segundo parámetro es una matriz de dependencia. en tres formas

componentDidMount, el segundo parámetro useEffect es una matriz vacía, luego solo se realiza un montaje durante la inicialización

componentDidUpdate, la matriz en el segundo parámetro de useEffect tiene datos, luego la función de devolución de llamada se ejecutará cuando cambie cada elemento de la matriz y se complete la actualización

componenteWillUnmount, si el parámetro 2 de useEffect no existe, la función de devolución de llamada se ejecutará cada vez que se actualice el componente y se desmontará

function Demo() {
...
React.useEffect(()=>{
  return () => {
    console.log('组件销毁的时候执行')
  }
}, [])
...
}

¿Por qué necesita obtener datos después de que el componente se haya montado correctamente? Debido a que la adquisición de datos puede ser asíncrona, la adquisición de datos se completa antes de que se monte el componente y la actualización del componente estará incompleta. Para garantizar la actualización completa del componente, los datos generalmente se obtienen después de montar el componente;

Ciclo de vida del componente anidado:

Se ejecutarán los métodos de renderización y montaje por montar del componente principal, y todos los componentes secundarios se analizarán cuando se ejecute la renderización. Cuando todos los componentes secundarios estén montados, se ejecutará el montaje del componente principal.

esto apunta a

¿Esto apunta al problema en el componente definido por la clase? ¿Por qué cambiar esta implementación? ¿Cómo hacer?

Porque en el componente definido por la clase, esto apunta a la instancia actual cuando se inicializa, cuando se llama al evento, este se ha convertido en un valor global, que es nulo en reaccionar. Para resolver este problema, debe cambiar este punto en el componente definido por la clase. Podemos utilizar tres formas:

  1. Vincule esto a la función cuando se inicialice el constructor (recomendado, porque este método solo se ejecuta una vez durante la inicialización)
  2. Use funciones de flecha al llamar a la asignación
  3. Enlace esto directamente al asignar un evento

Porque en el momento de la representación, el presente actual es el componente actual, pero ya no existe cuando se ejecuta la respuesta del evento.

Por lo tanto, debe vincular esto al componente definido por la clase.

establecerestado

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 de este proceso de reconciliación, React comienza a volver a renderizar toda la interfaz de usuario.

Para cambiar los datos, use el método <font color=red>**setState**</font>, setState es <font color=red>**asynchronous**</font>, y puede recibir dos parámetros, el parámetro uno significa Los nuevos datos después del cambio; el parámetro 2 indica la función de devolución de llamada después de que se cambian los datos, y se ejecuta después de que los datos se cambian con éxito, y el parámetro 2 generalmente no es necesario. Puede obtener los datos más recientes después del cambio en la función de devolución de llamada

setState es asíncrono, ¿cuándo encontraste dificultades?

  • setState es asíncrono, lo que da como resultado obtener referencias después de que setState sea el último valor.
  • Ponerlo en la segunda función de devolución de llamada en setState puede resolver este problema.

¿setState es síncrono o asíncrono?

  • Mira la situación específica:
  • En primer lugar, si obtiene el valor del estado directamente después de setState, no puede obtenerlo y es asíncrono en el entorno nativo.
  • En solicitudes asíncronas (ajax) o setInterval, setTimeout, setState se actualizan de forma síncrona.

Ejecute setState dos veces, renderice varias veces, se activará inmediatamente

Ejecutado solo una vez, no se activará de inmediato, porque hay un mecanismo de procesamiento por lotes en reaccionar

React fusionará las llamadas de setState en una para su ejecución, es decir, cuando se ejecuta setState, los datos en estado no se actualizarán inmediatamente y se ejecutarán en orden de acuerdo con el primero en entrar, primero en salir, pero asíncrono en Ajax. , setTimeout, etc. En el método, cada vez que se establece State, se representará una vez.

¿Qué sucede después de llamar a setState?

  • Después de llamar a setState, los parámetros entrantes se fusionarán con el estado actual, es decir, el proceso de sincronización del dominio real y el dominio virtual, que es el proceso de reconciliación.
  • Después del proceso de reconciliación, reaccionar creará un nuevo árbol dom de acuerdo con el último estado de datos de manera eficiente y luego volverá a procesar la página.
  • En el proceso de construcción de un nuevo árbol de dom en reaccionar, la representación local se realizará de acuerdo con la diferencia entre el dom antiguo y el nuevo, y se actualizará a pedido.

Por qué modificar directamente this.state no es válido

La esencia de setState es implementar actualizaciones de estado a través de un mecanismo de cola. Al ejecutar setState, el estado que debe actualizarse se colocará en la cola de estado y el estado no se actualizará inmediatamente. El mecanismo de cola puede actualizar el estado por lotes. Si this.state se modifica directamente sin setState, entonces este estado no se colocará en la cola de estados. Al fusionar la cola de estados al llamar a setState la próxima vez, se ignorará el estado que se modificó directamente antes, por lo que no podemos fusionarnos. en realidad no actualiza el estado que desea.

método de renderizado

Todos los componentes definidos por la clase necesitan un método de representación. Este método devuelve los datos DOM mostrados por el componente actual. Este método se volverá a ejecutar cada vez que cambien los datos o las propiedades.

  • Los componentes de definición de clase deben heredar Componente

    Si usa extensiones para implementar la herencia, entonces en la primera línea del constructor, debe llamar a super(), super() significa el constructor de la clase principal

  • Cada componente definido por la clase necesita un método de representación , que necesita un valor de retorno , que devuelve el contenido del componente actual

  • El componente ejecutará este método de representación cada vez que cambien los datos de estado o las propiedades.

  • Los datos de estado no se pueden cambiar en el método de renderizado

El propósito de render() en React

Es obligatorio que cada componente de React tenga 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, ``, ``, ``, etc. Esta función debe ser pura, es decir, debe devolver el mismo resultado cada vez que se llama.

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

- estado significa que el componente gestiona los datos por sí mismo, controla su propio estado y es variable;

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

- Los que no tienen estado se denominan componentes sin estado, y los que tienen estado se denominan componentes con estado;

- Usar más accesorios y menos estado, es decir, escribir más componentes sin estado.

HOC

Un componente de orden superior es pasar el componente como parámetro a una función y devolver un nuevo componente. Se agregarán algunas otras propiedades y métodos en el nuevo componente. Los componentes avanzados comunes son connect y withRouter

connect puede mapear el estado y enviar en redux a las propiedades del componente

withRouter puede agregar información de atributos relacionados con el enrutamiento a los componentes

- 高阶组件就是一个没有副作用的纯函数。
- 高阶组件是把一个组件当做参数，返回值为新组件的函数。
- 高阶组件实际上就是高阶函数，如 map、forEach
- 常用的高阶组件：withRouter（路由中的），connect（react-redux 中的）

La utilidad de los componentes de alto orden:

- Reutilización de código, lógica y abstracción de arranque.

- Secuestro de procesamiento

- Abstracción y control estatal

- Control de accesorios

 ¿Qué son las funciones puras?

- Devuelve un nuevo valor sin efectos secundarios.

- 1. La misma entrada siempre devuelve la misma salida, 2. No modifica el valor de entrada de la función, 3. No depende del estado del entorno externo. 4. Sin efectos secundarios.

¿Son los reductores funciones puras? ¿Por qué?

- El reductor debe ser una función pura, y Redux solo compara si los objetos antiguos y nuevos son iguales comparando las ubicaciones de almacenamiento de los objetos antiguos y nuevos. Si modifica directamente los valores de propiedad del objeto de estado anterior dentro del reductor, tanto el estado nuevo como el estado anterior apuntarán al mismo objeto. Entonces Redux piensa que nada ha cambiado y que el estado devuelto será el estado anterior.

Componentes controlados y no controlados

Principalmente si el estado controla el valor del formulario

Componentes controlados : los componentes controlados deben tener valor; entrada, área de texto, seleccione obtener valor

Componente no controlado: obtenga el valor del formulario a través del elemento dom type="file"

'Componente controlado' es agregar el atributo 'valor' a un componente de formulario; 'Componente no controlado' es un componente sin agregar el atributo 'valor'

¿Cuáles son los complementos de uso común en reaccionar?

Enrutamiento, componentes con estilo, react-redux, umi, etc.

Pasar parámetros entre componentes

El atributo props se usa para la transferencia de padre a hijo, y el atributo padre-hijo se pasa del componente padre al componente hijo, y el componente hijo puede recibirlo y usarlo directamente con props.

De niño a padre usando llamada de método

Use el contexto de contexto o el complemento de administración de estado redux entre componentes no relacionados

Cree una instancia de contexto a través de createContext, tiene un proveedor de datos de proveedor de atributos, puede establecer el atributo de valor para él. Utilice el componente Proveedor para incluir todos los componentes, y los componentes internos pueden utilizar los datos proporcionados en valor. Use useContext dentro del componente para obtener el valor de los datos;

¿Por qué necesita agregar una clave al hacer un bucle?

Respuesta corta:

La función de la clave es aumentar la velocidad de búsqueda del nodo del algoritmo diff. Es equivalente a agregar una clave principal única para cada nodo, lo que puede determinar rápidamente si el nodo actual debe actualizarse;

Explicación detallada:

Las claves son identificadores auxiliares que se utilizan para rastrear qué elementos de la lista se han modificado, agregado o eliminado.

- El uso del atributo clave, que involucra la estrategia de comparación de nodos pares en el algoritmo diff. Cuando especificamos el valor clave, el valor clave se usará como la identificación del componente actual, y el algoritmo diff coincidirá de acuerdo con esta identificación Si al atravesar la nueva estructura de dom, se encuentra que la identificación del componente existe en la estructura de dom anterior, entonces reaccionar pensará que la posición del componente actual solo ha cambiado, por lo que no destruirá ni recreará el componente anterior, pero solo cambie la posición del componente actual, y luego verifique si las propiedades del componente han cambiado, y luego elija mantener o modificar las propiedades del componente actual.

- La clave se utiliza para distinguir la relación correspondiente entre los elementos de las dos representaciones antes y después, y para evitar operaciones de actualización innecesarias.

Cómo se optimizan los componentes para el rendimiento

    1. Use palabras clave memo o PureComponent para la optimización;

    2. Agregue una clave para el ciclo;

    3. Use useCallback para optimizar la función;

    4. Optimice los datos de los componentes y use redux para administrar algunos datos globales de manera uniforme;

    5. Si es un componente definido por una clase, cuando no se necesite mostrar los datos actualizados, se puede procesar en shouldComponentUpdate;

- function定义的组件可以使用memo进行缓存操作，在组件内部使用useMemo和useCallback进行优化

- 给每一个组件包一个memo,在组件内通过useCallBack做缓存

- class定义的组件可以继承自PureComponent类

  PureComponent对属性或者状态数据进行的是浅比较，Component对属性或者数据进行的是深比较，所 以  相对来说PureComponent的性能更优，它的作用类似于function定义组件中的**memo**，可以**对组件做性能优化**。当组件接收到的属性不发生改变的话，组件不会重新渲染。建议组件定义的时候使用它

Cómo obtener el último valor en reaccionar

1. Componentes definidos por clase

   this.setState({Aquí están los datos modificados}, function() {

   // Ejecutar después de que el cambio de datos sea exitoso

   })

2. Componentes definidos por función

   Puede usar useEffect para obtener el último valor

Obtener elementos dom en reaccionar

Usar useRef en componentes de función

En el componente definido por la clase de referencia en el componente de clase, puede obtener todas las etiquetas con el conjunto de atributos de referencia utilizando **refs**

Escenario de uso: por ejemplo, cuando se carga una imagen, quiero obtener el ancho y el alto de la imagen y necesito usar referencias, como una lupa.

Similitudes y diferencias entre los componentes memo() y PureComponent:

- Diferencia: React.memo() es un componente de función y React.PureComponent es un componente de clase.

- Igual: ambos realizan una comparación superficial de los parámetros de props recibidos, resuelven el problema de eficiencia del componente en tiempo de ejecución y optimizan el comportamiento de renderizado del componente.

- useMemo() es para definir si una parte de la lógica de función se ejecuta repetidamente.

- Si el segundo parámetro es una matriz vacía, solo se ejecutará una vez cuando se represente el componente y la actualización del valor de propiedad pasado no tendrá efecto.

  Entonces, el segundo parámetro de useMemo() debe pasar parámetros dependientes en la matriz.

¿Cuáles son las precauciones para usar anzuelos?

（1）只能在React函数式组件或自定义Hook中使用Hook。
（2）不要在循环，条件或嵌套函数中调用Hook，必须始终在React函数的顶层使用Hook。
这是因为React需要利用调用顺序来正确更新相应的状态，以及调用相应的钩子函数。一旦在循环或条件分支语句中调用Hook，就容易导致调用顺序的不一致性，从而产生难以预料到的后果。
-#自定义 Hook 是一种自然遵循 Hook 设计的约定，而并不是 React 的特性。
#必须以 “use” 开头。
这个约定非常重要。不遵循的话，由于无法判断某个函数是否包含对其内部 Hook 的调用，React 将无法自动检查你的 Hook 是否违反了 Hook 的规则。
-#在两个组件中使用相同的 Hook 会共享 state 吗？
不会。自定义 Hook 是一种重用状态逻辑的机制(例如设置为订阅并存储当前值)，所以每次使用自定义 Hook 时，其中的所有 state 和副作用都是完全隔离的。
#自定义 Hook 如何获取独立的 state？
每次调用 Hook，它都会获取独立的 state。

¿Qué hay que hacer cuando se destruye el componente?

1. Borrar el temporizador en el componente

2. Cancele la solicitud de red fallida

   https://www.jianshu.com/p/22b49e6ad819 Un ejemplo de código en línea para finalizar solicitudes de red

reducir

¿Qué es redux? Cuéntame sobre el flujo de datos de redux.

Redux es una popular biblioteca de desarrollo front-end. Se utiliza para la gestión del estado global y la manipulación de datos. Se puede utilizar en combinación con cualquier biblioteca js (vue, Angola), etc. react es una biblioteca para la capa de vista, y redux generalmente se usa en combinación con react.

redux es un complemento de administración de datos. Redux utiliza un mecanismo de flujo de datos unidireccional. El llamado flujo de datos unidireccional es: los datos fluyen en una dirección y se envía una acción en la vista de vista para cambiar los datos. Después de que los datos cambian, la vista de vista es re-renderizado.

Flujo de datos en redux: envíe una acción a través del envío en la vista, el reductor recibirá la acción y cambiará los datos según el tipo de acción. La página se vuelve a representar después de que cambien los datos. Cada reductor devuelve nuevos datos de estado;

需要注意：action必须包含一个type属性，并且不能重复。为了解决这个问题可以使用前置命名空间或者symbol这种数据类型。因为每一次dispatch派发的时候，所有的reducer都会接收到这个action，所以action的type不能重复

reducer是用来改变数据的地方，所有的数据改变都在这里。每一个reducer都需要返回一个新的state状态，在reducer中通过action的type判断以什么方式改变数据。所以action的type必须唯一，要不然就没办法区分数据怎么改变了

每一个reducer都是一个function，这个function接收两个参数(state, action)，返回一个新的state状态数据

如果需要在react项目中使用redux需要使用插件react-redux

在组件中获取redux数据可以使用：useSelector或者connect实现

在组件中获取redux的dispatch方法，可以使用:useDispatch或者connect
useSelector或者useDispatch只能在function定义的组件中使用。
redux的action只能是简单的对象，如果要处理异步需要使用redux-thunk

componentes comunes, varias partes

1. **Acción**: se utiliza para organizar datos y pasarlos al reductor para realizar operaciones de cambio de datos.

   Cómo definir acción: Primero, debe tener un atributo de tipo, indicando el tipo de acción que se está ejecutando. Deben definirse como constantes de cadena, y también puede agregarles más propiedades

2. **Reductor**: aquí es donde se determina cómo cambiará el estado.

   Los reductores son funciones puras (devuelven un nuevo valor y no tienen efectos secundarios). Funciona aceptando el estado y la acción anteriores, y devolviendo un nuevo objeto como datos, el propósito no es comparar los datos originales, por lo que el rendimiento es mayor.

3. **Almacenamiento**: el árbol de estado/objetos de todo el programa se almacena en el Almacén.

   Una tienda es un objeto de JavaScript que contiene el estado del programa y proporciona métodos para acceder al estado, enviar acciones 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.

4. **Ver**: solo muestra los datos proporcionados por la Tienda.

Su flujo de trabajo es enviar una acción a través del envío en la página y cambiar los datos después de recibir la acción en el reductor. La página se vuelve a representar después de que cambien los datos.

Proceso de uso de Redux

- Instalar react-redux en andamios

- Use createStore para crear una tienda global para guardar todos los estados. createStore recibe un reductor como parámetro, y puede usar combineReducers para pasar varios reductores.

- En el reductor, se reciben dos parámetros, el primer parámetro indica el estado inicial de los datos, el segundo parámetro indica la acción, y el reductor devolverá un nuevo objeto como datos, por lo que no se requiere la comparación del objeto original. , y el rendimiento se mejorará mejorar.

- Si desea cambiar los datos, la vista envía una acción para ejecutar el reductor correspondiente a través del envío y lo actualiza en la tienda. Si la tienda cambia, la vista se volverá a renderizar.

- Podemos usar los métodos connect y Provider en react-redux para asociar nuestros datos. El proveedor proporciona la tienda a los subcomponentes a través del contexto de contexto y conecta los datos asociados en redux con accesorios en los componentes. accesorios.

- Si necesita enviar solicitudes asincrónicas, también necesita el complemento react-thunk, que debe configurarse en creaceStore.

Flujo

Flux es un patrón arquitectónico que impone el flujo de datos unidireccional. Controla los datos derivados y permite la comunicación entre múltiples componentes utilizando un almacén central con autoridad sobre todos los datos. Las actualizaciones de datos en toda la aplicación solo deben ocurrir aquí. Flux brinda estabilidad a la aplicación y reduce los errores de tiempo de ejecución.

La acción en redux debe ser un objeto plano (objeto simple), no una función. Para resolver el problema de la acción asíncrona, necesitamos usar complementos

La función del complemento redux-thunk es determinar en qué tipo de acción se encuentra actualmente nuestro envío. Si es un objeto, se ejecutará directamente, si es una función, el envío se enviará dentro de la función pasada como un parámetro

El principio del middleware redux

- El middleware es en realidad una modificación del despacho.

- Middleware se refiere a la modificación del envío entre la acción y la tienda.

- Al enviar una acción, vaya primero al middleware y luego a la tienda

- Desde acción (middleware) -> tienda -> reductor -> tienda

[kit de herramientas de redux] (https://kit de herramientas de redux.js.org/)

Es un conjunto de complementos de redux proporcionado por el oficial, que nos permite usar redux para el desarrollo en el proyecto de manera muy conveniente, sin configuración adicional. Ha incorporado algunos complementos de uso común, como: dev-tools (herramientas de depuración para desarrolladores), redux-thunk (manejo de operaciones asincrónicas), inmutable (tipos de datos inmutables), etc.

npm install @reduxjs/toolkit react-redux # 安装依赖

crearRebanada

La función de esta API es crear los datos de cada reductor, organizados especificando el nombre, initialState, reductores y extraReducers

- nombre representa el espacio de nombres

- initialState representa el valor inicial

- La forma de cambiar los datos definidos por los reductores se puede exportar directamente como acciones.

- extraReducers escucha a otros reductores, sin cambiar de forma síncrona las operaciones de datos en el segmento actual

tienda de configuración

El rol es configurar o crear una fuente de datos de la tienda

crearAsyncThunk

La función es crear una acción asíncrona, que tendrá tres estados después de que la creación sea exitosa

pendiente, en progreso

rechazado, fallido

cumplido, exitoso. Recibe dos parámetros, el primer parámetro es el estado actual de los datos, y el segundo parámetro es la acción

Tres principios seguidos de redux

#单一数据源
整个应用的 state 被储存在 一棵 object tree 中，并且这个 object tree 只存在于 唯一一个 store 中。
#状态（State） 是只读的
唯一改变 state 的方法就是触发 action。
这样确保了 视图 和 网络请求 都不能直接修改 state，相反它们只能表达想要修改的意图。因为所有的修改都被集中化处理，且严格按照一个接一个的顺序执行，因此不用担心 竞态条件的出现。
#使用纯函数来修改state
为了指定状态树如何通过操作进行转换，你需要纯函数。纯函数是那些返回值仅取决于其参数值的函数。

Ventajas de Redux:

- **Previsibilidad de los resultados-** Dado que siempre hay una fuente de 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-** Solo necesita transferir 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 -** Redux tiene una gran comunidad detrás, lo 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.

- **FÁCIL DE PROBAR-** 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 usan los equipos

Desventajas de redux:

- Los datos requeridos por un componente deben pasarse del componente principal y no pueden obtenerse directamente de la tienda como en flux.

- Cuando se actualizan los datos relacionados de un componente, incluso si el componente principal no necesita usar este componente, el componente principal aún se volverá a procesar, lo que puede afectar la eficiencia o la necesidad de escribir un complejo shouldComponentUpdate para el juicio.

Gestión de datos en redux.

¿Administrará los datos de manera uniforme en redux o administrará los datos compartidos en redux?

- Todos los datos deben administrarse en redux.

- Cuando un componente tiene estado y accesorios y almacenamiento reducido para almacenar datos. Un componente tiene de doscientas a trescientas líneas y no sé dónde buscar errores, lo cual no es fácil de mantener.

- Cuando la lógica empresarial necesita expandirse, los datos se almacenan en el estado. Cuando otros componentes necesitan sus datos, será muy problemático. Redux es más conveniente.

- No se preocupe por el consumo de memoria redux, la memoria redux es 5 G (navegador Chrome)

¿Puede el tipo de acción en redux ser el mismo? ¿Por qué? ¿Cómo resolver?

No se puede repetir. Porque cada vez que se despacha una acción, todos los reductores recibirán esta acción, si el tipo de acción es el mismo, entonces no hay forma de distinguir cuál hizo el cambio. El espacio de nombres se puede configurar para el tipo, por ejemplo: "xx/tipo", xx significa espacio en blanco, tipo significa tipo de acción, para que puedan distinguirse. O use el tipo de símbolo para definir. Asegúrese de asegurarse de que el tipo de acción no se repita.

¿Cuáles son las formas de obtener los datos en el estado en redux?

conectar 和 useSelector

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

Las subclases no pueden usar esto hasta que se llame a super() En ES2015, las subclases deben llamar a super() en el constructor. La razón para pasar props a super() es facilitar (en subclases) el acceso a this.props en el constructor.

La diferencia entre onclick en js native event y onclick en jsx

La función de procesamiento de eventos onclick en js nativo se ejecuta en el entorno global, lo que contamina el entorno global y agrega eventos onclick a muchos elementos dom, lo que afecta el rendimiento de la página web. Al mismo tiempo, si el elemento se elimina dinámicamente desde el árbol dom, debe cerrar sesión manualmente Controlador de eventos, de lo contrario, puede causar pérdidas de memoria;

Las funciones montadas por onClick en jsx están todas controladas dentro del alcance del componente y no contaminarán el espacio global. En lugar de usar onclick directamente en jsx, adopta el método de delegación de eventos para montar el nodo DOM superior y todos los eventos de clic son capturados por este evento. , y luego asignarlo a una función específica de acuerdo con el componente específico. Por supuesto, el rendimiento es mayor que montar una función de procesamiento de eventos para cada onClick. Además, React controla el ciclo de vida del componente. Al desmontar, es natural poder borrar todas las funciones de procesamiento de eventos y la memoria relacionadas. Las fugas ya no son un problema;

corriente única

El método de flujo de datos unidireccional utiliza un flujo de datos de carga y un flujo de datos de enlace descendente para la comunicación de datos bidireccional, y los dos flujos de datos son independientes entre sí. El flujo de datos unidireccional significa que el estado solo se puede modificar en una dirección.

ventaja:

1. Todos los cambios de estado se pueden registrar y rastrear, y la fuente es fácil de rastrear;

2. Solo hay una copia de todos los datos, y solo una entrada y salida para los datos de los componentes, lo que hace que el programa sea más intuitivo y fácil de entender, y favorece la mantenibilidad de la aplicación;

3. Una vez que los datos cambien, actualice la página (data-page), pero no (page-data);

4. Si el usuario realiza un cambio en la página, se recopilará manualmente (bidireccional es automático) y se fusionará con los datos originales.

defecto:

1. La representación del código HTML se completó y no se puede cambiar. Si hay datos nuevos, se debe eliminar el código HTML anterior y se deben integrar los nuevos datos y la plantilla para volver a representar;

2. La cantidad de código aumenta, el proceso de flujo de datos se vuelve más largo y aparecen muchos códigos repetitivos similares;

Algoritmo virtual dom y diff

Virtual dom es una estructura de árbol dom expresada por js, que eventualmente generará dom real. Es un objeto js, ​​por lo que la eficiencia de la comparación de actualizaciones es muy alta. Al renderizar y generar el árbol dom real, realizará una actualización parcial en lugar de actualizar toda la página. Esto es conveniente para mejorar la velocidad de representación de la página y optimizar el rendimiento de la página.

El algoritmo diff es un algoritmo de comparación, que se utiliza para comparar los cambios del dominio virtual. Encuentre qué posición ha cambiado y realice una operación de reemplazo. Se compara capa por capa y reemplaza directamente todo el árbol cuando encuentra un nodo modificado;

algoritmo diferencial

Calcule la parte modificada real del DOM virtual y solo realice operaciones DOM nativas en esta parte en lugar de volver a renderizar la página completa.

(1) ¿Qué es la reconciliación?

El proceso de manipulación mínima de convertir un árbol DOM virtual en un árbol DOM real se denomina reconciliación.

(2) ¿Qué es el algoritmo React diff?

El algoritmo diff es el principio de implementación específico de la reconciliación:

- Descomponer la estructura de árbol según el nivel, y comparar solo elementos del mismo nivel.

- Agregue un atributo clave único a cada unidad de la estructura de la lista para facilitar la comparación.

- React solo emparejará componentes de la misma clase (la clase aquí se refiere al nombre del componente)

- Operación de combinación, al llamar al método setState del componente, React lo marca como sucio. Al final de cada ciclo de eventos, React verifica todos los componentes marcados como sucios y vuelve a pintar.

- Representación selectiva de subárboles. Los desarrolladores pueden anular shouldComponentUpdate para mejorar el rendimiento de diff.

dominio virtual

- El dominio virtual es en realidad un objeto js. Es una manifestación del dominio real en la memoria. El dominio virtual y el dominio real están sincronizados. Este proceso de sincronización es el proceso de reconciliación.

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

- Al comparar el dom real, es muy complicado. Habrá métodos, atributos y eventos en el árbol de dom real, lo que consumirá mucho rendimiento. Al convertir objetos de dom real en objetos en js, no tiene las características de dom real, y simplemente comparar el rendimiento de los objetos js será más rápido.

¿Límites de error en reaccionar? React captura excepciones de procesamiento de página

- El concepto de límites de error se introdujo en React16.X.

- Puede capturar errores generados en sus subcomponentes, similar a try-catch, pero implementado en forma de componentes de reacción.

- Con el límite de error, incluso si el resultado de un determinado componente es incorrecto, no se colgará todo el programa React. Solo el componente que falló muestra una interfaz alternativa, mientras que todo el programa sigue siendo completamente funcional.

- La función componentDidCatch() aquí es similar al bloque de código catch {} en JavaScript, pero solo se puede usar para componentes. Solo los componentes de clase pueden ser límites de error.

- Dentro de la función componentDidCatch() establecemos el estado hasError en verdadero. Luego verifique ese estado en el método de renderizado. Si el estado de error es verdadero, represente la interfaz alternativa; si es falso, represente la interfaz del componente React que desea representar como una interfaz de subcomponente.

Sin embargo, los siguientes errores Límites de error aún no se pueden detectar:

- error de evento

- Límites de error en sí

- código asíncrono

Componentes controlables e incontrolables

- La principal diferencia entre los componentes controlables y los componentes no controlables es si el valor de entrada corresponde al valor de estado

- Los componentes no controlables necesitan usar ref para obtener el valor del nodo dom al obtener el valor

- Principalmente si el estado controla el valor de la forma

- Necesita monitorear onChange usted mismo y actualizar el estado

que es reseleccionar

- Similar a la propiedad calculada en vue

- datos derivados

- Hay un caché de valores para la optimización del rendimiento.

referencia y referencias

- ref se usa para obtener el elemento dom

- Refs es la abreviatura de referencias en React. Es una propiedad que ayuda a almacenar una referencia a un elemento o componente específico de React, que será devuelto por la función de configuración de representación del componente. Se utiliza para una referencia a un elemento o componente específico devuelto por render(). Necesita referencias cuando necesita hacer mediciones DOM o agregar métodos a los componentes.

  Al usar referencias:

  - Cuando necesite administrar el enfoque, seleccione texto o reproducción de medios

  - Animación activada

  - Integrar con bibliotecas DOM de terceros

- Por ejemplo, cuando se carga una imagen, si quiero obtener el ancho y el alto de la imagen, necesito usar referencias, como una lupa.

dos

El marco dva es esencialmente un conjunto de marcos encapsulados por Ant Financial basados ​​en la pila de tecnología React.

La característica es que elimina el problema de configurar manualmente un entorno de desarrollo completo (instalación de Redux, React-Router, etc.) para principiantes. La instalación con un solo clic es suficiente para el desarrollo del proyecto. Aunque reduce la dificultad de comenzar, inevitablemente hace que el costo de expansión sea más alto Alto (por ejemplo, cuando necesita configurar elementos de configuración específicos del paquete web por separado, y estos elementos de configuración no están en el rango configurable de roadhog), no hay necesidad de preocuparse. complejidad del sistema se desarrollan utilizando el marco dva, y es más que suficiente usar elementos de configuración empaquetados.

Registre el modelo en la instancia de dva. Use la función de conexión en la página para conectar la tienda redux y los componentes de la página, y pase el estado de la tienda al componente de la página como accesorios. E inicie una solicitud asincrónica para obtener datos remotos después de que el componente se haya montado correctamente. Escriba el reductor correspondiente a esta acción y la acción asíncrona que inicia la solicitud asíncrona.

¿Cuál es la diferencia entre eventos híbridos en reaccionar y eventos dom nativos?

Los eventos en reacción son procesados ​​por el marco para la encapsulación secundaria, que es diferente de los eventos dom nativos. No se agregan directamente en los elementos dom.

El modelo de eventos DOM se divide en captura y burbujeo. Cuando ocurre un evento, se propaga entre elementos secundarios y principales. La propagación de eventos se divide en tres fases:

Capturar (Capture): el proceso de pasar el objeto de evento del objeto de ventana al objeto de destino.

Destino: el nodo de destino está procesando el evento.

Burbuja: el proceso de pasar el objeto de evento del objeto de destino al objeto de ventana.

El mecanismo de eventos en React es completamente diferente al nativo, el evento no está vinculado al DOM nativo y el evento emitido también es un contenedor para el evento nativo. El sistema de eventos internos de React se puede dividir en dos fases: registro de eventos y activación de eventos.

Registro de eventos: React registra todos los eventos DOM en el nodo del documento.

Activación de eventos: cuando se ejecuta el evento, el evento vinculante en el documento distribuirá el evento y encontrará el componente que activó el evento de acuerdo con el tipo almacenado previamente y la ID del componente.

Ventajas del mecanismo de eventos React:

1. Reducir el consumo de memoria y mejorar el rendimiento Un tipo de evento solo se registra una vez en el documento

2. Unifique la especificación, resuelva el problema de compatibilidad de ie events y simplifique la lógica de eventos

3. Amigable con los desarrolladores

paquete web

paquete web

Herramienta de empaquetamiento de desarrollo modular front-end, su objetivo principal es empaquetar archivos JavaScript juntos, siempre lo hemos usado, pero revisé la documentación para todas las configuraciones.

En webpack, ¿se completa la conversión de JSX con la ayuda del cargador? ¿O babel?

Debido a que el código de reacción no se puede ejecutar directamente en el navegador, solo se puede ejecutar en el navegador convirtiendo el código en ES5 con la ayuda de scaffolding (en vue, se transforma con la ayuda de vue-loader en webpack). react usa babel Convertido por preset-react in.

principio de empaquetado webpack

Principio de empaquetado: webpack trata el proyecto como un todo. Con un archivo principal dado, webpack encontrará todos los archivos dependientes en su proyecto desde este archivo principal, usará el cargador para procesarlos y finalmente los empaquetará en uno o más archivos js reconocidos. por el navegador

Funciones básicas y principios de funcionamiento de webpack.

1. Conversión de código: compile TypeScript en js, compile scss en css, etc.

2. Optimización de archivos: comprimir js, css, código HTML, comprimir y fusionar imágenes, etc.

3. Segmentación de código: extraiga el código común de varias páginas, extraiga el código que no necesita ejecutarse en la primera pantalla y deje que se cargue de forma asíncrona

4. Fusión de módulos: un módulo hace referencia a otros módulos y archivos, y necesita crear una función para fusionar los módulos en un solo archivo

5. Actualización en caliente: controle los cambios en el código original local, cree y actualice el contenido automáticamente

configuración del paquete web, webpack.config.js

const path = require("path"); //引入path
module.exports = {
  entry: "./path/to/my/entry/file.js", //入口路径，从哪开始打包
  output: {
    path: path.resolve(__dirname, "dist"), //__dirname指webpack.config.js所在的目录，dist指输出路径
    filename: "my-first-webpack.bundle.js", //输出文件名
  },
};
  • modo: modo de desarrollo 'desarrollo'
  • entrada
    • La ruta de entrada le dice al paquete web dónde comenzar a empaquetar
  • producción
    • El atributo de salida  le dice al paquete web dónde generar los  paquetes que crea y cómo nombrar esos archivos.

herramienta de gestión de código git

Consulte los artículos anteriores: http://t.csdn.cn/cuIdz

Supongo que te gusta

Origin blog.csdn.net/leoxingc/article/details/127857631
Recomendado
Clasificación
Diario
Más
2024-05-18(30)
2024-05-17(4)
2024-05-16(22)
2024-05-15(5)
2024-05-14(10)
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)

Code World

© 2018 codetd.com