Vamos a enamorarnos de React Fiber

TLDR, React Fiber es un cambio de motor interno que permite a React romper los límites de la pila de llamadas. Su creación permite a React pausar / comenzar a renderizar el trabajo a voluntad. Finalmente, los usuarios de React podrán insinuar la "prioridad" del trabajo.

Actualmente, no podemos interactuar directamente con él, entonces, ¿por qué debería importarnos? ¡Porque es realmente genial!

React before Fiber fue como trabajar en una empresa de ritmo rápido sin git.

Imagínese estar en medio de una gran función y su jefe necesita una revisión, pronto. Sin embargo, no puede dejar de trabajar porque todos sus cambios están en un archivo, está comprometido a terminar este trabajo.

Si estuviéramos usando git, podríamos enviar nuestro trabajo a una rama y cambiar a una rama de revisión rápida.

Con Fiber, React puede pausar y reanudar el trabajo a voluntad para comenzar a trabajar en lo que importa lo antes posible. ?

React Internals en pocas palabras?

Creas un árbol de componentes. React toma este árbol, lo recorre y crea un modelo virtual del resultado final. Quizás esté renderizando al DOM, quizás esté apuntando a nativo. En este punto, eso no le importa a React.

Ahora, a medida que su aplicación se actualice, React realizará ese proceso de crear el resultado virtual una y otra vez. Cada vez, compara el árbol virtual anterior con el siguiente.

En este punto, dependemos de la plataforma. Si está renderizando al DOM, podría ser que solo haya cambiado una clase en un elemento. React recorrerá el árbol virtual, encontrará lo que ha cambiado y actualizará lo menos que pueda.

Esto podría significar actualizar un atributo de clase, o podría significar derribar todo el DOM. Esta es la reconciliación.

Antes de Fiber, esto era todo. Se dispuso el trabajo y el renderizador elegido se puso a trabajar. Incluso si el navegador estaba retrasado, el usuario estaba escribiendo o el planeta estaba a punto de explotar, el tren de renderizado no se detendría. ?

¿Cómo funciona (a alto nivel)?

Con Fiber, ahora hay diferentes niveles de prioridad para las actualizaciones. La actualización de una entrada en la que está escribiendo un usuario tiene mayor prioridad que una lista con miles de componentes.

La fibra divide el cálculo del árbol en unidades de trabajo que puede "comprometer" en cualquier momento. Entonces, ¿qué es una unidad de trabajo? ¡Es simplemente un nodo en su árbol de componentes!

  1. React ahora puede pausar, reanudar y reiniciar el trabajo en un componente. Esto significa que ciertos enlaces del ciclo de vida pueden activarse más de una vez.
  2. React puede tener un sistema de actualización basado en prioridades. Esto permite al equipo de React ajustar el renderizador para que React sea más rápido durante los casos de uso más comunes.

Sin embargo, quiero centrarme un poco en ese primer punto. React se alejará de (¡pero seguirá apoyando!) Algunos ganchos de ciclo de vida antiguos y agregará algunos nuevos. ?

componentWillMount, componentWillUpdate, componentWillReceiveProps, Ahora puede disparar varias veces. No debería desencadenar efectos secundarios aquí.

Ahora, desea activar efectos secundarios en los ganchos del ciclo de vida que solo se activarán una vez: componentDidMountycomponentDidUpdate

Para compensar muchos de los casos de uso que componentWillReceiveProps cubrimos, recibiremos dos nuevos ganchos.

  1. getDerivedStateFromProps que no tiene acceso a accesorios anteriores o la instancia del componente, pero le permite sincronizar el estado con sus accesorios.
  2. getSnapshotBeforeUpdatele da acceso al DOM antes de que se actualice. El valor que devuelve se puede utilizar componentDidUpdate.
A partir de React 16.4, getDerivedStateFromProps ahora siempre se activa antes que el método de render. ¡No solo cuando se actualizan los accesorios!

En resumen, Fiber permite a React ajustar el renderizado para asegurarse de que las actualizaciones más importantes ocurran lo antes posible, todo por el costo mínimo de algunos ganchos del ciclo de vida y galones de sangre de desarrollo de Facebook. ?

Si tiene alguna pregunta o está buscando una tutoría individual de React, ¡no dude en enviarme un tweet a @yurkaninryan en cualquier momento!

Si te gusta mi estilo de escritura, aquí tienes otros artículos que he hecho.

¡Buena suerte y feliz codificación! ??