【九月打卡】第14天 2022升级 React18+TS高仿AntD从零到一打造组件库

课程名称：2022升级 React18+TS高仿AntD从零到一打造组件库

课程章节： 第6章 更上一层楼 - 完成 Menu 组件

主讲老师：张轩

课程内容：

今天学习的内容包括：

6-7 功能继续升级 - SubMenu 下拉菜单编码第一部分
6-8 添加交互 - SubMenu下拉菜单编码第二部分
6-9 大功告成 - SubMenu 下拉菜单编码第三部分

课程收获：

一、概念介绍
React合成事件是React 模拟原生DOM事件所有能力 的一个事件对象。
根据 W3C规范 来定义合成事件，兼容所有浏览器，拥有与浏览器原声事件相同的接口。

合成事件除了拥有和浏览器原生事件相同的接口，包括stopPropagetion()和preventDefault()；

⚠️ 在React中，所有事件都是合成的，不是原生DOM事件，可以通过 e.nativeEvent 属性获取原生DOM事件。合成事件不会映射到原生事件；例如：在onMouseLeave事件中event.nativeEvent 将指向mouseout 事件；

二、为什么出现这个技术？
浏览器兼容，实现更好的跨平台
顶层事件代理机制：保证冒泡一致性，可以跨浏览器执行。将不同平台事件模拟成合成事件；

避免垃圾回收
React引入事件池，在事件池中获取或释放事件对象；
React事件对象不会被释放掉，而是存入一个数组中；当事件触发，就从这个数组中弹出，避免频繁地创建和销毁（垃圾回收）；

方便事件统一管理和事务机制

四、合成事件和原生事件的区别
命名方式不同
原生：onclick（纯小写）
React：onClick（小驼峰）
事件处理函数写法不同
原生事件处理函数为字符串，React JS·X语法中，传入一个函数作为事件处理函数

// 原生事件 事件处理函数写法
<button onclick="handleClick()">Leo 按钮命名</button>
// React 合成事件 事件处理函数写法
const button = <button onClick={handleClick}>Leo 按钮命名</button>

阻止默认行为方式的不同
原生事件：通过返回false 方式阻止默认行为；
React：显式使用preventDefault() 方法阻止；比如阻止标签默认打开新页面为例；

// 原生事件阻止默认行为方式
<a href="https://www.pingan8787.com" 
  onclick="console.log('Leo 阻止原生事件~'); return false"
>
  Leo 阻止原生事件
</a>

// React 事件阻止默认行为方式
const handleClick = e => {
  e.preventDefault();
  console.log('Leo 阻止原生事件~');
}
const clickElement = <a href="https://www.pingan8787.com" onClick={handleClick}>
  Leo 阻止原生事件
</a>

事件处理器返回false时，不阻止事件传递；可以考虑调用e.stopPropagation() 和 e.preventDefault() 。
支持的事件：
如果需要注册捕获阶段的事件处理函数，应该为事件名添加Capture ；例如：处理捕获阶段的点击事件请使用 onClickCapture 而不是 onClick 。