¿Qué es “React Fiber”?

En este artículo, aprenderemos sobre React Fiber. React Fiber es un concepto de ReactJS que se utiliza para hacer que un sistema sea más rápido y fluido. React es una de las bibliotecas de JavaScript populares que se utilizan para crear una interfaz de usuario receptiva. React simplifica la codificación en comparación con otros marcos. Después de ciertos cambios, ¿quién es el siguiente elemento en representar el sistema llamado reconciliador? Este algoritmo ayuda a comparar dos árboles DOM y diferenciarlos. La fibra React ayuda a hacerlo mejor.

React Native: es un marco utilizado para desarrollar aplicaciones de estilo nativo de IOS y Android usando JavaScript. Para desarrollar aplicaciones nativas de React tenemos que instalar Node JS. Primero instalamos Node JS. Puede seguir los pasos para instalar Node JS.

Instalación: ahora aprenderemos cómo instalar React native usando expo cli para ejecutar la aplicación React native. Siga los siguientes comandos para instalar React native. 

Paso 1: Instale React Native CLI usando el comando npm 

npm install -g expo-cli

Paso 2: ahora puedes crear un proyecto. Supongamos que el nombre del proyecto es «firstProject»

expo init "firstProject"

Paso 3: para verificar si React native está instalado o no, use el comando de inicio en la carpeta de su proyecto

CD "firstProject"
npm start web

Estructura del proyecto: Tendrá el siguiente aspecto. 

Estructura del proyecto 

Ejemplo: Aquí está el primer código de la aplicación React en App.js. Dentro de firstproject/web App.js está incluido.

Aplicación.js

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
 
const Home = () => {
    return (
        <Text style={{
            marginTop: 300,
            marginLeft: 10
        }}>
            Geeksforgeeks
        </Text>
    )
}
 
export default function App() {
    return (
        <View>
            <Home />
        </View>
    );
}

Producción:

 

React Fiber: una fibra en una reacción es solo un objeto de JavaScript simple con algunas propiedades. El reconciliador de reacción actual, el reconciliador de fibra lleva el nombre de este objeto y es el reconciliador predeterminado desde la versión 16 de reacción.

React Fiber es una reescritura completa de React que soluciona algunos problemas de larga data y ofrece increíbles oportunidades para el futuro.

Objetivos de React Fiber: Fiber se centra en las animaciones y la capacidad de respuesta. Tiene la capacidad de dividir el trabajo en partes y priorizar tareas. Podemos pausar el trabajo y volver a él más tarde. También podemos reutilizar el trabajo completado previamente o tal vez abortarlo si no es necesario. A diferencia del antiguo reconciliador de React, es asíncrono.

Conciliador antiguo: Stack: ahora, para comprender realmente el poder de la fibra, hablemos brevemente sobre el antiguo. El antiguo reconciliador es el reconciliador de Stack. Stack era síncrono y tiene este nombre porque funcionaba como una pila. Podría agregar elementos y eliminar elementos, pero tenía que funcionar hasta que la pila estuviera vacía. No se podía interrumpir. Pensemos en un ejemplo que use el reconciliador de pila.

Imagina que tenemos el campo de texto. Idealmente, nos gustaría poder escribir siempre en el campo de texto sin demora. Si solo existe el campo de texto, naturalmente, eso no es un problema, pero ¿y si sucede algo más? Supongamos que hay una solicitud de red en segundo plano, que da como resultado que se represente algún elemento. Si escribimos en el campo de texto mientras se procesan esos elementos, experimentaremos un retraso, porque el reconciliador de pila está procesando esos elementos. Ahora debería quedar claro dónde estaba el problema de la pila sincrónica y con eso se presentan algunas limitaciones importantes.

Características de la fibra: estas son algunas de las características que se enumeran a continuación.

1. Si bien la fibra viene con diferentes aumentos de rendimiento significativos, en realidad no se trata de ellos. Se trata de la forma fundamental en que funciona React.
2. La fibra hace que React sea más rápido , pero también lo hace más inteligente .
3. La fibra también mejora el desarrollo de React y hace que agregar una nueva función sea significativamente más fácil.

