Montagem do Componente (constructor, componentDidMount)

A montagem do componente é a primeira fase do ciclo de vida de um componente React. Durante esta fase, o componente é criado e inserido no DOM. Dois métodos principais são usados aqui: e .constructorcomponentDidMount

Constructor

O é o primeiro método chamado quando um componente de classe é instanciado. Ele é utilizado para inicializar o estado do componente e vincular métodos.constructor

O recebe as como parâmetro e deve chamar para garantir que seja definido.constructorpropssuper(props)this.props

Aqui está um exemplo simples:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // Inicializa o estado
    this.state = {
      count: 0,
    };
    // Vincula métodos
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

componentDidMount

O método é chamado imediatamente após o componente ser montado no DOM. Este é o local ideal para fazer solicitações de rede, assinar eventos ou iniciar interações com APIs externas. Tudo que precisa de um componente no DOM deve ser feito aqui.componentDidMount

Veja um exemplo:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    // Faz uma solicitação de rede
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {data ? <p>Data: {data}</p> : <p>Loading...</p>}
      </div>
    );
  }
}

Resumo

Na fase de montagem, o inicializa o estado e vincula métodos. Em seguida, interage com o DOM e faz solicitações de rede. Essa sequência garante que o componente esteja pronto para uso e interação.constructorcomponentDidMount

Compartilhar

Compartilhar

Siga-me