Desenvolvimento de Sistemas I React Professor: Jezer Machado de Oliveira

O que é ?

Biblioteca javaScript para criação de interfaces

React Principais características:

ES6
Declarativo
One-way data flow (Fluxo de dados unidirecional)
Focado em composição, não herança
Virtual DOM
JSX

React Formado por:

Componentes

React Formado por:

Componentes
Componentes

React Formado por:

Componentes
Componentes
Componentes

React Formado por:

Componentes
Componentes
Componentes
Componentes

React Formado por:

Componentes
Componentes
Componentes
Componentes
Componentes

React Componente:

Focado em resolver um único problema

Elemento visual (UI)
Encapsulado
Gerencia seu próprio estado interno
Recebe dados de outros componentes por propriedades
Envia dados para outros componentes por eventos
O comportamento do componente é determinado pelo estado e suas propriedades

Componente Exemplo1.js
import React, { Component } from 'react';
import logo from './logo.svg';
import '../App.css';

export default class Exemplo1 extends Component {

constructor(props) {
super(props);
this.state={texto:"Classe Exemplo 1"};
}

render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
</header>
</div>
);
}
}

import Importa recursos para serem usados no componente

// importa outros componentes
import React, { Component } from 'react';
// importa recursos como imagens
import logo from './logo.svg';
// importa folhas de estilos
import '../App.css';

//usar ... from 'nome' quando for uma biblioteca instalada

//usar ... from './nome' quando está no mesmo diretório da classe
//usar ... from '../nome' pra voltar um diretório

Especificação do import ES6:

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/import Componente Exemplo1.js
//Declara a classe e exporta ela como elemento principal no módulo
export default class Exemplo1 extends Component {
}

Exemplo de utilização em outro componente:

import Exemplo1 from '../subPasta/Exemplo1';

Componente
export default class Propriedade extends Component {
campo = 10;
constructor(props) {
super(props);
this.state = { texto: "Classe Propriedade" };
}
.....

props são recebidas por propriedades da tag na sua declaração e não podem ser alteradas pelo componente:
<Propriedade nome="João do Exemplo" />

equivale
this.props.nome="João do Exemplo";

this.state - representa o estado do componente Componente

export default class Propriedade extends Component {
....
render() {
let variavel = this.campo * 2;
return (
<div>
{this.state.texto} <br />
valor do campo: {this.campo}<br />
valor da variável: {variavel} <br />
valor da propriedade nome: {this.props.nome}
</div>
); }}

render() - Método obrigatório, retorna a renderização do componente baseado em suas propriedades e estado JSX JSX é um "açúcar sintático", ele torna possível escrever
código em notação XML dentro de código JavaScript
let elem = <div>
<p>Welcome to TutsPlus</p>
</div>;

É equivalente:
let elem = React.createElement(
"div",
null,
React.createElement(
"p",
null,
"Welcome to TutsPlus"
)
);
)

JSX REACT e JSX suportam todas as tags HTML5 nativas, não sendo necessário importa-lás
a, abbr, address, area, article, aside, audio, b, base, bdi, bdo,
big, body, br, button, canvas, caption, cite, code, col, colgroup,
data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em,
embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4,
h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins,
kbd, keygen, label, legend, li, link, main, map, mark, menu,
menuitem, meta, meter, nav, noscript, object, ol, optgroup, option,
output, p, param, picture, pre, progress, q, rp, rt, ruby, s, samp,
script, section, select, small, source, span, strong, style, sub,
summary, sup, table, tbody, td, textarea, tfoot, th, thead, time,
title, tr, track, u, ul, var, video, wbr, circle, clipPath, defs,
ellipse, g, image, line, linearGradient, mask, path, pattern,
polygon, polyline, radialGradient, rect, stop, svg, text, tspa

JSX Através das chaves ({}) é possível acessar atributos, variáveis, executar expressões e comandos no JSX
class Exemplo extends Component {
a =10;
render() {
let b=2;
return <div>
soma de {this.a} + {b} =<span>{this.a+b}</span>
</div>;
}
}

Resulta em:
soma de 10 + 2 =12

