Componentes da classe React

❮ Anterior Próximo ❯

Antes do React 16.8, os componentes Class eram a única maneira de rastrear o estado e o ciclo de vida de um componente React. Os componentes de função foram considerados "sem estado".

Com a adição de Hooks, os componentes Function agora são quase equivalentes aos componentes Class. As diferenças são tão pequenas que você provavelmente nunca precisará usar um componente Class no React.

Embora os componentes Function sejam preferidos, não há planos atuais para remover componentes Class do React.

Esta seção lhe dará uma visão geral de como usar componentes de classe no React.

Sinta-se à vontade para pular esta seção e usar Componentes de Função.

Componentes de reação

Os componentes são bits de código independentes e reutilizáveis. Eles servem ao mesmo propósito que as funções JavaScript, mas funcionam isoladamente e retornam HTML por meio de uma função render().

Os componentes vêm em dois tipos, componentes de classe e componentes de função, neste capítulo você aprenderá sobre os componentes de classe.

Criar um componente de classe

Ao criar um componente React, o nome do componente deve começar com uma letra maiúscula.

O componente deve incluir a extends React.Componentdeclaração, esta declaração cria uma herança para React.Component e dá ao seu componente acesso às funções de React.Component.

O componente também requer um render()método, este método retorna HTML.

Exemplo

Crie um componente de classe chamadoCar

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

Agora sua aplicação React tem um componente chamado Car, que retorna um <h2>elemento.

Para usar este componente em seu aplicativo, use uma sintaxe semelhante ao HTML normal: <Car />

Exemplo

Exiba o Carcomponente no elemento "raiz":

ReactDOM.render(<Car />, document.getElementById('root'));

Obter certificação!

Complete os módulos React, faça os exercícios, faça o exame e torne-se certificado w3schools!!

$ 95 INSCRIÇÃO

Construtor de componentes

Se houver uma constructor()função em seu componente, essa função será chamada quando o componente for iniciado.

A função construtora é onde você inicia as propriedades do componente.

No React, as propriedades dos componentes devem ser mantidas em um objeto chamado state.

Você aprenderá mais sobre isso mais stateadiante neste tutorial.

A função construtora também é onde você honra a herança do componente pai incluindo a super() instrução, que executa a função construtora do componente pai, e seu componente tem acesso a todas as funções do componente pai ( React.Component).

Exemplo

Crie uma função construtora no componente Carro e adicione uma propriedade de cor:

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a Car!</h2>;
  }
}

Use a propriedade color na função render():

Exemplo

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a {this.state.color} Car!</h2>;
  }
}

Adereços

Outra maneira de manipular as propriedades do componente é usando props.

Props são como argumentos de função, e você os envia para o componente como atributos.

Você aprenderá mais sobre propsno próximo capítulo.

Exemplo

Use um atributo para passar uma cor para o componente Car e use-o na função render():

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.color} Car!</h2>;
  }
}

ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Adereços no Construtor

Se o seu componente tem uma função construtora, as props devem sempre ser passadas para o construtor e também para o React.Component através do super()método.

Exemplo

class Car extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h2>I am a {this.props.model}!</h2>;
  }
}

ReactDOM.render(<Car model="Mustang"/>, document.getElementById('root'));

Componentes em Componentes

Podemos nos referir a componentes dentro de outros componentes:

Exemplo

Use o componente Carro dentro do componente Garagem:

class Car extends React.Component {
  render() {
    return <h2>I am a Car!</h2>;
  }
}

