Compromissos, padrões de referências e valores padrão
Compare campos de entrada controlados e não controlados, use referências para leituras e forneça valores padrão sensatos.
Compromissos, padrões de referências e valores padrão é uma aula grátis de React Academy no CoddyKit. Esta é a aula 1 de 2. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 2 aulas no total.
Controlado versus não controlado
Objetivo: Escolha o estilo certo de campo de entrada.
- Controlado: valor no estado; renderiza novamente quando há uma alteração
- Não controlado: o DOM mantém o valor; leia-o por meio de uma referência quando necessário
- Valores padrão: defaultValue, defaultChecked
Comparação rápida das vantagens e desvantagens
- Controlado: ótimo para validação em tempo real, máscaras e sincronização com outros campos
- Não controlado: menos renderizações; formulários simples usados apenas para envio
- Combine: use o modo controlado para campos importantes e o não controlado para os opcionais
Demonstração: campo de entrada controlado
Um campo controlado armazena o valor no estado e o atualiza a cada alteração.
<div id="root"></div>
Demonstração: não controlado com referência
Um campo não controlado usa o valor do DOM; nós o lemos com uma referência quando necessário.
<div id="root"></div>
Valores padrão e quando usar o modo controlado
Use defaultValue/defaultChecked para valores padrão de campos não controlados; mude para o modo controlado quando precisar de regras em tempo real.
<div id="root"></div>
Dicas e armadilhas
- Não misture value e defaultValue no mesmo campo de entrada
- Use referências para ler valores não controlados
- Escolha o modo controlado quando a interface reagir a cada tecla pressionada
Verificação: controlado versus não controlado
Recapitulação
Recapitulação: Use o modo controlado para regras em tempo real e estado derivado; o não controlado para leituras simples feitas apenas no envio. Use uma referência para ler valores e defaultValue para o conteúdo inicial.
Perguntas Frequentes
A aula “Compromissos, padrões de referências e valores padrão” é grátis?
Sim — o texto completo de “Compromissos, padrões de referências e valores padrão” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 2 aulas no total.
O que vou aprender em “Compromissos, padrões de referências e valores padrão”?
Compare campos de entrada controlados e não controlados, use referências para leituras e forneça valores padrão sensatos. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar React Academy?
Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 2.
Quanto tempo leva a aula “Compromissos, padrões de referências e valores padrão”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de React Academy?
Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Compromissos, padrões de referências e valores padrão
- Prop getters e redutor de estado (leve)