O ciclo de vida do componente React é um conceito importante a ser entendido ao desenvolver aplicativos com React. Ele permite que os desenvolvedores controlem e modifiquem componentes ao longo de seu ciclo de vida, desde a criação até a destruição. O ciclo de vida do componente react consiste em vários métodos em diferentes estágios da existência de um componente. Compreender como esses métodos interagem entre si pode ser (…)
O ciclo de vida do componente React é um conceito importante a ser entendido ao desenvolver aplicativos com React. Ele permite que os desenvolvedores controlem e modifiquem componentes ao longo de seu ciclo de vida, desde a criação até a destruição. O ciclo de vida do componente react consiste em vários métodos em diferentes estágios da existência de um componente. Compreender como esses métodos interagem entre si pode ser fundamental para a criação de código eficiente e sustentável.
Este artigo discutirá o ciclo de vida do componente React, por que ele é importante e como você pode usar seus vários métodos de maneira eficaz no processo de desenvolvimento de seu aplicativo. Analisarei alguns dos principais conceitos por trás da implementação dos ciclos de vida do React, incluindo montagem, atualização, desmontagem e erros. Também fornecerei exemplos de como melhor usar cada um para obter o máximo benefício em termos de otimização de desempenho e prevenção/resolução de bugs.
Antes de prosseguir, vale a pena observar um fato interessante sobre a popularidade do React em todo o mundo. De acordo com os últimos Pesquisa Stack Overflow de 2022, 42,62% dos desenvolvedores relataram usar o React mais do que qualquer outra biblioteca no ano passado. Isso destaca a posição do React como a escolha certa para a construção de interfaces de usuário dinâmicas e escaláveis.
O que é um componente no React?
No React, um componente é um bloco de construção para a criação de interfaces de usuário. Os componentes são essencialmente pedaços de código reutilizáveis que podem ser combinados para criar uma UI mais complexa. Um componente pode ser considerado uma função JavaScript que retorna um trecho de código (geralmente chamado de JSX) que representa uma parte da UI.
Existem dois tipos principais de componentes: componentes funcionais e componentes de classe. Os componentes funcionais são mais simples e leves, enquanto os componentes de classe são mais poderosos e podem acessar mais recursos, como métodos de estado e ciclo de vida.
Aqui está um exemplo de um componente simples e funcional no React:
import React from 'react';
function Greeting(props) {
return (
<h1>Hello, {props.name}!</h1>
);
}
export default Greeting;
Neste exemplo, o componente Greeting é um componente funcional que recebe um nome e retorna um elemento h1 com a mensagem “Hello,name!”.
O ciclo de vida do componente React
Você é novo no desenvolvimento do React e está se perguntando como gerenciar o estado dos seus componentes? Ou talvez você seja um desenvolvedor experiente que busca otimizar seu código e melhorar a experiência do usuário. Seja qual for o seu nível de conhecimento, compreender o ciclo de vida do componente React é fundamental para construir aplicações robustas e eficientes. Nesta seção, veremos os diferentes estágios do ciclo de vida do componente e os métodos associados a cada estágio.
Ao final, você terá uma compreensão sólida de como os componentes funcionam no React seguindo um exemplo passo a passo baseado em caso para estar bem equipado para construir interfaces de usuário dinâmicas e envolventes.
O ciclo de vida do componente React pode ser dividido em três fases principais: Montagem, Atualização e Desmontagem. Cada fase possui vários métodos invocados em pontos específicos do ciclo de vida do componente.
Vejamos agora uma tabela que resume os diferentes estágios do ciclo de vida do componente React e os métodos associados a cada estágio:
| Estágio do Ciclo de Vida | Métodos |
| Montagem | construtor
getDerivedStateFromProps estático renderizar componenteDidMount |
| Atualizando | getDerivedStateFromProps estático
deveriaComponentUpdate renderizar getSnapshotBeforeUpdate componenteDidUpdate |
| Desmontando | componenteWillUnmount |
| Manipulação de erros | getDerivedStateFromError estático
componenteDidCatch |
Agora que conhecemos os estágios do ciclo de vida de um componente React, vamos explorar cada um de seus métodos com mais detalhes para obter uma compreensão mais profunda de como eles funcionam e para que são usados.
Montagem
A fase de montagem ocorre quando um componente é criado e inserido no DOM. Durante esta fase, os seguintes métodos são invocados:
construtor
Quando um componente é criado, o método construtor é o primeiro a ser chamado. É usado para inicializar o estado do componente e vincular manipuladores de eventos.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.handleClick = this.handleClick.bind(this);
}
handleClick {
this.setState({ count: this.state.count + 1 });
}
render {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={this.handleClick}>Click me</button>
</div>
);
}
}
getDerivedStateFromProps
Este método é chamado logo após o construtor, permitindo que o componente atualize seu estado com base nas alterações em seus adereços. Este método deve retornar um objeto para atualizar o estado ou nulo se nenhuma atualização for necessária.
class MyComponent extends React.Component {
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.value !== prevState.value) {
return { value: nextProps.value };
}
return null;
}
constructor(props) {
super(props);
this.state = {
value: props.value
};
}
render {
return <div>{this.state.value}</div>;
}
}
renderizar
Este método é responsável por renderizar a UI do componente. Deve retornar um elemento React, uma expressão JSX ou uma chamada para React.createElement .
class MyComponent extends React.Component {
render {
return <div>Hello, {this.props.name}!</div>;
}
}
componenteDidMount
Este método é chamado após o componente ser renderizado pela primeira vez. Ele executa quaisquer efeitos colaterais, como buscar dados de uma API ou configurar ouvintes de eventos.
class MyComponent extends React.Component {
componentDidMount {
fetch('
.then(response => response.json )
.then(data => this.setState({ data }));
}
render {
return (
<div>
{this.state.data ? (
<ul>
{this.state.data.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
) : (
<p>Loading data...</p>
)}
</div>
);
}
}
Atualizando
A fase de atualização ocorre quando as propriedades ou o estado de um componente mudam. Durante esta fase, os seguintes métodos são invocados:
getDerivedStateFromProps
Este método é chamado novamente se as propriedades do componente mudarem. Funciona da mesma forma que na fase de montagem, permitindo que o componente atualize seu estado com base nas alterações em seus adereços.
class MyComponent extends React.Component {
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.value !== prevState.value) {
return {
value: nextProps.value
};
}
return null;
}
constructor(props) {
super(props);
this.state = {
value: props.value
};
}
render {
return < div > {
this.state.value
} < /div>;
}
}
deveriaComponentUpdate
Este método é chamado antes do componente ser atualizado, permitindo que o componente determine se deve ser renderizado novamente. Deve retornar um valor booleano indicando se o componente deve ser atualizado ou não.
class MyComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return nextProps.value !== this.props.value;
}
render {
return <div>{this.props.value}</div>;
}
}
renderizar
Este método será chamado novamente se o componente for renderizado novamente. Deve retornar um novo elemento React que reflita o estado atualizado do componente.
class MyComponent extends React.Component {
render {
return <div>Hello, {this.props.name}!</div>;
}
}
getSnapshotBeforeUpdate
Este método é chamado logo antes da atualização do componente e permite que o componente capture algumas informações do DOM antes de ser alterado. Esta informação é então passada para componentDidUpdate .
class MyComponent extends React.Component {
getSnapshotBeforeUpdate(prevProps, prevState) {
if (prevProps.value !== this.props.value) {
return this.myRef.current.getBoundingClientRect .top;
}
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (snapshot !== null) {
console.log(`Element was ${snapshot}px from the top`);
}
}
render {
return <div ref={this.myRef}>Hello, {this.props.name}!</div>;
}
}
componenteDidUpdate
Este método é chamado após o componente atualizado. Ele é usado para realizar quaisquer efeitos colaterais, como atualizar o DOM ou despachar uma ação para uma loja Redux.
class MyComponent extends React.Component {
componentDidUpdate(prevProps, prevState) {
if (prevProps.value !== this.props.value) {
this.props.onValueChange(this.props.value);
}
}
render {
return <div>{this.props.value}</div>;
}
}
Desmontando
A fase de desmontagem ocorre quando um componente é removido do DOM. Durante esta fase, o método a seguir é invocado.
componenteWillUnmount
O método componentWillUnmount é chamado logo antes do componente ser removido do DOM. Ele é usado para executar qualquer tarefa de limpeza, como remover ouvintes de eventos ou cancelar solicitações de API.
class MyComponent extends React.Component {
componentDidMount {
this.intervalId = setInterval( => {
this.setState({ time: new Date });
}, 1000);
}
componentWillUnmount {
clearInterval(this.intervalId);
}
render {
return <div>The time is {this.state.time.toLocaleTimeString }.</div>;
}
}
Além dos métodos de ciclo de vida para criação, atualização e remoção de componentes, o React fornece dois métodos para tratamento de erros: getDerivedStateFromError estático e componentDidCatch .
Manipulação de erros
Os componentes do React também podem apresentar erros durante seu ciclo de vida. Um erro em um componente filho pode se propagar até o componente pai. Para lidar com esses erros, o React fornece dois métodos.
getDerivedStateFromError estático
O método estático getDerivedStateFromError é um método de ciclo de vida chamado quando há um erro durante a renderização, nos métodos de ciclo de vida de componentes filhos ou nos construtores de qualquer componente filho. Ele permite que o componente atualize seu estado com uma mensagem de erro, que pode então ser usada para renderizar uma UI substituta.
class MyComponent extends React.Component {
static getDerivedStateFromError(error) {
return { hasError: true };
}
constructor(props) {
super(props);
this.state = { hasError: false };
}
render {
if (this.state.hasError) {
return <div>Something went wrong.</div>;
}
return <div>{this.props.children}</div>;
}
}
class App extends React.Component {
render {
return (
<MyComponent>
<ChildComponent />
</MyComponent>
);
}
}
componenteDidCatch
O método componentDidCatch é um método de ciclo de vida chamado quando um erro é detectado em um componente filho. Ele permite que o componente execute efeitos colaterais, como registrar o erro ou enviar um relatório de erro a um servidor.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, info) {
// Log the error to an error reporting service
logErrorToMyService(error, info.componentStack);
}
render {
if (this.state.hasError) {
return <div>Something went wrong.</div>;
}
return <div>{this.props.children}</div>;
}
}
class App extends React.Component {
render {
return (
<MyComponent>
<ChildComponent />
</MyComponent>
);
}
}
Exemplo de ciclo de vida do componente React: um WeatherApp
Depois de entender como funcionam os métodos de ciclo de vida do componente React e para que são usados, vamos colocar esse conhecimento em prática com um exemplo. Neste tutorial, criaremos um aplicativo React simples que exibe o clima atual com base na localização do usuário. Exploraremos como usar os métodos de ciclo de vida de componentes para lidar com montagem, atualização, desmontagem e tratamento de erros, fornecendo um exemplo real de integração desses conceitos em seus aplicativos.
Pré-requisitos
Antes de começarmos, certifique-se de ter o seguinte instalado em seu computador:
- Node.js (versão 10 ou superior)
- npm (versão 6 ou superior)
- Um editor de código de reação de sua escolha (por exemplo, Visual Studio Code)
Começando
Para começar, abra seu terminal e crie um novo aplicativo React usando o comando create-react-app:
npx create-react-app weather-app
Depois que o aplicativo for criado, navegue até o diretório do projeto e inicie o servidor de desenvolvimento:
cd weather-app npm start
Seu aplicativo agora deve estar em execução às http://localhost:3000.
Criando o componente WeatherApp
Para criar o componente WeatherApp, crie um novo arquivo chamado WeatherApp.js na pasta src. Abra o arquivo src/App.js em seu editor de código e substitua o código existente pelo seguinte.
import React from 'react';
import Weather from './components/Weather';
function App {
return (
<div className="App">
<WeatherApp />
</div>
);
}
export default App;
Agora adicione o seguinte código ao arquivo src/WeatherApp.js.
import React, { Component } from 'react';
class WeatherApp extends Component {
render {
return (
<div>
<h1>Current Weather</h1>
</div>
);
}
}
export default WeatherApp;
Isso cria um componente React simples que renderiza um título.
Tratamento da localização do usuário
Para buscar a localização do usuário, utilizaremos a API de Geolocalização fornecida pelo navegador. Usaremos o método de ciclo de vida componentDidMount para buscar o local quando o componente for montado.
import React, { Component } from 'react';
class WeatherApp extends Component {
constructor(props) {
super(props);
this.state = {
latitude: null,
longitude: null
};
}
componentDidMount {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
this.setState({ latitude, longitude });
},
(error) => {
console.error(error);
}
);
}
render {
const { latitude, longitude } = this.state;
return (
<div>
<h1>Current Weather</h1>
<p>Latitude: {latitude}</p>
<p>Longitude: {longitude}</p>
</div>
);
}
}
export default WeatherApp;
No método componentDidMount , usamos o método getCurrentPosition da API Geolocation para buscar a localização do usuário. Este método requer dois retornos de chamada: um para tratar o sucesso e outro para tratar o erro. Se a localização for obtida com sucesso, atualizamos o estado do componente com os valores de latitude e longitude. Se houver um erro, nós o registramos no console.
No método render , renderizamos os valores de latitude e longitude do estado do componente.
Buscando dados meteorológicos
Para buscar os dados meteorológicos atuais com base na localização do usuário, usaremos a API OpenWeatherMap. Usaremos o método fetch para fazer a solicitação da API. Também usaremos o método componentDidMount para buscar os dados meteorológicos quando o componente for montado.
import React, { Component } from 'react';
const API_KEY = 'YOUR_API_KEY';
class WeatherApp extends Component {
constructor(props) {
super(props);
this.state = {
latitude: null,
longitude: null,
weatherData: null
};
}
componentDidMount {
// Fetch the user's location
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
this.setState({ latitude, longitude });
// Fetch the weather data
const url = `
fetch(url)
.then(response => response.json )
.then(data => this.setState({ weatherData: data }))
.catch(error => console.error(error));
},
(error) => {
console.error(error);
}
);
}
render {
const { latitude, longitude, weatherData } = this.state;
return (
<div>
<h1>Current Weather</h1>
{latitude && longitude && (
<p>
Latitude: {latitude}, Longitude: {longitude}
</p>
)}
{weatherData && (
<div>
<p>Temperature: {weatherData.current.temperature}°C</p>
<p>Description: {weatherData.current.weather_descriptions(0)}</p>
</div>
)}
</div>
);
}
}
export default WeatherApp;
No método componentDidMount , primeiro buscamos a localização do usuário usando o método getCurrentPosition . Assim que tivermos os valores de latitude e longitude, nós os usaremos para construir a URL da solicitação da API. Também passamos nossa chave de API e definimos o parâmetro de unidades como métrico para obter valores de temperatura em Celsius.
Em seguida, usamos o método fetch para fazer a solicitação da API. Usamos o método then para lidar com a resposta e convertê-la para o formato JSON. Em seguida, atualizamos o estado do componente com os dados meteorológicos. Se houver um erro, nós o registramos no console.
No método render , renderizamos condicionalmente os valores de latitude e longitude e os dados meteorológicos com base na existência deles no estado do componente.
Manipulação de erros
Finalmente, vamos tratar dos erros que podem ocorrer durante o ciclo de vida do componente. Usaremos os métodos estáticos getDerivedStateFromError e componentDidCatch para lidar com erros.
import React, { Component } from 'react';
const API_KEY = 'YOUR_API_KEY';
class WeatherApp extends Component {
constructor(props) {
super(props);
this.state = {
latitude: null,
longitude: null,
weatherData: null
};
}
componentDidMount {
// Fetch the user's location
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
this.setState({ latitude, longitude });
// Fetch the weather data
const url = `
fetch(url)
.then(response => response.json )
.then(data => this.setState({ weatherData: data }))
.catch(error => console.error(error));
},
(error) => {
console.error(error);
}
);
}
static getDerivedStateFromError(error) {
return { error: error.message };
}
componentDidCatch(error, info) {
console.error(error);
console.error(info);
}
render {
const { latitude, longitude, weatherData, error } = this.state;
return (
<div>
<h1>Current Weather</h1>
{error ? (
<p>Something went wrong: {error}</p>
) : (
<>
{latitude && longitude && (
<p>
Latitude: {latitude}, Longitude: {longitude}
</p>
)}
{weatherData && (
<div>
<p>Temperature: {weatherData.current.temperature}°C</p>
<p>Description: {weatherData.current.weather_descriptions(0)}</p>
</div>
)}
</>
)}
</div>
);
}
}
export default WeatherApp;
No construtor, adicionamos uma nova propriedade de estado chamada error que usaremos para armazenar quaisquer erros que ocorram durante o ciclo de vida do componente.
No método componentDidMount , adicionamos um bloco catch para lidar com erros ao buscar os dados meteorológicos. Definimos a propriedade de estado de erro para a mensagem de erro se ocorrer um erro.
Também usamos o método setState para definir as propriedades do estado de latitude e longitude quando buscamos com sucesso a localização do usuário.
O método estático getDerivedStateFromError é chamado quando ocorre um erro em qualquer componente filho do componente atual. Este método deve retornar um objeto para atualizar o estado do componente. Em nosso exemplo, simplesmente atualizamos a propriedade do estado de erro com a mensagem de erro.
O método componentDidCatch é chamado quando ocorre um erro em qualquer componente filho do componente atual e é usado para registrar o erro no console. Em nosso exemplo, registramos o erro e o rastreamento de pilha do componente no console.
Finalmente, no método render , usamos a propriedade error state para renderizar uma mensagem de erro se um erro ocorrer condicionalmente. Caso contrário, exibimos a localização do usuário e os dados meteorológicos atuais, se estiverem disponíveis.
Conclusão
Concluindo, compreender e implementar efetivamente o ciclo de vida do componente React é essencial para construir aplicativos eficientes, escaláveis e de fácil manutenção. Como vimos, os métodos de ciclo de vida fornecem aos desenvolvedores um controle refinado sobre o comportamento de seus componentes, permitindo-lhes otimizar o desempenho, gerenciar o estado e lidar com erros. Ao aproveitar os métodos de montagem, atualização e desmontagem, os desenvolvedores podem criar interfaces de usuário complexas que são responsivas e eficientes.
Se você gostou deste artigo sobre React, confira estes tópicos;
- Melhores práticas de reação
- Bibliotecas de componentes React UI
- Os 6 melhores IDEs e editores React
- Reagir vs Backbone JS
- Por que o React é tão popular?
- O que você precisa saber sobre reagir
- Reagir WebSockets: Tutorial
Perguntas frequentes (FAQ)
Quais são os três principais métodos de ciclo de vida dos componentes?
Os três principais métodos de ciclo de vida dos componentes no React são: montagem, atualização e desmontagem.
Por que usamos métodos de ciclo de vida React?
Usamos métodos de ciclo de vida do React para lidar com diferentes estágios da vida de um componente, como inicialização, renderização, atualização e destruição, e para executar ações específicas ou adicionar comportamento específico durante cada estágio.
Qual é a diferença entre ganchos React e métodos de ciclo de vida?
Os ganchos React fornecem uma maneira mais concisa de gerenciar o estado e os efeitos colaterais em componentes funcionais. Os métodos de ciclo de vida estão disponíveis apenas em componentes de classe e podem se conectar a vários estágios do ciclo de vida de um componente.
Fonte: BairesDev