class Garage extends React.Component {
  render() {
    return (
      <div>
      <h1>Who lives in my Garage?</h1>
      <Car />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Componentes em arquivos

React tem tudo a ver com a reutilização de código, e pode ser inteligente inserir alguns de seus componentes em arquivos separados.

Para fazer isso, crie um novo arquivo com uma .js extensão de arquivo e coloque o código dentro dele:

Observe que o arquivo deve começar importando o React (como antes) e deve terminar com a instrução export default Car;.

Exemplo

Este é o novo arquivo, nós o nomeamos Car.js:

import React from 'react';

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

export default Car;

Para poder usar o Carcomponente, você precisa importar o arquivo em seu aplicativo.

Exemplo

Agora importamos o Car.jsarquivo na aplicação, e podemos usar o Car componente como se tivesse sido criado aqui.

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';

ReactDOM.render(<Car />, document.getElementById('root'));

Estado do componente da classe React

Os componentes React Class possuem um stateobjeto embutido.

Você deve ter notado que usamos stateanteriormente na seção do construtor de componentes.

O stateobjeto é onde você armazena os valores de propriedade que pertencem ao componente.

Quando o stateobjeto é alterado, o componente é renderizado novamente.

Criando o objeto de estado

O objeto de estado é inicializado no construtor:

Exemplo

Especifique o stateobjeto no método construtor:

class Car extends React.Component {
  constructor(props) {
    super(props);
  this.state = {brand: "Ford"};
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

O objeto de estado pode conter quantas propriedades você desejar:

Exemplo

Especifique todas as propriedades que seu componente precisa:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

Usando o `state`objeto

Consulte o stateobjeto em qualquer lugar no componente usando a sintaxe:this.state.propertyname

Exemplo:

Consulte o stateobjeto no render()método:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
      </div>
    );
  }
}

Mudando o `state`Objeto

Para alterar um valor no objeto de estado, use o this.setState()método.

Quando um valor no stateobjeto for alterado, o componente será renderizado novamente, o que significa que a saída será alterada de acordo com o(s) novo(s) valor(es).

Exemplo:

Adicione um botão com um onClickevento que irá alterar a propriedade da cor:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  changeColor = () => {
    this.setState({color: "blue"});
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
        <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
      </div>
    );
  }
}

Sempre use o setState()método para alterar o objeto de estado, ele garantirá que o componente saiba que foi atualizado e chama o método render() (e todos os outros métodos de ciclo de vida).

Ciclo de vida dos componentes

Cada componente do React tem um ciclo de vida que você pode monitorar e manipular durante suas três fases principais.

As três fases são: Montagem , Atualização e Desmontagem .

Montagem

Montagem significa colocar elementos no DOM.

O React possui quatro métodos internos que são chamados, nesta ordem, ao montar um componente:

constructor()
getDerivedStateFromProps()
render()
componentDidMount()

O render()método é obrigatório e sempre será chamado, os outros são opcionais e serão chamados se você os definir.

constructor

O constructor()método é chamado antes de qualquer outra coisa, quando o componente é iniciado, e é o local natural para configurar os valores iniciais statee outros valores iniciais.

O constructor()método é chamado com os propsargumentos , as, e você deve sempre começar chamando o super(props)antes de qualquer outra coisa, isso iniciará o método construtor do pai e permitirá que o componente herde métodos de seu pai ( React.Component).

Exemplo:

O constructormétodo é chamado, pelo React, toda vez que você cria um componente:

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 getDerivedStateFromProps()método é chamado logo antes de renderizar o(s) elemento(s) no DOM.

Este é o lugar natural para definir o stateobjeto com base na inicial props.

It takes state as an argument, and returns an object with changes to the state.

The example below starts with the favorite color being "red", but the getDerivedStateFromProps() method updates the favorite color based on the favcol attribute:

Example:

The getDerivedStateFromProps method is called right before the render method:

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

The render() method is required, and is the method that actually outputs the HTML to the DOM.

Example:

A simple component with a simple render() method:

