Cómo forzar la actualización del componente de reacción para volver a renderizar

Cómo forzar la actualización del componente de reacción para volver a renderizar

En este tutorial, aprenderemos cómo forzar la actualización de los componentes basados ​​en la clase de reacción, así como los componentes funcionales.

React generalmente renderiza el componente cada vez que el componente state o entonces props se cambian y vemos la interfaz de usuario actualizada.

Índice
  1. Forzar componente para volver a renderizar
  2. Los ganchos de reacción obligan a un componente a volver a renderizarse

Forzar componente para volver a renderizar

reaccionar a un forceUpdate() método mediante el cual podemos forzar el componente de reacción para que se vuelva a renderizar.

Veamos un ejemplo.

class App extends React.Component {

  handleUpdate = () => {
    this.forceUpdate();  };

  render() {
    return (
      <div>
        <h1>{Math.random()}</h1>
        <button onClick={this.handleUpdate}>Update</button>      </div>
    );
  }
}

Nota: llamando forceUpdate() el método de reacción ignora el shouldComponentUpdate().

La segunda forma de renderizar un componente de reacción es llamar a un setState() con el mismo estado o un estado vacío.

class App extends React.Component {

  handleUpdate = () => {
        this.setState({});
  };

  render() {
    return (
      <div>
        <h1>{Math.random()}</h1>
        <button onClick={this.handleUpdate}>Update</button>      </div>
    );
  }
}

En el código anterior, llamamos this.setState({}) con un objeto vacío, por lo que reacciona piensa que algo cambió en el estado del componente y lo representa con una nueva interfaz de usuario.

Los ganchos de reacción obligan a un componente a volver a renderizarse

En paréntesis de reacción no tenemos forceUpdate() método para volver a renderizar el componente, pero podemos hacerlo usando un useState() gancho.

Veamos un ejemplo.

import React,{useState} from 'react';

function App() {
  let  [,setState]=useState();
  function handleUpdate() {
      
     setState({});  }
  return (
    <div className="App">
      <h1>{Math.random()}</h1>
      <button onClick={handleUpdate}>Update</button>
    </div>
  );
}

Si quieres conocer otros artículos parecidos a Cómo forzar la actualización del componente de reacción para volver a renderizar puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas