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

React 使用合成事件来包装浏览器的原生事件。出于各种性能原因，合成事件在不同浏览器的多个本机事件中被包装和重用。 ReactJS 实现了一个合成事件系统，因为它为 React 应用程序和应用程序 UI 带来了一致性和高性能。它通过规范化原生事件来帮助实现一致性，以便它们在不同的浏览器和平台上具有相同的属性。

主要原因是什么？

跨浏览器支持：通过原生的Event属性包装浏览器的原生事件，提供统一的API和顶级节点级别的一致行为。
应用更好的性能：通过冒泡将事件委托给文档。

让我们创建一个应用程序，看看 Synthetic Events 如何提供跨浏览器支持。

创建反应应用程序：

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

npx create-react-app example

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

cd example

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

文件夹结构

示例：在 index.js、App.js 中写下以下代码。我们知道没有onClick()原生事件。我们将实现它并在不同的浏览器上对其进行测试。

文件名：index.js

Javascript

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')
);
  
// If you want to start measuring performance
// in your app, pass a function to log results
reportWebVitals();

Javascript

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

文件名：App.js

Javascript

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

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

npm start

输出：现在，在不同的浏览器中打开 URL http://localhost:3000/并检查兼容性。

在铬：

镀铬输出

在火狐中：

火狐输出