Eventos Sintéticos no React
No React, eventos sintéticos são uma camada de abstração sobre os eventos nativos do DOM, proporcionando uma interface consistente e eficiente para lidar com interações do usuário. Essa abstração é implementada para garantir a consistência entre diferentes navegadores e oferecer funcionalidades adicionais específicas do React.
Características principais dos eventos sintéticos
Compatibilidade entre navegadores
Os eventos sintéticos do React são projetados para serem consistentes em diferentes navegadores, eliminando as disparidades que podem ocorrer ao lidar diretamente com os eventos do DOM. Isso proporciona uma experiência de desenvolvimento mais suave e previsível.
Objeto de evento sintético
Ao contrário dos eventos nativos do DOM, os eventos sintéticos são encapsulados em objetos JavaScript chamados “Eventos Sintéticos”. Esses objetos contêm informações normalizadas e métodos úteis que facilitam o manuseio de eventos.
Nota
O padrão de nomenclatura dos eventos sintéticos seguem o padrão camelCase.
// Exemplo de Uso de Evento Sintético
function handleClick(event) {
console.log(event.target.value); // Acesse propriedades normalizadas do evento
}
<button onClick={handleClick}>Clique Aqui</button>Pool de eventos reutilizáveis
Até a versão 16 do React, ele implementava um pool de eventos para reutilização eficiente de objetos de eventos. Isso contribuía para o desempenho, reduzindo a sobrecarga de criação e destruição de objetos de evento a cada interação.
Atualmente estes benefícios não são mais expressivos nos navegadores modernos, então a a partir da versão 17 do React o Event Pooling foi removido.
Diferenças em Relação aos Eventos do DOM:
Objetos imutáveis
Os eventos sintéticos são objetos imutáveis. Isso significa que, uma vez que um evento é disparado, ele não pode ser modificado. No entanto, o React fornece métodos como event.persist() para persistir o evento, permitindo seu acesso mesmo após o término da função de manipulação de eventos.
Pseudo classe SyntheticEvent
Enquanto os eventos do DOM podem ser manipulados diretamente, os eventos sintéticos são instâncias da pseudo classe SyntheticEvent. Essa abstração simplifica o acesso a propriedades normalizadas, como target, currentTarget, preventDefault, entre outras.
// Manipulação de Evento Sintético
function handleInputChange(event) {
console.log(event.target.value);
event.preventDefault(); // Métodos normalizados disponíveis
}
<input type="text" onChange={handleInputChange} />Delegação de eventos
O React favorece a delegação de eventos em vez de anexar manipuladores de eventos a cada elemento individualmente.
// Delegação de Eventos
function handleButtonClick(event) {
if (event.target.tagName === 'BUTTON') {
console.log('Botão clicado!');
}
}
<div onClick={handleButtonClick}>
<button>Botão 1</button>
<button>Botão 2</button>
</div>Normalização automática
Os eventos sintéticos do React realizam a normalização automática de propriedades e métodos, simplificando a interação com eventos em diferentes navegadores. Isso ajuda a evitar comportamentos inesperados causados por diferenças na implementação dos eventos em navegadores diversos.