JSX Propriedades podem ser tanto strings quanto objetos complexos

render() {
return <Exemplo1
propriedade="casa"
numero={20} // chaves para valores diferentes de string
objeto={{
// objetos precisam de duas chaves, uma para expressão,
// outra para o próprio objeto
 nome:"João",
sobrenome:"do Exemplo"
}}
/>;

JSX Para acessar atributos nativos do HTML existem algumas peculiaridades

Como regra geral, os atributos são escritos no estilo camelCase, usando como separador de palavras uma letra maiúscula.
tabindex => tabIndex
colspan => colSpan

JSX Principais atributos nativos no JSX

accept acceptCharset accessKey action allowFullScreen alt async
autoComplete autoFocus autoPlay capture cellPadding cellSpacing
challenge charSet checkedcite classID className colSpan cols
content contentEditable contextMenu controls controlsList coords
crossOrigin data dateTime default defer dir disabled download
draggable encType form formAction formEncType formMethod
formNoValidate formTarget frameBorder headers height hidden high
href hrefLang htmlFor httpEquiv icon id inputMode integrity is
keyParams keyType kind label lang list loop low manifest
marginHeight marginWidth max maxLength media mediaGroup method
min minLength multiple muted name noValidate nonce open optimum
pattern placeholder poster preload profile radioGroup readOnly
rel required reversed role rowSpan rows sandbox scope scoped
scrolling seamless selected shape size sizes span spellCheck src
srcDoc srcLang srcSet start step style summary tabIndex target
title type useMap value width wmode wrap

JSX O atributo style tem um tratamento especial no JSX, permitindo definir estilos "inline", através de um objeto
let estilos = {
color:'red',
backgroundColor:'blue',
fontWeight:'bold'
};

let elemento = <div style={estilos}>teste</div>;

JSX O atributo style tem um tratamento especial no JSX, permitindo definir estilos "inline", através de um objeto
let estilos = {
color:'red',
backgroundColor:'blue',
fontWeight:'bold'
};

let elemento = <div style={estilos}>teste</div>;

Ou
let elemento = <div style={{
color:'red',
backgroundColor:'black',
fontWeight:'bold'
}}>teste</div>;

JSX Os atributos do estilo utilizam a nomenclatura do DOM javaScript, que também é escrito no estilo camelCase

background-color => backgroundColor

list-style-image => listStyleImage
padding-right => paddingRight

JSX Principais atributos de estilo no JSX

background, backgroundAttachment, backgroundColor, backgroundImage,
backgroundPosition, backgroundRepeat, border, borderBottom,
borderBottomColor, borderBottomStyle, borderBottomWidth,
borderColor, borderLeft, borderLeftColor, borderLeftStyle,
borderLeftWidth, borderRight, borderRightColor,
borderRightStyle, borderRightWidth, borderStyle, borderTop,
borderTopColor, borderTopStyle, borderTopWidth, borderWidth,
clear, clip, color, cursor, display, filter, cssFloat, font,
fontFamily, fontSize, fontVariant, fontWeight, height, left,
letterSpacing, lineHeight, listStyle, listStyleImage,
listStylePosition, listStyleType, margin, marginBottom,
marginLeft, marginRight, marginTop, overflow, padding,
paddingBottom, paddingLeft, paddingRight, paddingTop,
pageBreakAfter, pageBreakBefore, position, strokeDasharray,
strokeDashoffset, strokeWidth, textAlign, textDecoration,
textDecorationBlink, textDecorationLineThrough, textDecorationNone,
textDecorationOverline, textDecorationUnderline, textIndent,
textTransform, top, verticalAlign, visibility, width, zIndex

state Representa o estado interno de um componente react, não sendo visível para outros componentes.

Normalmente inicializado no construtor

Somente no construtor a inicialização do estado deve ser feita atribuindo um valor para o atributo state - this.state
A alteração do estado fora do construtor só pode ser feita pelo método setState - this.setState(estadoNovo)
O valor do estado no componente pode ser acessado a qualquer momento pelo atributo state - this.state.valor

state
export default class ExemploEstado extends Component {
constructor() {
super();
this.state = { contador: 1 }; // inicializa o estado
this.iniciaContagem();
}
iniciaContagem() {
let funcao = () => this.setState({
 contador: this.state.contador + 1
// define um novo estado a partir do estado anterior
});
setInterval(funcao, 1000);
// executa a função a cada 1000 milesegundos (1 segundo)
}
render() {
return <div>Contagem:{this.state.contador}</div>
// renderiza o componente a partir do estado
}
}

state Ele não substitui o estado anterior pelo estado novo, mas funde os dois estados em um novo.
export default class ExemploEstado2 extends Component {
constructor() {
super();
this.state = {
nome: "João do Exemplo",
email: "joao@exemplo.com"
}; // inicializa o estado
setTimeout(() => {
this.setState({
email: "joao@gmail.com"
// Vai gerar um novo estado:
//{ nome: "João do Exemplo", email:"joao@gmail.com" }
})
}, 1000);
}
...

state setState é assíncrono, não há garantia de que o estado mude logo após sua chamada
export default class ExemploEstado3 extends Component {
constructor() {
super();
this.state = { contador: 1 }; // inicializa o estado
setTimeout(()=>this.incrementa(),1000);
}
incrementa() {
this.setState({
contador: this.state.contador + 1
});
console.log(this.state.contador);
// pode gerar 1 ou 2
}
}

state É possivel passar uma função que é chamada após o estado ser atualizado setState(estado, funcao)
export default class ExemploEstado3 extends Component {
constructor() {
super();
this.state = { contador: 1 }; // inicializa o estado
setTimeout(()=>this.incrementa(),1000);
}
incrementa() {
this.setState({
contador: this.state.contador + 1
}, ()=> {
console.log(this.state.contador);
// vai imprimir 2
} );
}
}

state O mesmo problema pode ocorrer com multiplas alterações de estados

export default class ExemploEstado4 extends Component {
constructor() {
super();
this.state = { contador: 1 }; // inicializa o estado
setTimeout(()=>this.incrementa3(),1000);
}
incrementa3() {
this.setState({contador: this.state.contador + 1});
this.setState({contador: this.state.contador + 1});
this.setState({contador: this.state.contador + 1});
// pode gerar 2,3 ou 4
}

state É possível passar uma função como estado. Ela recebe o estado anterior como paramêtro e retorna o novo estado
export default class ExemploEstado5 extends Component {
constructor() {
super();
this.state = { contador: 1 }; // inicializa o estado
setTimeout(()=>this.incrementa3(),1000);
}
incrementa3() {
this.setState((estadoAnterior) => {
return { contador: estadoAnterior.contador + 1 }
});
this.setState((estadoAnterior) => {
return { contador: estadoAnterior.contador + 1 }
});
this.setState((estadoAnterior) => {
return { contador: estadoAnterior.contador + 1 }
});
// sempre vai gerar 4
}
}

state Também é possível recuperar as propriedades na função de mudança de estado:

setState((estadoAnterior, props) => {return novoEstao})
export default class ExemploEstado6 extends Component {
constructor() {
super();
this.state = { contador: 0 }; // inicializa o estado
setInterval(()=>this.incrementa(),1000);
}

incrementa() {
this.setState((estadoAnterior, props) => {
return { contador: estadoAnterior.contador + props.salto}
});
}
}
}

eventos Através dos eventos o componente externaliza sua mudança de estado

Componente pai envia uma função como paramêtro para componente filho
Quando o componente filho muda seu estado, ele notifica o pai chamando a função, passando como paramêtro o estado

eventos
export default class Contagem extends Component {
constructor() {
super();
this.state = { contador: 1, terminou: false };
setInterval(() => this.incrementa(), 1000);
}
incrementa() {
if (this.state.contador == this.props.limite) {
this.setState({chegou: true },
()=>{this.props.chegou(this.state.chegou)});
} else {
this.setState((estadoAnterior, props) => {
return { contador: estadoAnterior.contador+1}
});
}
}
render() {
return <div>Contagem:{this.state.contador}</div>
}
}

eventos
export default class ExemploEvento extends Component {
constructor() {
super();
this.state= { chegouExemplo:false };
}
render() {
if(this.state.chegouExemplo)
return <div>
Finalizada a contagem:
<button onClick={()=>this.setState({chegouExemplo:false})}>
Reiniciar</button>
</div>;
else
return <Contagem limite={10}
chegou={(valor)=>this.setState({chegouExemplo:valor})} />;
}
}

eventos Eventos nativos são os oriundos dos elementos HTML

São normalizados para evitar incompatibilidade entre navegadores

Também são escritos no estilo camelCase
onclick => onClick
onchange => onChange
A função de callback recebe um objeto especializado da classe SyntheticEvent, contendo toda a informação do evento

eventos Elementos básicos dos eventos

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type

https://reactjs.org/docs/events.html Campos de entrada Campos de entrada nativos do HTML: <input>, <textarea>, <select>, ... possuem um estado interno que não é
controlado pelo react.
Para evitar conflitos e produzir uma "única fonte de verdade" o react propõem que um componente pai gerencie este estado. Estes elementos são denominados componentes
controlados.

Seu estado é definido somente pelas propriedades

Os eventos sugerem um novo estado, mas este estado tem que ser validado pelo componente pai

Campos de entrada
export default class ExemploComponenteControlado extends Component {
constructor() {
super();
this.state = { valor:"" };
 }
setValor(valor) {
this.setState({
valor:valor
});
}
render() {
return <div>
<label>Valor:</label>
<input value={this.state.valor}
onChange={(evento)=>this.setValor(evento.target.value)} />
&nbsp;Valor digitado({this.state.valor.length}):
{this.state.valor}
</div>
}
}

Campos de entrada Campos de entrada

export default class ExemploComponenteControlado2
extends Component {
constructor() {
super();
this.state = { valor: "" };
}
setValor(valor) {
this.setState({
valor: valor.replace(/[^0-9]/g, '')
});
}
render() {
return <div>
<label>Valor numérico:</label>
<input value={this.state.valor}
onChange={(evento) =>
this.setValor(evento.target.value)} />
</div>
}
}

Campos de entrada O input checkbox html utiliza o atributo checked para definir seu estado
export default class ExemploCheckBox extends Component {
....
render() {
return <span>
<input
id="memorizar"
type="checkbox"
checked={this.state.memorizar}
onChange={(evento) =>
this.setMemorizar(evento.target.checked)} />
<label htmlFor="memorizar" >Memorizar senha</label>
</span>
}
}

Campos de entrada O input radio segue o mesmo príncipio

export default class ExemploRadio extends Component {
....
render() {
return <div>
<label>Sexo:</label><br/>
<input type="radio"
id="sexo-masculino"
checked={this.state.sexo == 'masculino'}
onChange={()=>this.setSexo("masculino") } />
<label htmlFor="sexo-masculino">Masculino</label>
<br/>
<input type="radio"
id="sexo-feminino"
checked={this.state.sexo == 'feminino'}
onChange={()=>this.setSexo("feminino") } />
<label htmlFor="sexo-feminino">Feminino</label>
<br/>
</div>
}

Campos de entrada No select o valor é definido pelo atributo value do option

export default class ExemploSelect extends Component {
...
render() {
return <span>
<label>Sexo:</label>
<select value={this.state.sexo}
onChange={(evento)=>this.setSexo(evento.target.value)}>
<option value=""></option>
<option value="masculino">Masculino</option>
<option value="feminino">Feminino</option>
</select>
</span>
}
}

Campos de entrada No textarea o valor é um filho da tag

export default class ExemploTextArea extends Component {
....
render() {
return <div>
<label >Descrição:</label><br/>
<textarea onChange={(evento)=>
this.setDescricao(evento.target.value)}>
 {this.state.descricao}
</textarea>
</div>
}
}

Campos de entrada Campos do HTML 5 podem ter variação do valor real e o que é exibido
export default class ExemploInputHTML5 extends Component {
....
render() {
return <div><h2>HTML 5</h2>
<label> type="color" =></label>
<input type="color" value={this.state.color}
onChange={(evento) => this.setValor("color", evento.target.value)} />
&nbsp;Valor real:{this.state.color}<br /><br />

<label> type="date" =></label>

<input type="date" value={this.state.date}
onChange={(evento) => this.setValor("date", evento.target.value)} />
&nbsp;Valor real:{this.state.date}<br /><br />

<label> type="datetime-local" =></label>

<input type="datetime-local" value={this.state.datetimeLocal}
onChange={(evento) => this.setValor("datetimeLocal", evento.target.value)} />
&nbsp;Valor real:{this.state.datetimeLocal}<br /><br />

<label> type="email" =></label>

<input type="email" value={this.state.email}
onChange={(evento) => this.setValor("email", evento.target.value)} />
&nbsp;Valor real:{this.state.email}<br /><br />

<label> type="month" =></label>

<input type="month" value={this.state.month}
onChange={(evento) => this.setValor("month", evento.target.value)} />
&nbsp;Valor real:{this.state.month}<br /><br />

<label> type="number" =></label>

<input type="number" value={this.state.number}
onChange={(evento) => this.setValor("number", evento.target.value)} />
&nbsp;Valor real:{this.state.number}<br /><br />

<label> type="range" =></label>

<input type="range" value={this.state.range} min="0" max="10"
onChange={(evento) => this.setValor("range", evento.target.value)} />
&nbsp;Valor real:{this.state.range}<br /><br />

<label> type="search" =></label>

<input type="search" value={this.state.search}
onChange={(evento) => this.setValor("search", evento.target.value)} />
&nbsp;Valor real:{this.state.search}<br /><br />

<label> type="tel" =></label>

<input type="tel" value={this.state.tel}
onChange={(evento) => this.setValor("tel", evento.target.value)} />
&nbsp;Valor real:{this.state.tel}<br /><br />

<label> type="time" =></label>

<input type="time" value={this.state.time}
onChange={(evento) => this.setValor("time", evento.target.value)} />
&nbsp;Valor real:{this.state.time}<br /><br />

<label> type="url" =></label>

<input type="url" value={this.state.url}
onChange={(evento) => this.setValor("url", evento.target.value)} />
&nbsp;Valor real:{this.state.url}<br /><br />

<label> type="week" =></label>

<input type="week" value={this.state.week}
onChange={(evento) => this.setValor("week", evento.target.value)} />
&nbsp;Valor real:{this.state.week}<br /><br />
</div>

Formulário Criando um componente para controlar um formulário

export default class ExemploFormulario extends Component {
constructor() {
super();
// inicializa os campos
this.state = {
nome: "",
sexo: "",
nascimento: "",
email: "",
notificacao: ""
};
}

Formulário
export default class ExemploFormulario extends Component {
....
render() {
return <form onSubmit={(evento) => {
// Previne que o formulário faça o submit
// trata o envio pelo método enviar
evento.preventDefault(); this.enviar() }}
style={{
border: "1px solid black",
padding: "10px"
}}
>
<label>Nome:</label>
<input type="text" value={this.state.nome} required
onChange={(evento) => this.setValor("nome", evento.target.value)} />
 <br /><br />
<label>Sexo:</label>
<select value={this.state.sexo} required
onChange={(evento) => this.setValor("sexo", evento.target.value)}>
<option value=""></option>
<option value="masculino">Masculino</option>
<option value="feminino">Feminino</option>
</select><br /><br />
<label>Nascimento:</label>
<input type="date" value={this.state.nascimento}
onChange={(evento) => this.setValor("nascimento", evento.target.value)} />
<br /><br />
<label>E-mail:</label>
<input type="email" value={this.state.email} required
onChange={(evento) => this.setValor("email", evento.target.value)} />
<br /><br />
<input
id="notificacao"
type="checkbox"
checked={this.state.notificacao}
onChange={(evento) => this.setValor("notificacao", evento.target.checked)} />
<label htmlFor="notificacao" >Receber notificação por e-mail </label>
<br /><br />
<button type="submit">Cadastar</button>
</form>
}

Formulário
export default class ExemploFormulario extends Component {
....
// função genérica para atribuir valores do estado
setValor(campo, valor) {
this.setState(
(estadoAntigo) => {
estadoAntigo[campo] = valor;
return estadoAntigo;

});
}

Formulário
export default class ExemploFormulario extends Component {
....
// função que notifica o componente pai
// através da callback cadastrar
enviar() {
let cadastro = {
nome: this.state.nome,
sexo: this.state.sexo,
nascimento: this.state.nascimento,
email: this.state.email,
notificacao: this.state.notificacao
};

this.props.cadastrar(cadastro);
}

Formulário O componente pai recebe o item cadastrado pelo evento cadastrar

export default class ExemploFormularioPai extends Component {
...
render() {
return <div>
<ExemploFormulario
cadastrar={(cadastro) => this.setCadastro(cadastro)} />
<br/> <br/>
{this.state.cadastro ?
<div>
Nome:{this.state.cadastro.nome}<br />
Sexo:{this.state.cadastro.sexo}<br />
Nascimento:{this.state.cadastro.nascimento}<br />
E-mail:{this.state.cadastro.email}<br />
Receber notificação?
{this.state.cadastro.notificacao ? "sim" : "não"}<br />
</div>
: "Nenhum cadastro enviado"
}
</div>
}
}

Listas / arrays Para converter arrays em tags no JSX, normalmente é empregada a função map
array.map(( elem, index, array ) => {
...
// deve retornar o novo item do array na posição
});

map() percorre o array da esquerda para a direita invocando a função de retorno em cada elemento. Para cada chamada de retorno, o valor devolvido se torna o elemento do
novo array. Depois que todos os elementos foram percorridos, map() retorna o novo array com todos os elementos "traduzidos". Listas / arrays
let a=[1,2,3,4,5];
let b=a.map((valor) =>{return valor*2});// b= [2, 4, 6, 8, 10]
let c=a.map((valor, indice) =>{return "pos:"+indice+"="+valor});
// c= ["pos:0=1", "pos:1=2", "pos:2=3", "pos:3=4", "pos:4=5"]
let d=a.map((valor, indice) =>{return <li>{indice} - {valor}</li>});
//[<li>0 - 1</li>, <li>1 - 2</li>, <li>2 - 3</li>
//, <li>3 - 4</li>, <li>4 - 5</li>]

Listas / arrays
export default class ExemploLista extends Component {
constructor() {
super();
this.state = {
meses:["janeiro", "fevereiro", "março", "abril", "maio", "junho",
"julho", "agosto", "setembro", "outubro", "novembro", "dezembro"]
};
}

render() {
return (
<ul>
{this.state.meses.map((mes) => { return <li>{mes}</li> })}
</ul>
);
}
}

Listas / arrays
export default class ExemploLista extends Component {
constructor() {
super();
this.state = {
meses: ["janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro"]
};
}
render() {
let lista = [];
for (let x = 0; x < this.state.meses.length; x++) {
let mes = <li>{this.state.meses[x]}</li>;
lista.push(mes);
}
return (
<ul>
{lista}
</ul>
);
}
}

Listas / arrays
export default class ExemploLista extends Component {
constructor() {
super();
this.state = {
meses:["janeiro", "fevereiro", "março", "abril", "maio", "junho",
"julho", "agosto", "setembro", "outubro", "novembro", "dezembro"]
};
}

render() {
return (
<ul>
{this.state.meses.map((mes) => <li>{mes}</li>)}
</ul>
);
}
}

Listas / arrays
export default class ExemploLista2 extends Component {
constructor() {
super();
this.state = { contatos: [
{id:1, nome:"João do Exemplo", email:"joao@exemplo.com"},
{id:2, nome:"Maria do Exemplo", email:"maria@exemplo.com"},
{id:3, nome:"Enzo do Exemplo", email:"enzo@exemplo.com"}
]};
}
render() {
return (<table>
<tr><th>Nome</th><th>E-mail</th></tr>
{this.state.contatos.map((contato) =>
<tr key={contato.id}>
<td>{contato.nome}</td>
<td>{contato.email}</td>
</tr>)}
</table>
);
}
}

Listas / arrays Keys ajudam o React a identificar qual elemento foi adicionado/removido de uma lista/array. Uma Key deve sempre ser um valor único entre todos os possíveis
elementos da lista. Ciclo de vida Métodos que serão executados em determinados momentos da vida de um componente.

Dividido em 3 fases:

Criação
Atualizações
Destruição

Ciclo de vida Ciclo de vida constructor(props)

Método construtor do componente, executado logo quando o componente é instanciado.

Normalmente, é utilizado para definir o estado inicial do componente.
Recebe como parâmetro as propriedades do componente (props)
O construtor da classe pai deve ser chamado na inicialização (super).

Ciclo de vida render()

 Define a aparência e comportamento do componente a partir de sua propriedade e estado
Normalmente*, é chamado toda vez que uma alteração nas propriedades ou estado do componente é realizada
Não pode alterar o estado ou executar eventos
Pode retornar:
Componente, elemento JSX, string, números, boleanos, portais e null

Ciclo de vida componentDidMount()

Método que é executado após a montagem do componente no DOM

É executado uma vez em um ciclo de vida de um componente e será após a primeira renderização
Local recomendado para fazer qualquer processo assíncrono, como chamadas ao servidor e inscrição em serviços

Ciclo de vida componentWillUnmount()

Método que é executado antes do componente ser destruído

Utilizado para desinscrição em serviços, liberação de recursos e cancelamento de requisições

Ciclo de vida
export default class ExemploEstado extends Component {
constructor() {
super();
this.state = {
contador: 1
};
}

componentDidMount() {
let funcao = () => this.setState({
contador: this.state.contador + 1
});
this.interval = setInterval(funcao, 1000);

componentWillUnmount() {
clearInterval(this.interval);
}

Ciclo de vida shouldComponentUpdate(proximoProps, proximoState)

Método que determina se o componente deve realizar o render novamente ou não

Recebe a próxima propriedade e o próximo estado como parâmetro
Comparando com as propriedades e estados atuais (this.props e this.state), retornando true ou false, para notificar se o componente necessita de atualização
Busca melhorar a performance do componente

Ciclo de vida getSnapshotBeforeUpdate(prevProps, prevState)

Método que executa antes de uma atualização ocorrer

Utilizado para buscar informações da DOM antes das alterações ocorrerem
O valor retornado por este método é enviado ao componentDidUpdate que é o ciclo executado na sequência

Ciclo de vida componentDidUpdate(prevProps, prevState, snapshot)

Método que executa logo após uma atualização ocorrer

Utilizado para executar ajustes no DOM a partir do snapshot

Ciclo de vida componentDidCatch(error, info)

Método que captura erros ocorridos durante o ciclo de vida do componente

Ciclo de vida
export default class ExemploErroDiv extends Component {
render() {
return <div>{this.state.naoTem}</div>
}
}
export default class ExemploErro extends Component {
....
componentDidCatch(erro, info) {
this.setState({erro:erro,info:info });
}
render() {
if (this.state.erro) {
return <h1>Erro:{this.state.erro.toString()} </h1>;
} else {
return <div> Contagem:
{this.state.contador<5?this.state.contador:<ExemploErroDiv/>}
</div>
}
}

Ciclo de vida static getDerivedStateFromProps(nextProps, prevState)

Método que executa na criação do componente e na atualização de suas propriedades

Utilizado quando o estado deriva de sua propriedades
Retorna as mudança no estado ou null caso não tenha mudança

Ciclo de vida
export default class ExemploFormulario extends Component {
constructor() {
super();
this.state = {
nome: "", sexo: "", nascimento: "",
email: "", notificacao: ""
 };}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.cadastro) {
return {
nome: nextProps.cadastro.nome,
sexo: nextProps.cadastro.sexo,
nascimento: nextProps.cadastro.nascimento,
email: nextProps.cadastro.email,
notificacao: nextProps.cadastro.notificacao
}
}
return null;
}