ReactJS — Métodos de ciclo de vida de componentes

Os componentes do React têm um ciclo de vida de eventos pelos quais passam desde o momento em que são criados até serem destruídos. Esses eventos de ciclo de vida permitem que os desenvolvedores se conectem ao ciclo de vida de um componente em vários pontos e executem determinadas ações.

Aqui estão os principais métodos de ciclo de vida de um componente React, juntamente com uma breve explicação de cada um e um exemplo de como eles podem ser usados:

constructor(): Este método é chamado antes de um componente ser montado (inserido no DOM). Ele é usado para inicializar o estado e vincular manipuladores de eventos.

Exemplo:

constructor(props) {
  super(props);
  this.state = { count: 0 };
  this.handleClick = this.handleClick.bind(this);
}

Exemplo:

componentDidMount() {
  axios.get('/items')
    .then(response => this.setState({ items: response.data }));
}

Exemplo:

shouldComponentUpdate(nextProps, nextState) {
  return nextState.count !== this.state.count;
}

Exemplo:

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    axios.post('/update-count', { count: this.state.count });
  }
}

Exemplo:

componentWillUnmount() {
  window.removeEventListener('resize', this.handleResize);
}

render() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <button onClick={this.handleClick}>Click me</button>
    </div>
  );
}

Aqui está um resumo dos principais métodos de ciclo de vida do componente React:

• constructor(): Inicializa o estado e liga os manipuladores de eventos. Chamado antes de um componente ser montado.
• componentDidMount(): aciona uma ação ou chamada de API assim que o componente é renderizado. Chamado depois que um componente é montado.
• shouldComponentUpdate(): Retorna um valor booleano indicando se o componente deve ser atualizado ou não. Chamado antes de um componente ser renderizado novamente.
• componentDidUpdate(): aciona uma ação ou chamada de API depois que o componente é atualizado. Chamado depois que um componente é atualizado.
• componentWillUnmount(): Limpa recursos ou ouvintes de eventos. Chamado logo antes de um componente ser destruído.
• render(): Renderiza o JSX para um componente. Chamado sempre que o componente precisa ser renderizado novamente.