reactjs - 为什么 onClick 没有显示在 Element 中？

Question

这是我的 react 代码:

<button 
    className="show-all"
    onClick={() => { console.log("button clicked");}}>
    button  
</button>

这是在浏览器中呈现的:

<button class="show-all">button</button>

我很好奇:为什么是onclick丢失的？这不会影响功能，但我只是看不到 onclick 名称。
下面的代码有同样的问题。

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

function shoot(){
  console.log("shoot")
}

function handleClick(e) {
  e.preventDefault();
  console.log('The link was clicked.');
}

class ShowAlert extends Component {
  showAlert() {
    alert("I'm an alert");
  }

  render() {
    return <button onClick={this.showAlert}>show alert</button>;
  }
}

ReactDOM.render(
  <>
    <button onClick={() => console.log("good")}>
      Click 1
    </button>

    <button onClick={shoot}>
      Click 2
    </button>

    <button onClick={handleClick}>
      Click 3
    </button>

    <ShowAlert />
  </>
  ,
  document.getElementById('root')
);

而且我不知道这个小小的不舒服点是否值得讨论。

Answer 1

React 实现了一个 synthetic events为 React 应用程序和界面带来一致性和高性能的系统。它通过规范化事件来实现一致性，以便它们在不同的浏览器和平台上具有相同的属性。
合成事件是围绕浏览器 native 事件的跨浏览器包装器。它与浏览器的 native 事件具有相同的界面，包括 stopPropagation() 和 preventDefault()，但这些事件在所有浏览器中的工作方式相同。
它通过自动使用事件委托(delegate)来实现高性能。实际上， React 不会将事件处理程序附加到节点本身。相反，单个事件监听器附加到文档的根目录。当一个事件被触发时，React 将它映射到适当的组件元素。
资源 - https://blog.logrocket.com/a-guide-to-react-onclick-event-handlers-d411943b14dd/