VOLTAR
No decurso de muitas entrevistas, reparei que mesmo os programadores experientes têm dificuldade em distinguir os Hooks, já para não falar das suas capacidades mais avançadas. Por isso, vou tentar explicar neste artigo como os Hooks devem ser usados.
Os aspectos mais importantes a ter em conta sobre os ganchos:
utilização;import { useState,useEffect } from "reagir";
export default function FunctionComponent() {
const [value, setValue] = useState(1);
const [doubleValue, setDoubleValue] = useState(1);
se (valor > 3) {
useEffect(() => setDoubleValue(value * 2),[value]);
}
return (
{`Single ${value} Double ${doubleValue}`}
);
}
```No início, receberá um aviso do eslint:
<code>srcFunctionComponent.js
Linha 11:5: React O gancho "useEffect" é chamado condicionalmente. <strong>Ganchos React</strong> devem ser chamados exatamente na mesma ordem em cada componente render .eslintreact-hooks/rules-of-hooksComo pode ver, é apenas um aviso do eslint, pelo que pode desactivá-lo adicionando um comando a partir de baixo no topo do ficheiro FunçãoComponente
/* eslint-disable react-hooks/rules-of-hooks */ e vai funcionar, mas só até cumprirmos a condição que executa o nosso Hook. A próxima coisa que veremos é este erro.
Erro não detectado: Renderizou mais ganchos do que na renderização anterior.
React 5
FunctionComponent FunctionComponent.js:11
React 12
unstable_runWithPriority scheduler.development.js:468
React 17
js index.js:7
js main.chunk.js:905
Webpack 7
react-dom.development.js:15162Por que isso acontece? O React se baseia na ordem em que os Hooks são chamados, pois o React não saberia o que retornar para o useEffect porque não havia tal Hook na linha para verificar.
Lembre-se, o eslint é uma ferramenta poderosa, que ajuda nós captura muitos erros e bugs potenciais. Desativar os avisos é perigoso. Verifique sempre se ignorar o aviso pode causar uma falha na aplicação.
Provavelmente já sabes como é que fica 😉
const [value, setValue] = useState(0);Assim, tem 4 elementos: estado (valor reativo), função de atualização (setter), gancho real (função) e valor inicial opcional. Porque é que retorna um array? Porque podemos reestruturá-lo como quisermos.
Agora quero concentrar-me no último elemento - o valor inicial. Há duas maneiras de passar o estado inicial:
const [value, setValue] = useState(0);const [value, setValue] = useState(() => {
consola.log("INIT");
return 0;
});Como verificar se a primeira forma é realmente chamada em cada renderização? Crie uma função e passe-a como um estado inicial:
const checkInit = () => {
console.log("INIT");
return 0;
};
const [value, setValue] = useState(checkInit());
```E agora passe-o utilizando a segunda via:
const checkInit = () => {
console.log("INIT");
return 0;
};
const [value, setValue] = useState(() => checkInit());
```Fixe, não é?
Outra coisa que pode criar erros no fluxo da aplicação: provavelmente sabe como atualizar um estado, certo?
setValue(1);Certo... mas e se eu quiser atualizar o estado com base num estado anterior?
setValue(value + 1);Sim... Mas não... E se tentar chamar a função setter duas vezes, uma após a outra? A forma recomendada de atualizar um estado com base no estado anterior é utilizar uma função. Esta garante que se está a referir ao estado anterior
setValue((prevState) => prevState + 1);
// com objectos:
setUser((prevState) => ({ ...prevState, lastName: "Brzeczyszczykiewicz" }));Este Hook recebe 2 argumentos (o segundo é opcional) e usamo-lo para lidar com efeitos secundários. E dependendo do que passarmos como segundo argumento, o Hook será chamado de forma diferente:
useEffect(() => {
doSomething();
});useEffect(() => {
doSomething();
}, []);useEffect(() => {
doSomething(value);
}, [valor]);Com o useEffect, podemos utilizar algo a que chamamos limpeza. Para que é que serve? É muito útil, mas acho que é melhor para limpar ouvintes de eventos. Digamos que você queira criar um event listener que depende de algum estado. Você não quer adicionar um novo event listener a cada mudança de estado, porque depois de algumas renderizações haverá tantos listeners que isso afetará o desempenho da aplicação. Uma ótima maneira de evitar essas coisas é usar o recurso de limpeza. Como fazer isso? Basta adicionar uma função de retorno ao useEffect.
useEffect(() => {
consola.log("efeito secundário 1", contagem);
return () => {
console.log("DESTROYED 1");
};
});
useEffect(() => {
console.log("efeito colateral 2", count);
return () => {
console.log("DESTROYED 2");
};
}, []);
useEffect(() => {
consola.log("efeito secundário 3", contagem);
return () => {
console.log("DESTROYED 3");
};
}, [count]);
```Porque está dentro do Hook useEffect, o retorno é chamado dependendo do array de dependências - em cada renderização, apenas na primeira renderização, ou quando o valor no array de dependências muda. Mas quando o componente é desmontado, cleaning será chamado no segundo argumento, não importa o que aconteça. O retorno código é chamado antes do código real do Hook. É muito lógico - primeiro limpar o antigo, depois criar um novo. Certo?
useEffect(() => {
// addEventListener
console.log("Add");
return () => {
// removeEventListener
console.log("Remove");
};
}, [value]);Assim, em primeiro lugar, receberá um remover mensagem, então Adicionar.
Há uma coisa a ter em atenção quando se utiliza useEffect e código assíncrono dentro dele. Dê uma olhada no código abaixo:
useEffect(() => {
fetch("https://picsum.photos/5000/5000").then(() => {
setValue((prevState) => prevState + 1);
});
}, []);No início, parece estar tudo bem. Está a obter alguns dados e, quando os dados chegam, actualiza o estado. E aqui está a armadilha:
Por vezes, recebe um aviso deste tipo:Não é possível efetuar uma atualização de estado do React num componente não montado. Isto não é uma opção, mas indica uma fuga de memória na sua aplicação. Para corrigir, cancele todas as assinaturas e tarefas assíncronas em uma função de limpeza useEffect.
A razão é que o componente pode ser desmontado entretanto, mas a aplicação continuará a tentar atualizar o estado desse componente depois de a promessa ter sido cumprida. Como lidar com isso? É necessário verificar se o componente existe.
useEffect(() => {
let mounted = true;
fetch("https://picsum.photos/5000/5000").then(() => {
if (mounted) {
setValue((prevState) => prevState + 1);
}
});
return () => {
mounted = false;
};
}, []);
```Nota: Existe um Hook muito semelhante => useLayoutEffect() - a chamada de retorno é executada após a renderização do componente, mas antes de o dom ser atualizado visualmente. É útil quando se trabalha com getBoundingClientRect(), mas deve usar useEffect por defeito. Porquê? Porque pode bloquear as actualizações visuais - quando tem um código complexo dentro do seu efeito Hook.
Para que serve? Partilhar dados sem passar props. É composto pelos seguintes elementos:
const user = {
nome: "Adam",
lastName: "Kowalski",
};
export const UserContext = createContext(user);
;
```Em child, é necessário importar o contexto e chamar o Hook useContext e passar esse contexto como argumento.
importar { UserContext } de "./App";
const { name } = useContext(UserContext);
retornar <h1>Olá {nome}<>
```Voilà. Parece fixe. Principalmente para passar dados globais como temas, etc. Não recomendado para uso em tarefas com mudanças muito dinâmicas.
É claro que podemos criar um provedor de contexto personalizado e um Hook personalizado para reduzir o boilerplate... mas tratarei dos Hooks personalizados no próximo artigo.
Permite-nos gerir o estado e voltar a renderizar quando o estado muda - como useState. É semelhante ao redução reducer. Este é melhor do que useState quando a lógica de estado é mais complicada.
const [state, dispatch] = useReducer(reducer, initialArg); Há também um terceiro argumento que pode ser passado para o useReducer - a função init.
const [state, dispatch] = useReducer(reducer, initialArg, init);Para que é que serve? Pode ser utilizado quando queremos repor o estado no seu valor inicial. Abaixo pode encontrar um bom exemplo:
// Pai// Criança
function init(initialNumber) {
return { number: initialNumber };
}
function reducer(state, action) {
switch (action.type) {
case "change":
return { number: Math.random() };
case "reset":
return init(action.payload);
por defeito:
throw new Error();
}
}
export default function ChildComponent({ getFactorial }) {
const [state, dispatch] = useReducer(reducer, initialNumber, init);
return (
<>
<h2>Número: {state.number}</h2>
<button
onclick="{()" > dispatch({ type: "reset", payload: initialNumber })}
>
Repor
</button>
<button onclick="{()" > dispatch({ type: "change" })}>Draw</button>
</>
);
}
Quando a utilizar? Quando queremos obter igualdade referencial (reduzindo assim o número de funções criadas). Este Hook devolve a função, ao contrário de useMemo que devolve o valor.
Exemplo: Criar uma função no componente principal e depois passá-la através de props
// Pai
const getSquaredValue = () => count * count;
...
return (
)Em seguida, verifique no componente filho quantas vezes o efeito Hook será chamado depois de adicionar essa função à matriz de dependências:
// Criança
useEffect(() => {
console.log("getSquaredValue", getSquaredValue());
}, [getSquaredValue]);Ele será registado na consola em cada renderização! Mesmo que os valores dentro do getSquaredValue() não foi alterada. Mas podemos evitar isso envolvendo essa função em useCallback
const getSquaredValue = useCallback(() => count * count, [count])Também podemos passar alguns parâmetros para esta função:
const getSquaredValue = useCallback(
(multiplicador) => contagem * contagem * multiplicador,
[count]
);const memoizedValue = useMemo(() => {
return doSomething(value);
}, [valor]);Deve ser utilizado apenas em 2 cenários:
Vamos ver um pouco mais de perto o segundo caso. Queremos usar useEffect com um objeto como dependência. Como os objetos são comparados por sua referência, useEffect será chamado em cada renderização. Para evitar isso, podemos combinar useEffect com useMemo para memorizar esses objetos e então passar esses objetos memorizados para o array de dependências. Um pequeno exemplo:
Primeiro, tente fazê-lo sem o useMemo:
const hobbit = { name: "Bilbo" };
useEffect(() => {
consola.log("Olá ", hobbit.name);
}, [hobbit]);
```Além disso, receberá um aviso:
O objeto 'hobbit' faz com que as dependências do gancho useEffect (linha 49) mudem em cada renderização. Mova-o para dentro do retorno de chamada useEffect. Em alternativa, envolva a inicialização de 'hobbit' no seu próprio Gancho useMemo ().eslintreact-hooks/exhaustive-deps
Em seguida, experimente usar o useMemo:
const hobbit = useMemo(() => {
return { name: "Bilbo" };
}, []);
useEffect(() => {
consola.log("Olá ", hobbit.name);
}, [hobbit]);
```A coisa mais importante: useRef não desencadeia a re-renderização (como useState) porque não está ligado ao ciclo de renderização - mantém a mesma referência entre renders.
const ref = useRef(0);Para chamar o valor guardado, é necessário utilizar uma propriedade atual (ref é um objeto) - ref.atual
O segundo caso para o qual podemos usar esse Hook é para referenciar elementos dentro do HTML. Cada elemento tem um atributo ref. Assim, podemos lidar com foco, eventos etc.
O terceiro caso é que podemos utilizar refs para lidar com componentes não controlados. Pode ler mais sobre eles em documentos react,
mas, resumidamente, é assim:
export default function UncontrolledForm() {
const input = useRef();
const handleSubmit = (e) => {
e.preventDefault();
console.log(input.current.value);
};
return (
);
}Como pode ver, não há nenhum manipulador de eventos, ele apenas se lembra do valor digitado. É ótimo para lidar com formulários básicos quando apenas se pretende ler os valores guardados quando se precisa deles (como quando se submete).
Bónus: É ótimo quando é necessário recordar valores de estados anteriores. Você pode usar para isso o Hook useEffect, basta passar o estado para o ref.
const [value, setValue] = useState("");
let prevValue = useRef("");
useEffect(() => {
prevValue.current = value;
}, [value]);
setValue(e.target.value)}>;Como pode ver, os Hooks não são assim tão óbvios. Podemos combiná-los para resolver muitos problemas. O estudo deste tema vai certamente trazer-lhe grandes benefícios.
E há também ganchos personalizados...
Em conclusão, Ganchos React revolucionaram a forma como Desenvolvedores React abordagem de construção aplicações web . Ao proporcionar uma forma mais intuitiva e eficiente de gerir o estado e o ciclo de vida dos componentes funcionais, os hooks tornaram-se parte integrante da Desenvolvimento do React .
Quer seja um programador experiente ou esteja apenas a começar com o React, é crucial compreender os hooks mais populares e os seus casos de utilização. Com ganchos como useState, useEffect, useContext, e mais, Componentes do React pode ser construído com um código mais limpo e reutilizável. Além disso, a capacidade de criar ganchos personalizados permite que os programadores encapsulem e partilhem a lógica entre vários componentes, promovendo a reutilização e a modularidade do código. À medida que o React continua a evoluir e a introduzir novas funcionalidades, os hooks desempenharão, sem dúvida, um papel central no aproveitamento de todo o potencial da estrutura.
Assim, quer esteja a trabalhar numa pequena aplicação funcional ou numa aplicação Web de grande escala, abraçar Ganchos React irá melhorar o seu fluxo de trabalho de desenvolvimento e desbloquear uma infinidade de possibilidades para criar aplicações robustas e ricas em funcionalidades Aplicações React .
Fim da Parte 1
Ler mais:
JavaScript está completamente morto. Um gajo qualquer na Internet
Portuguese 
English 
German 
Swedish 
Danish 
Norwegian 
Finnish 
French 
Polish 
Arabic 
Italian 
Japanese 
Spanish 
Dutch 
Estonian 
Greek 
Czech