ReactJS - Ciclo de Vida do Componente

Neste capítulo, discutiremos os métodos de ciclo de vida do componente.

Métodos de Ciclo de Vida

• componentWillMount é executado antes da renderização, tanto no servidor quanto no cliente.

• componentDidMounté executado após a primeira renderização apenas no lado do cliente. É aqui que as solicitações AJAX e as atualizações de DOM ou de estado devem ocorrer. Este método também é usado para integração com outras estruturas JavaScript e quaisquer funções com execução atrasada, comosetTimeout ou setInterval. Estamos usando isso para atualizar o estado para que possamos acionar os outros métodos de ciclo de vida.

• componentWillReceivePropsé invocado assim que os adereços são atualizados antes que outro render seja chamado. Nós o acionamos desetNewNumber quando atualizamos o estado.

• shouldComponentUpdate deveria retornar true ou falsevalor. Isso determinará se o componente será atualizado ou não. Isso está definido paratruepor padrão. Se você tiver certeza de que o componente não precisa ser renderizado apósstate ou props estão atualizados, você pode retornar false valor.

• componentWillUpdate é chamado antes da renderização.

• componentDidUpdate é chamado logo após a renderização.

• componentWillUnmounté chamado depois que o componente é desmontado do dom. Estamos desmontando nosso componente emmain.js.

No exemplo a seguir, definiremos o statena função construtora. osetNewnumber é usado para atualizar o state. Todos os métodos de ciclo de vida estão dentro do componente Conteúdo.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 0
      }
      this.setNewNumber = this.setNewNumber.bind(this)
   };
   setNewNumber() {
      this.setState({data: this.state.data + 1})
   }
   render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }
   componentDidMount() {
      console.log('Component DID MOUNT!')
   }
   componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
   }
   shouldComponentUpdate(newProps, newState) {
      return true;
   }
   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }
   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }
   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }
   render() {
      return (
         <div>
            <h3>{this.props.myNumber}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);

Após a renderização inicial, obteremos a tela a seguir.