Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Anti Hook
Search
Mark24
March 25, 2020
Programming
0
68
Anti Hook
You may not need Hook
Mark24
March 25, 2020
Tweet
Share
More Decks by Mark24
See All by Mark24
DSL分享
mark24code
0
110
Rails初探
mark24code
0
42
Git恢复Force Push内容
mark24code
0
57
Other Decks in Programming
See All in Programming
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
1.1k
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
160
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
210
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
3
200
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.8k
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
C++20 射影変換
faithandbrave
0
560
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
880
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
240
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
530
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
840
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Building Applications with DynamoDB
mza
95
6.5k
Music & Morning Musume
bryan
46
6.6k
Automating Front-end Workflow
addyosmani
1370
200k
A Modern Web Designer's Workflow
chriscoyier
694
190k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The World Runs on Bad Software
bkeepers
PRO
69
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building an army of robots
kneath
306
45k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Transcript
你可能不需要Hook @Mark 2020.03.25
Hook 是什么?
https://zh-hans.reactjs.org/docs/hooks-reference.html
None
useState模型 • 官⽅⽤法: https://codesandbox.io/s/react-hooks- demo-1-7lw3p • 简单实现:https://codesandbox.io/s/react-hooks- demo-2-4c92p
None
Flow&内部
None
实现 • 内部链表(理解成列表) ——> 单独储存 • 按顺序读取值,按顺序执⾏ hook (不断地rerender,状态 机)
• 触发更新,和 setState⼀样最后都进⼊ Fiber更新队列
优点 • 跨⽣命周期复⽤代码 • 你可以⾃定义Hook
本质:复⽤代码的尝试 PS:以函数为载体的复⽤
理论上
None
实际上
None
问题0:设计
违反单⼀,KISS原则
None
如果需要你学习很久,那其实 是很是失败的设计。 每个⼈理解的不⼀样。
问题1:可视化阅读
1.Class的⽣命周期,字⾯量划分被打 破。视觉阅读结束。 你需要去看每个函数式组件。 2.他并没有明显区分。
问题2:⼼智负担
1.Hook⾃⼰⽐较难理解 2.useEffect的官⽅介绍就要 70min
1.以前的组件⼼智模型⼀致 现在你需要知道Hook做了什么 你必须熟悉每⼀个Hook。 2.他⽤了什么state,还是context,他⽤了 effect还是什么 3.还有他⾃⼰写的Hook——毕竟这是跨⽣命周 期⾥⾯的复⽤。
问题3:滥⽤?闭包
1.你的代码会收获⼀⼤堆罗列在⼀起 的函 数。 2.看起来像极了C语⾔ 3.OO本身就是为了简化问题,这次反向倒⻋ 4.闭包是复杂的,潜在的内存泄漏
问题4:开发体验差
1.闭包,意味着你可能出现内存泄漏⽽ 不⾃制。轻轻松松写出有问题的代码。 2.⽆限循环之殇:写错了就要重启浏览 器。体验极差
问题5:代码真的少 了?
1.每⼀步都要追踪依赖,优化性 能,真的很麻烦 2.碎⽚化的useState未必真的好
你的开悟瞬间
⼀苇渡江 开悟时刻 技术的平衡游戏 平衡是编程⾥⾯的艺术
Hook也许不是为你准 备的
可能适合组件库 • 纯粹,⼀致性的组件。可以极⼤地发挥其复⽤性。 • 因为纯粹所以写不复杂。每个组件是健壮⽽⾼效的。
也许不适合业务
1.⾸先他不纯粹 2.易变化 3.琐碎且容⻓的业务逻辑 4.相似⼜不相关——并不能很好被复⽤ 5.可读性是业务代码中最重要的
理性拥抱新技术 新技术!==好技术 好技术===经得起时间考验的技术
参考资料 • 《useEffect 完整指南》https://overreacted.io/zh-hans/a- complete-guide-to-useeffect/ • https://github.com/brickspert/blog/issues/26 • https://github.com/donavon/hook-flow