Ciclo de Vida dos componentes React
Cada componente do React possui um ciclo de vida que você pode monitorar e manipular durante suas três fases principais.
As três fases são: Mounting, Updating e Unmounting.
Mounting
Mounting significa colocar elementos no DOM.
O React possui quatro métodos internos que são chamados, nessa ordem, ao montar um componente:
- constructor()
- getDerivedStateFromProps()
- render()
- componentDidMount()
O método render () é obrigatório e sempre será chamado, os outros são opcionais e serão chamados se você os definir.
construtor
O método constructor () é executado quando o componente é instanciado, o mesmo representa o local natural para configurar o estado inicial e outros valores iniciais.
Ao utilizar o método constructor () você sempre deverá executar o construtor da classe pai passando como parâmetro os props por meio do comando super(), isso iniciará o método construtor do pai e permitirá que o componente herde os métodos do pai (React. Componente).
Exemplo:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
render() {
return (<h1>My Favorite Color is {this.state.favoritecolor}</h1>);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
getDerivedStateFromProps
O método getDerivedStateFromProps () é chamado logo antes da renderização dos elementos no DOM.
O exemplo abaixo começa com a cor favorita sendo “vermelha”, mas o método getDerivedStateFromProps () atualiza a cor favorita com base no atributo favcol antes da renderização do componente.
Exemplo:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
static getDerivedStateFromProps(props, state) {
return {favoritecolor: props.favcol };
}
render() {
return (
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
);
}
}
ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));
render
O método render () é obrigatório e é o método que efetivamente gera HTML para o DOM.
Exemplo:
class Header extends React.Component {
render() {
return (
<h1>This is the content of the Header component</h1>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
componentDidMount
O método componentDidMount () é chamado depois que o componente é renderizado. É aqui que você executa instruções que exigem que o componente já esteja colocado no DOM.
O exemplo abaixo altera o valor da cor 1 segundo após a renderização do componente.
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
} render() {
return (
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
Updating
A próxima fase do ciclo de vida é quando um componente é atualizado. Um componente é atualizado sempre que houver uma alteração no estado ou adereços do componente.
O React possui cinco métodos internos que são chamados, nessa ordem, quando um componente é atualizado:
- getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
O método render () é obrigatório e sempre será chamado, os outros são opcionais e serão chamados se você os definir.
getDerivedStateFromProps
Também nas atualizações, o método getDerivedStateFromProps é chamado. Este é o primeiro método chamado quando um componente é atualizado.
O exemplo abaixo possui um botão que altera a cor favorita para azul, mas como o método getDerivedStateFromProps () é chamado, que atualiza o estado com a cor do atributo favcol, a cor favorita ainda é renderizada em amarelo.
Exemplo:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
static getDerivedStateFromProps(props, state) {
return {favoritecolor: props.favcol };
}
changeColor = () => {
this.setState({favoritecolor: "blue"});
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
}
}
ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));
shouldComponentUpdate
No método shouldComponentUpdate (), você pode retornar um valor booleano que especifica se o React deve continuar com a renderização ou não (O valor padrão é verdadeiro).
O exemplo abaixo mostra o que acontece quando o método shouldComponentUpdate () retorna false.
Exemplo:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
shouldComponentUpdate() {
return false;
}
changeColor = () => {
this.setState({favoritecolor: "blue"});
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
render
O método render () é chamado, é claro, quando um componente é atualizado, ele deve renderizar novamente o HTML no DOM, com as novas alterações. O exemplo abaixo possui um botão que altera a cor favorita para azul.
Exemplo:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
changeColor = () => {
this.setState({favoritecolor: "blue"});
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>Change color</button>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
getSnapshotBeforeUpdate
No método getSnapshotBeforeUpdate (), você tem acesso aos props e ao estado antes da atualização, o que significa que, mesmo após a atualização, você pode verificar quais eram os valores antes da atualização.
Se o método getSnapshotBeforeUpdate () estiver presente, você também deve incluir o método componentDidUpdate (), caso contrário, você receberá um erro.
Exemplo:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
}
getSnapshotBeforeUpdate(prevProps, prevState) {
document.getElementById("div1").innerHTML = "Before the update, the favorite was " + prevState.favoritecolor;
}
componentDidUpdate() {
document.getElementById("div2").innerHTML = "The updated favorite is " + this.state.favoritecolor;
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<div id="div1"></div>
<div id="div2"></div>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
O exemplo pode parecer complicado, mas tudo o que faz é o seguinte:
Quando o componente está montado, ele é renderizado com a cor favorita “vermelho”, um timer muda o estado e, após um segundo, a cor favorita fica “amarela”.
Essa ação aciona a fase de atualização e, como esse componente possui um método getSnapshotBeforeUpdate (), esse método é executado e grava uma mensagem no elemento DIV1 vazio.
Em seguida, o método componentDidUpdate () é executado e grava uma mensagem no elemento DIV2 vazio.
componentDidUpdate
O método componentDidUpdate é chamado após a atualização do componente no DOM.
Exemplo:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
}
componentDidUpdate() {
document.getElementById("mydiv").innerHTML =
"The updated favorite is " + this.state.favoritecolor; }
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<div id="mydiv"></div>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
O exemplo pode parecer complicado, mas tudo o que faz é o seguinte:
Quando o componente está montado, ele é renderizado com a cor favorita “vermelho”, um timer muda o estado e a cor fica “amarela”.
Esta ação aciona a fase de atualização e, como esse componente possui um método componentDidUpdate, esse método é executado e grava uma mensagem no elemento DIV vazio.
Unmounting
A próxima fase do ciclo de vida é quando um componente é removido do DOM ou desmontado como o React gosta de chamá-lo.
O React possui apenas um método interno chamado quando um componente é desmontado:
- componentWillUnmount.
componentWillUnmount
O método componentWillUnmount é chamado quando o componente está prestes a ser removido do DOM.
Exemplo:
class Container extends React.Component {
constructor(props) {
super(props);
this.state = {show: true};
}
delHeader = () => {
this.setState({show: false});
}
render() {
let myheader;
if (this.state.show) {
myheader = <Child />;
};
return (
<div>
{myheader}
<button type="button" onClick={this.delHeader}>Delete Header</button>
</div>
);
}
}
class Child extends React.Component {
componentWillUnmount() {
alert("The component named Header is about to be unmounted.");
}
render() {
return (
<h1>Hello World!</h1>
);
}
}
ReactDOM.render(<Container />, document.getElementById('root'));
