Comprensión profunda de React16: (1). construcción de fibra
Vi la transmisión en vivo de @成铦organ en Zhihu, así que me inscribí con una actitud de curiosidad y aprendizaje, y me beneficié mucho.
Mi comprensión de la arquitectura de fibra óptica:
En mi artículo anterior, hay una breve introducción. Leer el código fuente de reacción - registro: registro de problemas 1.1.
Entendámoslo con un ejemplo específico, además hice un dibujo, debería ser fácil de entender ~ (el dibujo es un poco asqueroso)
Si hay a, b, componente cyd, entonces la jerarquía es:
Sabemos que el ciclo de vida del componente es:
Fase de carga:
Luego la fase de montaje A , B, C , ¿Cuál es el orden de representación del ciclo de vida de D?
Utiliza la función render() como línea divisoria. Comience con el componente de nivel superior y avance hasta los subcomponentes subyacentes. Entonces sube.
Lo mismo ocurre con la fase de actualización de componentes.
————————
El anterior es el método de renderizado de ensamblaje antes de reaccionar16. Hay un problema:
Al igual que un buceador, cuando se sumerge en el agua, tiene que nadar hasta el fondo hasta encontrar el componente del fondo y luego llega a la orilla. Durante este tiempo, nada de lo que ocurría en tierra podía perturbarle. Si tiene cosas más importantes que hacer (como operaciones de usuario), debe esperar a que baje a tierra.
Echemos un vistazo a la secuencia de renderizado para la construcción de edificios con fibra.
De vez en cuando los buzos bajan a tierra para ver si hay algo más importante que hacer.
La reacción de Join Fiber divide las actualizaciones de componentes en dos etapas.
Estos dos períodos de tiempo se dividen mediante renderizado.
El ciclo de vida de la fase1 se puede interrumpir. De vez en cuando, saldrá del proceso de renderizado actual para determinar si hay otras tareas más importantes. En este proceso, React construye un nuevo árbol paso a paso (a través de requestIdleCallback) reutilizando la estructura de datos de fibra en el WorkingProgressTree (no el virtualDomTree real), marcando los nodos que deben actualizarse y colocándolos en la cola.
El ciclo de vida de la fase2 no se puede interrumpir. React actualiza todos sus cambios en el DOM a la vez.
Aquí lo más importante es la fase1, que se realiza por períodos. Por tanto, debemos comprender el mecanismo de la fase 1 en detalle.
Esta situación es muy diferente de la versión anterior a reaccionar16, porque puede ejecutarse varias veces, por lo que será mejor que nos aseguremos de que el ciclo de vida de la fase1 tenga el mismo resultado cada vez, de lo contrario habrá problemas. , entonces Preferiblemente una función pura.
Por cierto, Cheng de repente también mencionó un problema, el problema de la inanición, es decir, si siempre existen tareas de alta prioridad, las tareas de baja prioridad nunca se ejecutarán y los componentes nunca se procesarán. Facebook no parece haber resuelto este problema en este momento, pero lo resolverá en el futuro ~
Entonces Facebook agregó la estructura de fibra en reaccionar16 no para reducir el tiempo de renderizado de los componentes, de hecho no lo hará. reducirlo. Lo más importante es que ahora puede priorizar algunas tareas de mayor prioridad, como las operaciones del usuario, lo que mejora la experiencia del usuario. Al menos los usuarios no se sentirán estancados ~
.