La diferencia entre forceUpdate() y setState() es que setState() vuelve a renderizar el componente si se cambia algún estado o accesorios de ese componente. Cuando llamamos a setState(), el método del ciclo de vida shouldComponentUpdate() llama automáticamente al método que decide si el componente debe volver a renderizarse o no. El método shouldComponentUpdate() sale del ciclo de vida de actualización si no hay motivo para volver a renderizar.
Mientras que el método forceUpdate() vuelve a renderizar el componente sin siquiera cambiar el estado o las propiedades. Cuando llamamos a forceUpdate(), volverá a renderizar el componente y omitirá el método shouldComponentUpdate().
Nota: Debemos intentar dejar de usar forceUpdate() siempre que sea posible y leer desde this.props y this.state durante el renderizado.
La diferencia entre el método forceUpdate y setState es:
|
método forceUpdate |
Método setState |
|
Vuelve a renderizar el componente sin siquiera cambiar el estado o los accesorios. |
Vuelve a renderizar el componente si cambia algún estado o accesorios de ese componente. |
|
Omite el método shouldComponentUpdate del ciclo de vida. |
Llama al método shouldComponentUpdate del ciclo de vida. |
|
No se recomienda este método. |
Podemos usar setState cuando queremos actualizar el estado. |
| Básicamente, el método escribe los datos en this.state y luego llama al método render. | Este método no escribe los datos en this.state, simplemente llama al método render. |
Ejemplo 1: uso del método setState
Sintaxis:
this.setState({ state: this.state });
App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.
App.js
import React, { Component } from 'react';
class App extends Component {
state = {
name: '',
}
handleChange = (x) => {
const { name, value } = x.target;
this.setState({
[name]: value,
});
}
render() {
return (
<div >
Name:
<input type="text" name="name" onChange={this.handleChange} />
<div>
<h4> Hi, {this.state.name}!</h4>
</div>
</div>
);
}
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Explicación: Como podemos ver en el código anterior cuando escribimos en el cuadro de texto, las llamadas al método setState() establecen el último valor de nombre y vuelven a representar el componente cada vez.
Ejemplo 2. Uso del método forceUpdate
Sintaxis:
this.forceUpdate()
App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.
App.js
import React from 'react';
class App extends React.Component{
handleForceUpdate = ()=>{
this.forceUpdate();
};
render(){
return(
<div>
<h3>Example of forceUpdate() method to show re-rendering <br></br>
without changing state or props
</h3>
<button onClick= {this.handleForceUpdate} >
FORCE UPDATE
</button>
<h4>Number is :
{ Math.floor(Math.random() * (100000 - 1 + 1)) + 1 }
</h4>
</div>
);
}
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Explicación: como podemos ver en el ejemplo anterior, el componente se vuelve a renderizar sin cambiar las propiedades o el estado debido a la llamada al método forceUpdate(). El número aleatorio se regenera cuando el componente se vuelve a renderizar.
Publicación traducida automáticamente
Artículo escrito por KapilChhipa y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA