“O que diabos são ganchos?”
Eu me vi perguntando isso exatamente como pensava ter coberto todas as bases do React. Essa é a vida de um desenvolvedor front-end, o jogo está sempre mudando. Digite Ganchos.
É sempre bom aprender algo novo, certo? Claro! Mas às vezes temos que nos perguntar “Por quê? Qual é o sentido dessa coisa nova? Preciso aprender isso”?
Com ganchos, a resposta é “não”. Se você aprendeu o React e usou componentes baseados em classe até o momento, não há pressa em mudar para ganchos. Os ganchos são opcionais e podem trabalhar em conjunto com os componentes existentes. Você não odeia quando precisa reescrever toda a sua base de código para obter algo novo para funcionar?
De qualquer forma, aqui estão algumas razões pelas quais os ganchos foram introduzidos e porque recomendo que os iniciantes os aprendam.
Usando estado em componentes funcionais
Antes dos ganchos, não era possível usar o estado em um componente funcional. Isso significa que, se você tiver um componente funcional bem criado e testado que precisa repentinamente armazenar o estado, ficará com a dolorosa tarefa de refatorar nosso componente funcional em um componente de classe. Viva! Permitir estado dentro de componentes funcionais significa que não precisaremos refatorar nossos componentes de apresentação Confira este artigo para mais.
Os componentes da classe são desajeitados
Vamos ser sinceros, os componentes da classe são fornecidos com bastante clichê. Construtores, vinculativos, usando “this” em qualquer lugar. O uso de componentes funcionais remove muito disso, tornando nosso código mais fácil de seguir e manter.
Você pode ler mais sobre isso nos documentos do React:
Código mais legível
Como os hooks nos permitem usar componentes funcionais, isso significa que há menos código em comparação aos componentes da classe e, portanto, torna nosso código mais legível. Bem, essa é a ideia de qualquer maneira. Não precisamos nos preocupar em vincular nossas funções ou lembrar o que “isso” também se relaciona, e assim por diante. Podemos nos preocupar em escrever nosso código.
Reage ao gancho do estado
Ah, estado. Uma pedra angular do ecossistema React. Vamos molhar os pés com Hooks, introduzindo o gancho mais comum com o qual você trabalhará – useState().
Vamos dar uma olhada em um componente de classe que possui estado.
import React, { Component } from 'react';
import './styles.css';
class Counter extends Component {
state = {
count: this.props.initialValue,
};
setCount = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
This is a counter using a class
{this.state.count}
);
}
}
export default Counter;
Com o React Hooks, podemos reescrever esse componente e remover muitas coisas, facilitando a compreensão:
import React, { useState } from 'react';
function CounterWithHooks(props) {
const [count, setCount] = useState(props.initialValue);
return (
This is a counter using hooks
{count}
);
}
export default CounterWithHooks;
Diante disso, há menos código, mas o que está acontecendo?
Sintaxe do estado de reação
Então vimos o nosso primeiro gancho! Viva!
const [count, setCount] = useState();
Basicamente, isso usa atribuição de desestruturação para matrizes. o useState() A função nos fornece duas coisas:
- uma variável para armazenar o valor do estado, nesse caso, é chamado
count– uma função para alterar o valor, nesse caso, é chamadosetCount.
Você pode nomear estes como quiser:
const [myCount, setCount] = useState(0);
E você pode usá-los em todo o código como variáveis / funções normais:
function CounterWithHooks() {
const [count, setCount] = useState();
return (
This is a counter using hooks
{count}
);
}
Observe o useState gancho no topo. Estamos declarando / destruindo duas coisas:
counter: um valor que manterá nosso valor de estadosetCounter: uma função que mudará nossacountervariável
À medida que prosseguimos no código, você verá esta linha:
{count}
Este é um exemplo de como podemos usar uma variável de gancho de estado. Dentro do nosso JSX, colocamos nossa count variável dentro {} executá-lo como JavaScript e, por sua vez, o count O valor é renderizado na página. Comparando isso com a maneira antiga “baseada em classe” de usar uma variável de estado:
{this.state.count}
Você notará que não precisamos mais nos preocupar em usar this, o que facilita muito a nossa vida – por exemplo, o editor do VS Code nos avisa se {count} não está definido, permitindo detectar erros mais cedo. Considerando que não saberá se {this.state.count} é indefinido até que o código seja executado.
Para a próxima linha!
Aqui, estamos usando o setCount (lembre-se de que destruímos / declaramos isso a partir do useState() gancho) para alterar o count variável.
Quando o botão é clicado, atualizamos o count variável por 1. Como essa é uma mudança de estado, isso dispara um novo renderizador e o React atualiza a visualização com o novo count valor para nós. Doce!
Como posso definir o estado inicial?
Você pode definir o estado inicial passando um argumento para o useState() sintaxe. Este pode ser um valor codificado:
const [count, setCount] = useState(0);
Ou pode ser retirado dos adereços:
const [count, setCount] = useState(props.initialValue);
Isso definiria o count valor para qualquer que seja o props.initialValue é.
Isso resume useState(). A beleza disso é que você pode usar variáveis / funções de estado como qualquer outra variável / função que você escreveria.
Como lidar com várias variáveis de estado?
Esta é outra coisa interessante sobre ganchos. Podemos ter quantos quisermos em um componente:
const [count, setCount] = useState(props.initialValue);
const [title, setTitle] = useState("This is my title");
const [age, setAge] = useState(25);
Como você pode ver, temos três objetos de estado separados. Se quisermos atualizar a idade, por exemplo, chamamos apenas de setAge () função. O mesmo com contagem e título. Não estamos mais vinculados à maneira antiga do componente de classe desajeitado, onde temos um objeto de estado maciço armazenado usando setState ():
this.setState({ count: props.initialValue, title: "This is my title", age: 25 })
Então, e quanto a atualizar as coisas quando adereços ou mudanças de estado?
Ao usar ganchos e componentes funcionais, não temos mais acesso aos métodos do ciclo de vida do React, como componentDidMount, componentDidUpdate, e assim por diante. Oh céus! Não entre em pânico, meu amigo, o React nos deu outro gancho que podemos usar:
Digite useEffect!
O gancho Effect (useEffect ()) é onde colocamos “efeitos colaterais”.
Eh, efeitos colaterais? O que? Vamos sair da pista por um minuto e discutir o que realmente é um efeito colateral. Isso nos ajudará a entender o que useEffect() faz, e por que é útil.
Uma explicação chata para o computador seria.
“Na programação, um efeito colateral é quando um procedimento altera uma variável de fora do seu escopo”
Em termos de reação, isso significa “quando as variáveis ou o estado de um componente mudam com base em algo externo”. Por exemplo, isso pode ser:
- Quando um componente recebe novos adereços que mudam de estado
- Quando um componente faz uma chamada de API e faz alguma coisa com a resposta (por exemplo, altera o estado)
Então, por que é chamado de efeito colateral? Bem, não podemos ter certeza de qual será o resultado da ação. Nunca podemos ter 100% de certeza de quais objetos vamos receber ou qual seria a resposta de uma chamada de API. E não podemos ter certeza de como isso afetará nosso componente. Certamente, podemos escrever código para validar, manipular erros e assim por diante, mas, no final das contas, não podemos ter certeza de quais são os efeitos colaterais dessas coisas. Por exemplo, quando mudamos de estado, com base em algumas coisa de fora isso é conhecido como efeito colateral.
Com isso fora do caminho, vamos voltar ao React e ao useEffect Hook!
Ao usar componentes funcionais, não temos mais acesso a métodos de ciclo de vida como componentDidMount(), componentDidUpdate() etc. Portanto, os ganchos useEffect substituem os ganchos atuais do Ciclo de Vida do React.
Vamos comparar um componente baseado em classe com a forma como usamos o gancho useEffect:
import React, { Component } from 'react';
class App extends Component {
componentDidMount() {
console.log('I have just mounted!');
}
render() {
return Insert JSX here;
}
}
E agora usando useEffect ():
function App() {
useEffect(() => {
console.log('I have just mounted!');
});
return Insert JSX here;
}
Antes de continuarmos, é importante saber que, por padrão, o gancho useEffect é executado em cada renderização e nova renderização. Portanto, sempre que o estado for alterado em seu componente ou receber novos adereços, ele será renderizado novamente e fará com que o gancho useEffect seja executado novamente.
Executando um efeito uma vez (componentDidMount)
Portanto, se os ganchos são executados toda vez que um componente é renderizado, como garantir que um gancho seja executado apenas uma vez quando o componente é montado? Por exemplo, se um componente buscar dados de uma API, não queremos que isso aconteça sempre que o componente for renderizado novamente!
o useEffect() hook recebe um segundo parâmetro, uma matriz, contendo a lista de itens que farão com que o gancho useEffect seja executado. Quando alterado, ele acionará o gancho de efeito. A chave para executar um efeito uma vez é passar em uma matriz vazia:
useEffect(() => {
console.log('This only runs once');
}, []);
Portanto, isso significa que o gancho useEffect será executado na primeira renderização normalmente. No entanto, quando o seu componente for renderizado novamente, o useEffect pensará “bem, eu já executei, não há nada na matriz, portanto não precisarei executar novamente. Volte a dormir para mim!” e simplesmente não faz nada.
Em resumo, matriz vazia =
useEffectgancho é executado uma vez na montagem
Usando efeitos quando as coisas mudam (componentDidUpdate)
Abordamos como garantir que um useEffect hook é executado apenas uma vez, mas e quando nosso componente recebe um novo suporte? Ou queremos executar algum código quando o estado mudar? Ganchos, vamos fazer isso também!
useEffect(() => {
console.log("The name props has changed!")
}, [props.name]);
Observe como estamos passando coisas para a matriz useEffect neste momento, a saber props.name. Nesse cenário, o gancho useEffect será executado na primeira carga, como sempre. Sempre que seu componente recebe um novo nome prop do pai, o gancho useEffect será acionado e o código contido nele será executado.
Podemos fazer o mesmo com variáveis de estado:
const [name, setName] = useState("Chris");
useEffect(() => {
console.log("The name state variable has changed!");
}, [name]);
Sempre que o name mudanças de variável, os componentes são renderizados novamente e o gancho useEffect será executado e emitirá a mensagem. Como essa é uma matriz, podemos adicionar várias coisas a ela:
const [name, setName] = useState("Chris");
useEffect(() => {
console.log("Something has changed!");
}, [name, props.name]);
Desta vez, quando o name mudanças na variável de estado ou o name prop alterações, o gancho useEffect será executado e exibirá a mensagem do console.
Podemos usar componentWillUnmount ()?
Para executar um gancho quando o componente está prestes a desmontar, basta retornar uma função do useEffect gancho:
useEffect(() => {
console.log('running effect');
return () => {
console.log('unmounting');
};
});
Posso usar diferentes ganchos juntos?
Sim! Você pode usar quantos ganchos desejar em um componente e misturar e combinar conforme desejar:
function App = () => {
const [name, setName] = useState();
const [age, setAge] = useState();
useEffect(()=>{
console.log("component has changed");
}, [name, age])
return(
Some jsx here...
)
}
Conclusão – O que vem depois?
Aí está. Os ganchos nos permitem usar boas funções JavaScript antiquadas para criar componentes React mais simples e reduzir um monte de código padrão. Agora, corra para o mundo dos ganchos Reac e tente construir você mesmo! Falando em construir coisas você mesmo …