Diferencia entre recarga en caliente y recarga en vivo en React Native

La recarga en caliente y la recarga en vivo son algo que los desarrolladores de Reacts Native usan regularmente. Ambos tienen sus propias ventajas e importancia. Pero hay algunas diferencias clave entre estos dos.

¿Qué es la recarga en caliente?

Cada vez que realiza cambios en su código, hay una cosa que debe hacer cada vez, y eso guarda su código y vuelve a cargar su aplicación para ver los cambios que ha realizado. Lleva mucho tiempo, especialmente si solo ha realizado pequeños cambios pero tiene que volver a cargar toda la aplicación solo para ver esos cambios.

React Native resuelve este problema para los desarrolladores. La recarga en caliente le permite ver los cambios que ha realizado en el código sin tener que volver a cargar toda la aplicación. Cada vez que realice cambios, todo lo que necesita hacer es guardar su código. Tan pronto como guarde su código, React Native rastrea qué archivos han cambiado desde la última vez que guardó, y solo vuelve a cargar esos archivos por usted. Hace que todo el proceso sea muy rápido y eficiente.

ventajas:

• No necesita volver a compilar su aplicación.
• El estado de su aplicación se mantiene.
• Solo recarga aquellos archivos en los que hayas hecho cambios.
• Puede ver los cambios que ha realizado justo después de guardar su código.
• Tiempo eficiente.
• Modifique su código sin demora.

Desventajas:

• Si te gusta la navegación profunda, la recarga en caliente no funcionará correctamente. En este caso, debe volver a cargar toda la aplicación.
• Si ha utilizado la recarga en caliente de forma consecutiva sin ningún intervalo de tiempo, estropeará la salida.

Antes de pasar al ejemplo, configuremos rápidamente la aplicación:

Crear aplicación:

Paso 1: Abra su Terminal y ejecute el siguiente comando. Instalará Expo CLI globalmente en su sistema.

npm install -g expo-cli

Paso 2: ahora, cree un nuevo proyecto nativo de React ejecutando el siguiente comando.

expo init "Your_Project_Name"

Paso 3: Se le pedirá que elija una plantilla. Seleccione la plantilla en blanco. 

plantilla en blanco

Paso 4: Ahora ve a la carpeta del proyecto y ejecuta el siguiente comando para iniciar el servidor.

cd "Your_Project_Name"
npm start

 Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: Abra el archivo App.js. App.js es el archivo principal que se muestra primero cuando ejecuta su aplicación. Aquí crearemos un estado llamado número. Habrá 1 botón que el usuario puede presionar para aumentar el número en 1. Presionaremos este botón varias veces para cambiar el estado del número. el estado del número se representará en un componente de texto. Luego cambiamos la propiedad de estilo de ese componente de texto y guardamos nuestro código. Esto activará la recarga en caliente. Podremos ver que se mantiene el estado de número y solo cambiará el estilo del componente Texto. Esto no afectará a ningún otro componente de nuestra aplicación.

import { useState } from "react";
import { Button, StyleSheet, View, Text } from "react-native";
  
export default function App() {
    const [number, setNumber] = useState(0);
  
    return (
        <View style={styles.container}>
            <Text style={styles.number}>{number}</Text>
            <Button title="Increase" onPress={() => 
                setNumber(number + 1)} />
        </View>
    );
}
  
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
    number: {
        fontSize: 20,
    },
});

Salida: ahora, presionaremos el botón Aumentar varias veces para cambiar el estado. Luego cambiamos la propiedad de estilo del componente Texto y guardamos nuestro código para activar la recarga en caliente.

Recarga en caliente

¿QUÉ ES LA RECARGA EN VIVO?

La recarga en vivo es como su nombre indica, recargará toda su aplicación. No guardará el estado de su aplicación y se iniciará completamente de nuevo. Debe hacer una recarga en vivo cuando esté en navegación profunda en su aplicación porque a veces la recarga en caliente no funcionará en ese caso.

ventajas:

• Te ayuda a compilar tu aplicación.
• Cuando vive para recargar su aplicación, se crea un nuevo archivo que iniciará su aplicación desde el principio.
• Te ayuda mejor a depurar tu aplicación.

Desventajas:

• Tienes que recargar toda tu aplicación para ver los cambios que has hecho.
• Lleva mucho tiempo, especialmente si su aplicación es grande y tiene una navegación compleja.

Ejemplo: Abra el archivo App.js. App.js es el archivo principal que se muestra primero cuando ejecuta su aplicación. Aquí crearemos un estado llamado número. Habrá 1 botón que el usuario puede presionar para aumentar el número en 1. Presionaremos este botón varias veces para cambiar el estado del número. el estado del número se representará en un componente de texto. Luego cambiamos la propiedad de estilo de ese componente de texto y guardamos nuestro código. Luego recargamos nuestra aplicación para ver esos cambios. Podremos ver que el estado de número no se mantiene y nuestra app se volverá a compilar y empezar desde el principio.

import { useState } from "react";
import { Button, StyleSheet, View, Text } from "react-native";
  
export default function App() {
    const [number, setNumber] = useState(0);
  
    return (
        <View style={styles.container}>
            <Text style={styles.number}>{number}</Text>
            <Button title="Increase" onPress={() => 
                setNumber(number + 1)} />
        </View>
    );
}
  
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
    number: {
        fontSize: 20,
    },
});

Salida: ahora, presionaremos el botón Aumentar varias veces para cambiar el estado. Luego cambiamos la propiedad de estilo del componente Texto, guardamos nuestro código y recargamos la aplicación.

Recarga en vivo

Diferencias clave entre la recarga en caliente y la recarga en vivo: