React Force Rendering: tutorial completo

Como desarrollador, al crear interfaces de usuario con una biblioteca como React, lanzada en 2013 , su aplicación puede ralentizarse a medida que se vuelve más compleja. React vuelve a renderizar los componentes cada vez que su estado o sus accesorios cambian, incluso si los cambios son insignificantes o irrelevantes. Esto puede hacer que su aplicación desperdicie recursos valiosos y provoque retrasos innecesarios para sus usuarios. Para resolver este problema, es esencial explorar técnicas que puedan ayudarlo a implementar la renderización de una manera que reduzca significativamente la cantidad de renderizaciones y mejore el rendimiento de su aplicación React.

En este artículo, profundizaré en el renderizado forzado de React, que es una forma de activar el renderizado de un componente manualmente. También discutiré cómo implementar esta técnica en su aplicación React usando varios métodos, como cambiar el estado, cambiar la clave de un componente y usar el método forceUpdate. Al comprender por qué y cuándo podría necesitar esta técnica, podrá utilizarla para crear aplicaciones React más rápidas y eficientes que brinden una mejor experiencia de usuario a sus usuarios.

¡Vamos a bucear!

¿Qué es el renderizado de React Force?

La renderización forzada de React es una técnica utilizada para forzar la renderización de un componente incluso cuando no hay cambios en sus accesorios o estado. Esto puede resultar útil cuando desea actualizar el componente en función de factores externos que no están directamente relacionados con el estado interno del componente. Por ejemplo, si tiene un componente que muestra la hora actual, es posible que desee forzarlo a volver a renderizarse cada segundo para actualizar la hora mostrada.

¿Cuándo se vuelve a renderizar React?

Profundicemos un poco más y veamos cuándo React vuelve a renderizar un componente.

¿Cómo implementar el renderizado forzado en React?

Hay varias formas de forzar que un componente se vuelva a renderizar en React. Veamos ahora algunas formas en que podemos implementar renderizaciones forzadas en React.

Requisitos previos

Para implementar con éxito el renderizador de reacción forzada, debe tener lo siguiente:

• Node.js : la última versión de Node.js en su máquina.
• Un editor de código : cualquier IDE que admita React.
• Biblioteca React: la última versión de React en su máquina.

Estado de actualización

En React, puedes forzar que un componente se vuelva a renderizar actualizando su estado. Aquí hay un fragmento de código de ejemplo:

 importar React, {useState} de 'react';

 función Contador {
 const (recuento, setCount) = useState(0);

 incremento de función {
 setCount(cuenta + 1);
 }

 función forceRender {
 setCount(recuento);
 }

 devolver (
 <div>
 <p>Recuento: {recuento}</p> 
<botón onClick={incremento}>Incremento</botón>
 <button onClick={forceRerender}>Forzar reproducción</button>
 </div>
 );
 }

En este ejemplo, tengo un componente Contador que representa un valor de conteo y dos botones. La función de incremento actualiza el estado de conteo agregando 1. La función forceRerender también actualiza el estado de conteo, pero establece el valor en el conteo actual, sin hacer nada. Sin embargo, debido a que el estado ha cambiado, React volverá a renderizar el componente y se actualizará el valor del recuento.

Utilice el método forceUpdate

Otra forma de forzar un nuevo renderizado en React es usar el método forceUpdate, disponible en los componentes de la clase. Aquí hay un fragmento de código de ejemplo:

 importar React, {Componente} de 'react';

 clase MiComponente extiende Componente {
 constructor(accesorios) {
 súper(accesorios);
 this.state = {cuenta: 0};
 }

 incremento {
 this.setState({ recuento: this.state.count + 1 });
 }

 renderizar fuerza {
 this.forceUpdate;
 }

 prestar {
 devolver (
 <div> 
<p>Recuento: {this.state.count}</p>
 <botón onClick={ => this.increment }>Incremento</button>
 <button onClick={ => this.forceRerender }>Forzar repetición</button>
 </div>
 );
 }
 }

En este ejemplo, tengo un componente de la clase MyComponent que también representa un valor de recuento y dos botones. La función de incremento actualiza el estado de recuento agregando 1. La función forceRerender llama al método forceUpdate para forzar una nueva representación del componente. Este método debe usarse menos, ya que puede ser menos eficiente que actualizar el estado y generar renderizaciones innecesarias.

Cambiar la propiedad principal de un componente.

Además, cambiar la propiedad clave de un componente también puede desencadenar una nueva renderización en React. La propiedad clave es un atributo especial que React utiliza para identificar elementos de la lista y ayudar a optimizar las actualizaciones.

A continuación se muestra un fragmento de código de ejemplo que demuestra cómo cambiar la propiedad clave de un componente secundario puede desencadenar una nueva representación:

 importar React, {useState} de 'react';

 Lista de funciones {
 const (elementos, setItems) = useState(('manzana', 'plátano', 'cereza'));

 función barajarItems {
  const barajado = (...elementos).sort( => Math.random - 0.5);
  setItems(barajado);
 }

 devolver (
  <div>
   <button onClick={shuffleItems}>Aleatorio de elementos</button>
   <ul>
    {elementos.map((elemento, índice) => (
     <li clave={item}>{item}</li>
    ))}
   </ul>
  </div>
 );
 }

En este ejemplo, tengo un componente Lista que muestra una lista de elementos y un botón para mezclar los elementos aleatoriamente. La propiedad clave para cada elemento se establece en el valor propio del elemento, lo que significa que si el orden de los elementos cambia, React volverá a representar la lista.

Cuando se llama a la función shuffleItems, crea una nueva matriz de elementos mezclando la matriz existente. Cuando la nueva matriz se establece como estado, el componente Lista se vuelve a representar y React detecta que la propiedad clave de cada elemento ha cambiado. Luego, React actualiza la lista para reflejar el nuevo orden de los elementos.

Cambiar la propiedad clave puede resultar útil para activar una nueva representación cuando los datos de un componente cambian pero el estado no. Sin embargo, debe usarse con precaución, ya que cambiar el soporte principal con demasiada frecuencia puede generar renderizaciones innecesarias y degradar el rendimiento.

¿Cuándo utilizar el renderizado de React Force?

Si bien los renderizados forzados pueden ser útiles en ciertas situaciones, no deben usarse con frecuencia ya que pueden ser menos eficientes que permitir que React maneje las actualizaciones automáticamente. En general, se recomienda utilizar la renderización forzada solo cuando sea necesario y considerar enfoques alternativos, como el uso de estados o accesorios para activar actualizaciones.

Algunos casos de uso comunes para el renderizado de React Force incluyen:

• Actualizar un componente en función de datos o eventos externos que no están directamente relacionados con el estado o las propiedades del componente.
• Active una nueva representación de un componente actualizado a través de una biblioteca de terceros o código que no sea de React.
• Actualización de un componente que ha sido desmontado y vuelto a montar.

Optimizando su nuevo renderizado

A continuación se ofrecen algunos consejos para optimizar los renderizados en React:

Utilice el método de ciclo de vida deberíaComponentUpdate

Este método le permite controlar cuándo se debe actualizar un componente devolviendo un valor booleano. De forma predeterminada, deberíaComponentUpdate devuelve verdadero, lo que significa que un componente siempre se actualizará cuando cambien su estado o sus accesorios. Sin embargo, puede anular este método para implementar una lógica personalizada que determine cuándo se debe actualizar un componente. Por ejemplo, si un componente solo necesita actualizarse si cambia una propiedad específica, puede comparar el valor de la propiedad anterior con el nuevo valor de la propiedad en mustComponentUpdate y devolver falso si son iguales.

 clase MiComponente extiende React.Component {
 deberíaComponentUpdate(nextProps, nextState) {
  // compara los accesorios y el estado del componente actual y siguiente
  // solo devuelve verdadero si son diferentes
  devolver this.props.someProp! == nextProps.someProp
     this.state.someState !== nextState.someState;
 }

 prestar { 
devolver <div>{this.props.someProp}</div>;
 }
 }

Utilice PureComponent o React.memo

PureComponent es un componente integrado de React que implementa mustComponentUpdate con una comparación superficial de accesorios y estado. Esto significa que si los accesorios y el estado de un PureComponent no han cambiado, no se volverá a representar. React.memo es un componente de orden superior que se puede utilizar para optimizar componentes funcionales de la misma manera que PureComponent.

 clase MyPureComponent extiende React.PureComponent {
 prestar {
  devolver <div>{this.props.someProp}</div>;
 }
 }

 const MyMemoComponent = React.memo (función MyMemoComponent (accesorios) {
 devolver <div>{props.someProp}</div>;
 });

Evite actualizaciones de estado innecesarias

La actualización del estado desencadena una nueva representación del componente. Por lo tanto, debes evitar actualizar el estado innecesariamente. Por ejemplo, si un componente muestra una lista de elementos y solo necesita actualizar la lista cuando agrega un elemento nuevo, evite llamar a setState al eliminar o actualizar un elemento.

 clase MiComponente extiende React.Component {
 constructor(accesorios) {
  súper(accesorios);

  este.estado = {
   elementos:
  };
 }

 handleAddItem = (elemento) => {
  this.setState (estado anterior => {
   devolver {elementos: (...prevState.items, elemento)};
  });
 }

 prestar {
  devolver (
   <div>
    {this.state.items.map(item => <div key={item.id}>{item.name}</div>)}
    <button onClick={ => this.handleAddItem({id: 1, nombre: 'Nuevo artículo'})}>Agregar artículo</button>
   </div>
  );
 }
 }

Utilice apoyo clave para listas

Al renderizar listas de componentes, React usa la propiedad clave para rastrear la identidad de cada componente. Si la clave de un componente cambia, React lo tratará como un componente nuevo y lo volverá a renderizar. Por lo tanto, debe utilizar una clave estable y única para cada componente de la lista para evitar renderizaciones innecesarias.

 clase MiComponente extiende React.Component {
 prestar {
  elementos constantes = ({id: 1, nombre: 'Artículo 1'}, {id: 2, nombre: 'Artículo 2'}, {id: 3, nombre: 'Artículo 3'});

  devolver (
   <div>
    {items.map(item => <div key={item.id}>{item.name}</div>)}
   </div>
  );
 }
 }

Utilice la devolución de llamada debería actualizar en los ganchos useMemo y useCallback

Los ganchos useMemo y useCallback se pueden utilizar para memorizar el resultado de una función o cálculo. Sin embargo, de forma predeterminada volverán a calcular el resultado en cada renderizado. Puede pasar un segundo argumento a useMemo o useCallback, una serie de dependencias. El gancho solo volverá a calcular el resultado si cambia una dependencia. Si tiene cálculos costosos, puede usar la devolución de llamada mustUpdate para implementar una lógica personalizada que determine cuándo se debe actualizar el cálculo.

 función MiComponente(accesorios) {
 const (recuento, setCount) = React.useState(0);

 const valorcaro = React.useMemo( => {
  // haz algunos cálculos costosos aquí
  recuento de devoluciones * 10;
 }, (recuento), (anterior, siguiente) => {
  // sólo actualizamos el cálculo si el recuento ha aumentado en más de 5
  retorno (siguiente - anterior) > 5;
 });

 const handleClick = React.useCallback( => {
  setCount(prevCount => prevCount + 1);
 }, );

 devolver ( 
<div>
 <div>Recuento: {recuento}</div>
 <div>Valor caro: {expensiveValue}</div>
 <button onClick={handleClick}>Incrementar recuento</button>
 </div>
 );
 }

Al implementar estas optimizaciones, puede reducir la cantidad de renderizaciones innecesarias en su aplicación React y mejorar el rendimiento. Estos son sólo ejemplos; La implementación específica dependerá de las necesidades de su aplicación.

Conclusión

En conclusión, volver a renderizar es un concepto esencial en el desarrollo de React, ya que determina cuándo se debe actualizar un componente en respuesta a cambios en su estado o accesorios. El motor DOM virtual y el proceso de reconciliación de React están diseñados para ser eficientes y optimizados para el rendimiento, lo que facilita la creación de aplicaciones rápidas y con capacidad de respuesta.

Sin embargo, a veces puede ser necesario forzar una nueva representación para actualizar la interfaz de usuario cuando ocurren ciertos eventos. En este artículo, exploramos algunos métodos que puede utilizar para forzar una nueva renderización en React, incluido el cambio de estado, el cambio de clave de un componente y el uso del método forceUpdate.

Es importante utilizar estos métodos con prudencia para evitar una repetición excesiva, ya que esto puede afectar el rendimiento de su aplicación. Si sigue las mejores prácticas y comprende cuándo y por qué React vuelve a renderizar componentes, puede crear aplicaciones React más eficientes y rápidas.

Si te gustó este artículo sobre React, consulta estos temas;

• Reaccionar mejores prácticas
• Reaccionar bibliotecas de componentes de UI
• Los 6 mejores IDE y editores de React
• Reaccionar frente a Backbone JS
• ¿Por qué React es tan popular?
• Lo que necesitas saber sobre reaccionar
• Reaccionar WebSockets: Tutorial