Saltar al contenido

Forzar actualización del Reaccionar componente para volver a renderSep, 13thIn este tutorial, vamos a aprender acerca de cómo forzar la actualización del …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo forzar la actualización del reaccionan componentes basados ​​en clases y también los componentes funcionales.

Reaccionar generalmente re-dibuja el componente cada vez que se cambian el estado o apoyos componente y vemos la interfaz actualizada.

componente obligó a volver a hacer

Reaccionar tiene un método forceUpdate () mediante el uso que podemos forzar el componente reaccionan a volver a hacer.

Veamos un ejemplo.

class App extends React.Component {

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

render() {
return (

{Math.random()}

);
}
}

Nota: Llamando al método forceUpdate () reaccionan salta el shouldComponentUpdate ().

La segunda manera de volver a hacer un componente reaccionan es llamando a un setstate () con el mismo estado o estado vacío.

class App extends React.Component {

handleUpdate = () => {
//by calling this method react re-renders the component this.setState({});
};

render() {
return (

{Math.random()}

);
}
}

En el código anterior, nos están llamando método this.setState ({}) con un objeto vacío, por lo que reaccionan piensa que hay algo cambiado en el estado de los componentes y volver a dibujar el componente con la nueva interfaz de usuario.

Reaccionar ganchos forzar un componente que volver a hacer

En el reaccionar ganchos, no tenemos un método forceUpdate () para volver a dibujar el componente pero podemos hacerlo mediante el uso de un gancho useState ().

Veamos un ejemplo.

import React,{useState} from 'react';

function App() {
let [,setState]=useState();
function handleUpdate() {
//passing empty object will re-render the component
setState({}); }
return (

{Math.random()}

);
}