Los ganchos de React son una característica que apareció después de la fibra, por lo que muchas personas creen erróneamente que los ganchos deben depender de la fibra para implementarse. De hecho, este no es el caso.
Ahora, los ganchos no solo se implementan en reaccionar, sino también en marcos como preact, reaccionar ssr y midway. Su implementación no depende de la fibra.
Echemos un vistazo a cómo se implementan los ganchos en estos diferentes marcos:
React describe la interfaz a través de jsx, que se compilará en una función de renderizado mediante herramientas de compilación como babel o tsc, y luego se ejecutará para generar vdom:
La función de renderizado aquí era React.createElement antes de React17:
Después de React 17, se cambió a jsx:
Este tiempo de ejecución jsx se introducirá automáticamente y no es necesario conservar una importación de React para cada componente como antes.
La ejecución de la función de renderizado genera vdom:
La estructura de vdom es así:
Antes de React16, este vdom se representaba de forma recursiva, agregando, eliminando y modificando el dom real.
Después de que React16 introdujo la arquitectura de fibra, hubo un paso adicional: primero convertir vdom en fibra y luego renderizar la fibra.
El proceso de convertir vdom a fibra se llama conciliación, y el proceso final de agregar, eliminar y modificar el dom real se llama confirmación.
¿Por qué necesitamos hacer tal conversión?
Debido a que vdom solo tiene referencias a los nodos secundarios, y no tiene referencias al nodo principal ni a otros nodos hermanos, esto resulta en la necesidad de representar recursivamente todos los nodos vdom al dom al mismo tiempo sin interrupciones.
¿Qué pasa si se interrumpe? Debido a que el nodo principal y los nodos hermanos no se registran, solo podemos continuar procesando los nodos secundarios, pero no podemos procesar otras partes del vdom.
Es por eso que React introdujo este tipo de estructura de fibra, que tiene referencias como el retorno del nodo padre, el nodo hijo, el nodo hermano, etc., que pueden interrumpirse, porque todos los nodos no procesados se pueden encontrar después de la interrupción y la recuperación.
La estructura del nodo de fibra es la siguiente:
Este proceso se puede interrumpir y, naturalmente, se puede programar, que es un proceso programado.
Por lo tanto, la arquitectura de fibra se divide en tres etapas: programación, conciliación (convertir vdom a fibra) y confirmación (actualización a dom).
Los ganchos se pueden usar en componentes de funciones para acceder a algunos valores, y estos valores se almacenan en el nodo de fibra.
Por ejemplo, se utilizan 6 ganchos en este componente de función:
Luego hay una lista vinculada de estado memorizado de 6 elementos en el nodo de fibra correspondiente:
Concatenado por el siguiente:
Diferentes ganchos acceden a valores en diferentes elementos de la lista enlazada de memorizedState. Este es el principio de los ganchos de reacción.
Esta lista vinculada tiene una fase de creación y una fase de actualización, por lo que encontrará que la implementación final de useXxx se divide en mountXxx y updateXxx:
La fase de montaje aquí consiste en crear nodos de enlace y ensamblarlos en una lista vinculada:
La lista enlazada de ganchos creada se vinculará al atributo memorizedState del nodo de fibra.
Al actualizar, naturalmente puede recuperar esta lista de enlaces del nodo de fibra:
De esta manera, en múltiples representaciones, la API useXxx puede encontrar el estado memorizado correspondiente en el nodo de fibra.
Este es el principio de los ganchos de reacción. Puede ver que almacena el gancho en el nodo de fibra.
Entonces, ¿cuál es la diferencia con preact?
Preact es un marco más liviano compatible con el código de reacción. Admite componentes de clase y componentes de funciones, así como características de reacción como los ganchos. Sin embargo, no implementa la arquitectura de fibra.
Porque considera principalmente el tamaño máximo (sólo 3 kb), no el rendimiento máximo.
Acabamos de enterarnos de que reaccionar almacena la lista de enlaces en el nodo de fibra. Si preact no tiene un nodo de fibra, ¿dónde se almacenará la lista de enlaces?
De hecho, es fácil pensar que la fibra solo modifica vdom para mejorar el rendimiento y no existe una diferencia esencial con vdom. Entonces, ¿podemos simplemente almacenar el gancho en vdom?
De hecho, preact coloca la lista de enlaces en vdom.
Por ejemplo, este componente funcional tiene 4 ganchos:
Su implementación es acceder al gancho correspondiente en vdom:
No divide el gancho en dos etapas, montaje y actualización, como reaccionar, sino que las fusiona para su procesamiento.
Como se muestra en la figura, almacena ganchos en la matriz de componentes.__hooks y accede a ellos a través de subíndices.
Este componente es un atributo en vdom:
Es decir, el valor de los ganchos se almacena en la matriz de vnode._component._hooks.
Compare las diferencias entre reaccionar y preact en la implementación de enlaces:
en reaccionar, la lista de enlaces se almacena en el atributo fibreNode.memorizedState, en preact, la lista de enlaces se almacena en el atributo vnode._component._hooks
La lista de enlaces en reaccionar está concatenada
hasta next, y en preact La lista enlazada de ganchos es una matriz.
React separa la creación y actualización de la lista enlazada de ganchos
la implementación de ganchos no depende de la fibra, solo necesita encontrar un lugar para almacenar los datos del gancho correspondientes al componente, siempre que se puedan recuperar durante el procesamiento, no importa dónde se almacenen.
Debido a que vdom, la fibra y el renderizado de componentes están fuertemente relacionados, se almacenan en estas estructuras.
Por ejemplo, cuando reaccionar ssr implementa ganchos, no existe en fibra ni en vdom:
De hecho, además de csr, el paquete reaccionar-dom también puede hacer ssr:
use el método de renderizado de reaccionar- dom cuando rsc:
Cuando ssr, use el método renderToString o el método renderToStream de react-dom/server:
¿Crees que se realizará la conversión de vdom a fibra durante ssr?
Definitivamente no, Fiber es una estructura introducida para mejorar el rendimiento de renderizado cuando se ejecuta en el navegador, hacer que los cálculos sean interrumpibles y realizar cálculos cuando está inactivo.
La renderización del lado del servidor, naturalmente, no requiere fibra.
Si no se necesita fibra, ¿dónde almacena la lista de anzuelos? ¿vdom?
De hecho, se puede colocar en vdom, pero no es así.
Por ejemplo, use ganchos Ref:
Es una lista vinculada concatenada con la siguiente a partir de firstWorkInProgressHook.
Y firstWorkInProgressHook es el primer nodo de enlace creado con createHook:
No está montado en vdom.
¿Por qué?
Debido a que ssr solo necesita renderizarse una vez y no necesita actualizarse, no es necesario colgarlo en vdom.
Simplemente borre la lista de ganchos cada vez que termine de procesar los ganchos de cada componente:
Por lo tanto, cuando se utiliza reaccionar ssr, existen ganchos en las variables globales.
Compare la diferencia en los principios de implementación de los ganchos en reaccionar csr y ssr:
en csr, la fibra se creará a partir de vdom, que se utiliza para hacer que el procesamiento sea interrumpible y mejorar el rendimiento mediante la programación inactiva, pero en ssr, no se procesará directamente por vdom. Cuando se usa
csr, los ganchos se guardan en el nodo de fibra, mientras que cuando se usa ssr, se colocan directamente en las variables globales y se borran después de procesar cada componente. Debido a que CSR no se utilizará por segunda vez
, la creación y actualización de los enlaces se dividirá en dos fases: montaje y actualización, mientras que SSR solo se procesará una vez y solo la fase de creación.
El principio de implementación de los enlaces en realidad no es complicado. , Es decir, en un contexto determinado, almacene una lista vinculada en la lista vinculada, y luego la API de gancho accede a los datos correspondientes de diferentes elementos de la lista vinculada para completar su lógica respectiva. Este contexto puede ser vdom, fibra o incluso una variable global.
Sin embargo, la idea de los ganchos sigue siendo muy popular. El marco del lado del servidor producido por Taobao ha introducido la idea de los ganchos:
Midway es un marco de Node.js:
El marco del lado del servidor, naturalmente, no tiene estructuras como vdom y fibra, pero la idea de los ganchos no se basa en ellas. Para implementar la API de ganchos, solo necesita colocar una lista vinculada en un contexto determinado.
Midway implementa una API similar a los ganchos de reacción:
No he buscado específicamente dónde existe la lista de enlaces, pero ya dominamos el principio de implementación de los enlaces. Siempre que exista un contexto para almacenar la lista de enlaces, puede estar en cualquier lugar.
los ganchos de reacción son una característica que surgió después de la arquitectura de fibra de reacción. Mucha gente cree erróneamente que los ganchos deben implementarse con fibra. Observamos la implementación de ganchos en reaccionar, preact, reaccionar ssr y midway respectivamente, y descubrimos que. este no es el caso:
. estará bien. Entonces, ¿los ganchos de reacción tienen que depender de la fibra para implementarlo?
Obviamente no, se puede usar con fibra, vdom, variables globales o incluso cualquier contexto.