为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第14天 2022升级...

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

2022.09.18 21:59 48浏览

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

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
2
获赞与收藏
1

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消