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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Mark24
March 25, 2020
Programming
0
74
Anti Hook
You may not need Hook
Mark24
March 25, 2020
Tweet
Share
More Decks by Mark24
See All by Mark24
DSL分享
mark24code
0
120
Rails初探
mark24code
0
43
Git恢复Force Push内容
mark24code
0
66
Other Decks in Programming
See All in Programming
例外処理とどう使い分ける?Result型を使ったエラー設計 #burikaigi
kajitack
16
5.8k
KIKI_MBSD Cybersecurity Challenges 2025
ikema
0
1.2k
Vibe Coding - AI 驅動的軟體開發
mickyp100
0
160
AI前提で考えるiOSアプリのモダナイズ設計
yuukiw00w
0
220
実は歴史的なアップデートだと思う AWS Interconnect - multicloud
maroon1st
0
350
副作用をどこに置くか問題:オブジェクト指向で整理する設計判断ツリー
koxya
1
550
Unicodeどうしてる? PHPから見たUnicode対応と他言語での対応についてのお伺い
youkidearitai
PRO
0
970
ThorVG Viewer In VS Code
nors
0
750
AI Schema Enrichment for your Oracle AI Database
thatjeffsmith
0
140
Combinatorial Interview Problems with Backtracking Solutions - From Imperative Procedural Programming to Declarative Functional Programming - Part 2
philipschwarz
PRO
0
150
GISエンジニアから見たLINKSデータ
nokonoko1203
0
190
SourceGeneratorのススメ
htkym
0
160
Featured
See All Featured
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
230
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
150
Prompt Engineering for Job Search
mfonobong
0
150
[SF Ruby Conf 2025] Rails X
palkan
0
720
GraphQLとの向き合い方2022年版
quramy
50
14k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
240
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
900
Visualization
eitanlees
150
16k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
1.1k
New Earth Scene 8
popppiees
1
1.4k
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