Desenvolvimento React

Ciclo de Vida dos componentes React

Como criar aplicações web utilizando o Node.js e o React

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:

  1. constructor()
  2. getDerivedStateFromProps()
  3. render()
  4. 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:

  1. getDerivedStateFromProps()
  2. shouldComponentUpdate()
  3. render()
  4. getSnapshotBeforeUpdate()
  5. 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:

  1. 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'));