¿Cómo funciona la fibra React?

Ahora, veamos la implementación en sí. Al principio, mencionamos que la fibra es un simple objeto javascript con algunas propiedades. La idea central subyacente es que la fibra también representa una unidad de trabajo.

React primero procesa esas fibras, esas unidades de trabajo y terminamos con algo llamado finishwork() . Posteriormente, compromete este trabajo, lo que resulta en cambios visibles en el DOM. Todo esto sucede en dos fases. La primera es la fase de renderizado y es durante esta fase que ocurre el procesamiento. La segunda fase es la fase de confirmación. Ahora, hablemos de ellos en orden.

Fase de renderizado: esta fase es asíncrona. Durante esta fase, React hace todo tipo de cosas asincrónicas detrás de escena que no son visibles para el usuario. Al ser asincrónico, surgen mayores oportunidades de las que ya hablé brevemente. React puede priorizar tareas. Haga una pausa en el trabajo o incluso deséchelo, etc. Anteriormente dije que durante esta fase, React procesa todas las fibras, que representan la unidad de trabajo. Durante esta fase, se llama a funciones internas como beginWork() y completeWork() . Esos procesan toda la fibra y volveremos a ellos más adelante.

Fase de confirmación: durante esta fase, se llama a la función commitWork() . Esta fase es sincrónica y no se puede interrumpir.

Cada vez que React procesa una fibra, maneja el trabajo directamente o lo programa para el futuro. El uso de la función llamada división de tiempo React puede dividir el trabajo en partes. Si algún trabajo tiene una prioridad muy alta como la animación; React puede programarlo de tal manera que se maneje lo antes posible, pero si algún trabajo tiene baja prioridad, por ejemplo, una solicitud de red, React puede simplemente retrasarlo todo el tiempo que sea necesario. Utiliza una función requestAnimationFrame() y requestIdleCallback() para hacer eso. 

request AnimationFrame(): programación de funciones de alta prioridad que se llamarán en el siguiente cuadro de animación. 

requestIdleCallback(): programa una función de baja prioridad para que se llame durante un período de inactividad.

Esas funciones son compatibles con la mayoría de los navegadores, pero en caso de que no existan, un polyfill.

Estructura de React Fiber: Comencemos con un ejemplo simple. Siempre que cambiamos de estado, eso es trabajo, siempre que hay una función de ciclo de vida que debe llamarse, eso es trabajo, siempre que hay una actualización que conduce a un cambio en el DOM, eso es trabajo. Podemos ver que el trabajo depende en gran medida de la fibra.

function App() { // App
    return (
        <div className="wrapper">// W
            <h2 className="h2">Heanding h2</h2>
            <h3 className="h3">Heanding h3</h3>
            <h4 className="h4">Heanding h4</h4>
        </div>
 
    );
}
ReactDOM.render(<App />,
    document.getElementById('root')); // HostRoot

Salida :

La fibra representa h2, h3 y h4 en una secuencia. 

Este código muestra el directorio raíz div us. Imagine un árbol de fibra que comience con node div. Este Node tiene un hijo h2, h3 y h4. Fiber representa div primero porque es una raíz, luego representa h2, h3 y h4 respectivamente. h2, h3 y h4 son hermanos entre sí. 

Árbol de fibra: en realidad hay dos árboles. El primero se llama árbol actual y el segundo se llama árbol de trabajo en curso. El árbol actual es eso, lo que está actualmente en la pantalla, por lo que tiene sentido que React no pueda modificarlo, ya que podría generar una interfaz de usuario inconsistente y todo tipo de inconvenientes. En cambio, React realiza cambios en el árbol de trabajo en progreso, simplemente intercambia punteros al final. Ahora workInProgress se convierte en un árbol actual y el árbol actual es el árbol workInProgress.

Implementación de reaccionar