¿Por qué usamos eventos sintéticos en ReactJS?

En ReactJS , hay eventos mediante los cuales el usuario interactúa con la interfaz de usuario de una aplicación. React escucha eventos a nivel de documento, después de recibir eventos del navegador, React envuelve estos eventos con un contenedor que tiene una interfaz similar a la del evento del navegador local, lo que nos ayuda a usar métodos como preventDefault(). 

¿Por qué usar una envoltura de este tipo?

Entonces, a menudo usamos diferentes navegadores donde el mismo evento tiene diferentes nombres. Aquí, el envoltorio activa todos los nombres diferentes para el mismo efecto de evento. Por lo tanto, cada vez que activamos un evento en un ReactJS, en realidad no intentamos activar el evento DOM real, sino que usamos el tipo de evento personalizado de ReactJS, que es el evento sintético.

Los ejemplos de eventos sintéticos son onClick(), onBlur() y onChange(). Todos estos no son eventos DOM reales, sino eventos sintéticos de reacción.

Beneficios de usar eventos sintéticos:

• Las aplicaciones de navegador cruzado son fáciles de implementar.
• Los eventos sintéticos consisten en que ReactJS reutiliza estos objetos de eventos, agrupándolos, lo que aumenta el rendimiento.

Veamos un ejemplo de una aplicación ReactJS que usa eventos sintéticos.

Creación de la aplicación React

Paso 1 : Cree una aplicación React usando el siguiente comando:

npx create-react-app example

Paso 2 : después de crear la carpeta de su proyecto, es decir, un ejemplo, muévase a ella con el siguiente comando:

cd example

Estructura del proyecto: Se verá así.

Estructura del proyecto

Ejemplo: Escriba el siguiente código en los archivos index.js y App.js.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
  
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
  
reportWebVitals();

import React from "react";
  
function App() {
  
  function handleClick() {
    alert("You clicked me!");
  }
  
  return (
    <div style={{
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      height: "100vh"
        
    }}>
     <button onClick={() => {handleClick()}}>show alert </button>
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación : Ejecute la aplicación usando el siguiente comando:

npm start

Salida: el evento de alerta se envuelve con el evento sintético onClick.
 

De esta manera, usamos mucho los eventos sintéticos en nuestra aplicación basada en ReactJS.