Please enable JavaScript.
Coggle requires JavaScript to display documents.
Práticas avançadas em projetos com ReactJS - Coggle Diagram
Práticas avançadas em projetos com ReactJS
Aprofundando sobre o ciclo de vida do React
2 - Hooks
"Hooks são uma nova adição ao React 16.8. Eles permitem que você use o state e outros recursos do React sem escrever uma classe". ReactJS
Alguns tipos
useState
useEffect
useContext
useReducer
useCallback
useMemo
useRef
useImperativeHandlle
useLayoutEffect
useDebugValue
Regras
Não use Hooks dentro de funções JS comuns. Em vez disso você pode:
1 - Chamar Hooks em componentes React
2 - Chamar Hooks dentro de Hooks Customizados
Seguindo essas regras, vc garante que toda lógica de estado (state) no componente seja claramente visível no código fonte
3 - Context API
1 - Ciclo de vida
2 - Montagem
3 - Atualização
1 - Inicialização
4 -Desmontagem
Técnicas com componentes e DOM
Fragments
"Um padrão comum no React é que um componente pode retornar múltiplos elementos. Os Fragmentos permitem agrupar uma lista de filhos sem adicionar nós extras ao DOM". ReactJS
Error Boundaries
"Um erro de JS em uma parte da UI não deve quebrar toda a aplicação. Para resolver quebrar este problema para usuários do React, o React 16 introduziu um novo conceito de "error boundary"." - ReactJS
Erros boundaries não capturam erros em:
Manipuladores de evento
Código assíncrono (ex. callbacks de setTimeout ou requestAnimationFrame)
Renderização no servidor
Erros lançados na própria error boundary (ao invés de seus filhos)
Render Props
"O termo "render prop" se refere a uma técnica de compartilhar código entre componentes React passando uma prop cujo valor é uma função". - ReactJS
"Um componente com uma render prop recebe uma função que retorna um elemento React e a invoca no momento de renderização, não sendo necessário para o componente implementar uma lógica própria". - ReactJS
Typechecking
"Na medida em que sua aplicação cresce, vc pode capturar muitos bugs com checagem de tipos. Em algumas aplicações, vc pode usar extensões do JS como Flow ou TypeScript para checar os tipos de toda a sua aplicação. Porém, mesmo se vc não usá-las, o React possui algumas habilidades de checagem de tipos nativas". - ReactJS
Refs e DOM
Com Refs é possível acessar a árvore do DOM e/ou elementos React
Quando utilizar:
Manipulação de bibliotecas de terceiros
Gerenciamento de inputs (foco), seleção de textos ou reprodução de mídias
Animações imperativas
Organização o seu projeto
Smart Component
Providenciam dados e padrões de apresentação ou containers
Na maioria dos casos possuem estado e podem chamar outros fluxos do sistema
Podem conter Smart e Dumb components
Exemplos:
UserGallery
UserPage
FilterBook
FollowersSidebar
ListCards
Preocupam-se como as coisas vão funcionar
Organização de projeto
Dumb Component
Recebem valores e callbacks exclusivamente via props
Raramente possuem estado, quando precisam de estado é para controlar a interface e não dados do usuário
Não especificam como os dados são carregados ou sofrem mutação
Não possuem dependências com o restante da aplicação
São escritos na maioria das vezes como componentes funcionais
Recebem valores via props
Exemplos:
Button
Card
Sidebar
Footer
List
Menu
Preocupa-se com a apresentação