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|事件处理:如何创建自定义事件?
React Hooks 核心原理与实战
15
15
1.0x
00:00/00:00
0.75x
1.0x
1.25x
1.5x
2.0x
登录
|
注册
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
立即订阅
登录
后留言
精选留言(2)
滚筒洗衣机
老师,会有自定义hook嘛。。 想对其场景和封装加深理解
2021-06-20
喵咪爱吃肉
追番~
作者回复: 一半啦~
2021-06-19
收起评论
2
下载
客户端
返回
顶部