继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

大白T_T
关注TA
已关注
手记 56
粉丝 9
获赞 1

课程章节: 第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 。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP