为什么我们在 ReactJS 中使用合成事件？

在 ReactJS 中，用户使用事件与应用程序 UI 进行交互。 React 在文档级别监听事件，在接收到来自浏览器的事件后，React 用一个与本地浏览器事件具有相似接口的包装器包装这些事件，这有助于我们使用诸如 preventDefault() 之类的方法。

为什么要使用这样的包装器？

因此，我们经常使用不同的浏览器，其中相同的事件具有不同的名称。包装器在这里为相同的事件效果触发所有不同的名称。因此，每当我们在 ReactJS 中触发事件时，我们实际上并不是在尝试触发真正的 DOM 事件，而是使用 ReactJS 自定义事件类型，即合成事件。

合成事件的示例是 onClick()、onBlur() 和 onChange()。这些都不是真正的 DOM 事件，而是反应合成事件。

使用合成事件的好处：

• 跨浏览器应用程序很容易实现。
• 合成事件是 ReactJS 通过合并这些事件对象来重用它们，从而提高性能。

让我们看一个使用合成事件的 ReactJS 应用程序示例。

创建反应应用程序

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app example

第 2 步：创建项目文件夹（即示例）后，使用以下命令移动到该文件夹：

cd example

项目结构：它看起来像这样。

项目结构

示例：在 index.js 和 App.js 文件中写下以下代码。

index.js

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

应用程序.js

import React from "react";
  
function App() {
  
  function handleClick() {
    alert("You clicked me!");
  }
  
  return (
    

      {handleClick()}}>show alert 
    
  );
}
  
export default App;

运行应用程序的步骤：使用以下命令运行应用程序：

npm start

输出：警报事件由 onClick 合成事件包装。

这样，我们在基于 ReactJS 的应用程序中大量使用合成事件。