Mais conteúdo relacionado
Mais procurados
Semelhante a React Hooks
Semelhante a React Hooks (20)
React Hooks
- 2. ● Desenvolvedor Web há 10 anos; ● Membro ativo da comunidade oficial do React no github; ● Membro do time de plataforma e Tech Lead na Conta Azul; ● Graduado em Análise e Desenvolvimento de Sistema; ● Apaixonado por um bom e velho Rock; ● Sou movido a cafeína; Jhon Mike Github: https://github.com/jhonmike Twitter: https://twitter.com/JhonMikeSoares Linkedin: https://www.linkedin.com/in/jhonmike/
- 3. Hooks no React É uma nova feature disponível desde a v16.8, lançada dia 6 de fevereiro de 2019. Hooks permite que usemos estado e outros recursos do React sem escrever componentes com classes.
- 4. Exemplo:
- 5. Sem breaking changes Hooks são retrocompatíveis
- 6. É difícil reutilizar comportamentos entre componentes, precisamos utilizar soluções como render props ou higher-order components (Componentes de alta ordem) Motivação Com hooks conseguimos extrair a lógica com estado de um componente, podendo testar e compartilhar esses hooks se necessário. Assim evitamos mudar a hierarquia de nossos componentes.
- 7. É um componente que recebe uma função que retorna um outro componente que é chamado no momento da renderização. Render props
- 8. Exemplo de render props
- 9. É uma técnica avançada do React para reutilizar a lógica de um componente. Seria uma função que recebe um componente existente e retorna um outro componente, envolvendo-o e atribuindo-lhe novas funcionalidades. Higher-order component
- 10. Exemplo de higher-order component
- 12. Componentes complexos se tornam difíceis de entender Motivação Frequentemente nossos componentes começam simples e com o tempo se tornam componentes gigantes com lógica de estado e side-effects como: chamadas de API, tarefas assíncronas, modificações na DOM, etc. E existem casos que não conseguimos quebrar esses componentes.
- 13. Classes confundem tanto pessoas quanto máquinas Motivação Classes apresentam problemas para ferramentas dos dias de hoje, por exemplo, classes não minificam muito bem e elas fazem com que o hot reloading funcione de forma inconsistente e não confiável.
- 14. Hooks Básicos ● useState ● useEffect ● useContext Hooks Hooks Adicionais ● useReducer ● useCallback ● useMemo ● useRef ● useImperativeHandle ● useLayoutEffect ● useDebugValue
- 15. useState Conseguimos declarar uma variável state em um componente de função.
- 16. useState vs State na classe
- 17. Permite executar side-effects em componentes de função. useEffect
- 18. useEffect vs side effects nas classes
- 19. Regras dos Hooks Use Hooks apenas no Nível Superior Não use Hooks dentro de loops, regras condicionais ou funções aninhadas. Use Hooks apenas dentro de funções do React Não use Hooks dentro de funções JavaScript comuns.
- 20. Criar nossos próprios Hooks permite extrairmos a lógica de um componente em funções reutilizáveis. Custom Hooks
- 21. O custom Hook não precisa ter uma assinatura específica. Podemos decidir que argumentos receber e o que ele retorna. obs.: Seu nome deve sempre começar com use para facilitar o uso de linters e deve seguir as regras dos Hooks. Custom Hooks
- 22. Para efetuar testes com hooks é o mesmo teste de um componente "tradicional". Com a função act, podemos deixar a execução do componente no teste o mais próximo do que acontece no browser. Testando Hooks
- 23. - Escrever componentes de forma mais simples e legível. - Não precisamos refatorar todo nosso código, podemos migrar gradualmente ou manter seu app tanto com classes quanto hooks. - Hooks não acabou com o redux, inclusive podemos usá-los juntos. Eles vieram para ajudar