class Header extends React.Component {
  render() {
    return (
      <h1>This is the content of the Header component</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

componentDidMount

The componentDidMount() method is called after the component is rendered.

This is where you run statements that requires that the component is already placed in the DOM.

Example:

At first my favorite color is red, but give me a second, and it is yellow instead:

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

The next phase in the lifecycle is when a component is updated.

A component is updated whenever there is a change in the component's state or props.

React has five built-in methods that gets called, in this order, when a component is updated:

getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

The render() method is required and will always be called, the others are optional and will be called if you define them.

getDerivedStateFromProps

Also at updates the getDerivedStateFromProps method is called. This is the first method that is called when a component gets updated.

This is still the natural place to set the state object based on the initial props.

The example below has a button that changes the favorite color to blue, but since the getDerivedStateFromProps() method is called, which updates the state with the color from the favcol attribute, the favorite color is still rendered as yellow:

Example:

If the component gets updated, the getDerivedStateFromProps() method is called:

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

In the shouldComponentUpdate() method you can return a Boolean value that specifies whether React should continue with the rendering or not.

The default value is true.

The example below shows what happens when the shouldComponentUpdate() method returns false:

Example:

Stop the component from rendering at any update:

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

Example:

Same example as above, but this time the shouldComponentUpdate() method returns true instead:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate() {
    return true;
  }
  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

The render() method is of course called when a component gets updated, it has to re-render the HTML to the DOM, with the new changes.

The example below has a button that changes the favorite color to blue:

Example:

Click the button to make a change in the component's state:

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

In the getSnapshotBeforeUpdate() method you have access to the props and state before the update, meaning that even after the update, you can check what the values were before the update.

If the getSnapshotBeforeUpdate() method is present, you should also include the componentDidUpdate() method, otherwise you will get an error.

The example below might seem complicated, but all it does is this:

When the component is mounting it is rendered with the favorite color "red".

When the component has been mounted, a timer changes the state, and after one second, the favorite color becomes "yellow".

This action triggers the update phase, and since this component has a getSnapshotBeforeUpdate() method, this method is executed, and writes a message to the empty DIV1 element.

Then the componentDidUpdate() method is executed and writes a message in the empty DIV2 element:

Example:

Use the getSnapshotBeforeUpdate() method to find out what the state object looked like before the update:

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

componentDidUpdate

The componentDidUpdate method is called after the component is updated in the DOM.

The example below might seem complicated, but all it does is this:

When the component is mounting it is rendered with the favorite color "red".

When the component has been mounted, a timer changes the state, and the color becomes "yellow".

This action triggers the update phase, and since this component has a componentDidUpdate method, this method is executed and writes a message in the empty DIV element:

Example:

The componentDidUpdate method is called after the update has been rendered in the DOM:

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

Unmounting

The next phase in the lifecycle is when a component is removed from the DOM, or unmounting as React likes to call it.

React has only one built-in method that gets called when a component is unmounted:

componentWillUnmount()

componentWillUnmount

The componentWillUnmount method is called when the component is about to be removed from the DOM.

Example:

Click the button to delete the header:

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

❮ Previous Next ❯

Reagir Tutorial

Ganchos de reação

Exercícios de reação

Componentes da classe React

Componentes de reação

Criar um componente de classe

Exemplo

Exemplo

Obter certificação!

Construtor de componentes

Exemplo

Exemplo

Adereços

Exemplo

Adereços no Construtor

Exemplo

Componentes em Componentes

Exemplo

Componentes em arquivos

Exemplo

Exemplo

Estado do componente da classe React

Criando o objeto de estado

Exemplo

Exemplo

Usando o stateobjeto

Exemplo:

Mudando o stateObjeto

Exemplo:

Ciclo de vida dos componentes

Montagem

constructor

Exemplo:

getDerivedStateFromProps

Example:

render

Example:

componentDidMount

Example:

Updating

getDerivedStateFromProps

Example:

shouldComponentUpdate

Example:

Example:

render

Example:

getSnapshotBeforeUpdate

Example:

componentDidUpdate

Example:

Unmounting

componentWillUnmount

Example:

Usando o `state`objeto

Mudando o `state`Objeto