React Hooks 核心原理与实战
王沛
eBay 中国研发中心资深技术专家
新⼈⾸单¥59.9
1201 人已学习
课程目录
已更新 13 讲 / 共 23 讲
0/2登录后，你可以任选2讲全文学习。
开篇词 (1讲)
开篇词 | 全面拥抱 Hooks，掌握最新 React 开发方式
免费
基础篇 (7讲)
01｜认识 React：如何创建你的第一个 React 应用？
02｜理解 Hooks：React 为什么要发明 Hooks？
03｜内置 Hooks（1）：如何保存组件状态和使用生命周期？
04｜内置 Hooks（2）：为什么要避免重复定义回调函数？
05｜进一步认识 Hooks ：如何正确理解函数组件的生命周期？
06｜自定义Hooks ：四个典型的使用场景
07｜全局状态管理：如何在函数组件中使用 Redux？
实战篇 (5讲)
08｜复杂状态处理：如何保证状态一致性？
答疑解惑01｜如何转换应用React Hooks 的思路？
09｜异步处理：如何向服务器端发送请求？
10｜函数组件设计模式：如何应对复杂条件渲染场景？
11｜事件处理：如何创建自定义事件？
11｜事件处理：如何创建自定义事件？
王沛 2021-06-19
你好，我是王沛。今天我们来聊聊 React 中的事件处理。
我们知道，在 React 中，父子组件的交互是通过 props。这个机制其实是双向的，父组件通过 props 把值传递给子组件，而子组件则通过暴露一些事件，给父组件反馈到一些状态或数据。这两个环节是组件之间通信的基础，所以都需要熟练掌握。
我们前面的课程已经有很多通过 props 从父组件传递参数的子组件的场景了，那么今天这节课，我们就来看看在 React 中事件的机制是怎样的，从原理出发，帮助你深入理解。同时呢，也来学习一下对于自定义事件，一般都有哪些典型的应用场景，帮助你学以致用。
在 React 中使用原生事件
在 React 中进行事件监听的语法，和原生 DOM 事件的写法是非常类似的，都是在一个节点上加一个回调函数的属性来实现。比如下面的方式：
<button onClick={handler}>Hello</button>
在前面的课程中我们已经看到了很多类似的例子。不过还要特别说明一点，对于原生 DOM 的事件，标准的的写法可能是都小写，比如 onclick。但是在 React 中，都是约定使用骆驼体（Camel Case）。
通过这个规律，我们基本上不用刻意去记事件的名称。我们要始终记得，只要原生 DOM 有的事件，在 React 中基本都可以使用，只是写法上采用骆驼体就可以了，比如 onMouseOver、onChange 等。
确认放弃笔记？
放弃后所记笔记将不保留。
新功能上线，你的历史笔记已初始化为私密笔记，是否一键批量公开？
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《React Hooks 核心原理与实战》，如需阅读全部文章，
请订阅文章所属专栏，新⼈⾸单¥59.9
请订阅文章所属专栏，新⼈⾸单¥59.9
立即订阅
登录 后留言
精选留言(2)
滚筒洗衣机
老师，会有自定义hook嘛。。 想对其场景和封装加深理解2021-06-20
喵咪爱吃肉
追番～作者回复: 一半啦~
2021-06-19
收起评论