Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
你可能不需要Hook @Mark 2020.03.25
Slide 2
Slide 2 text
Hook 是什么？
Slide 3
Slide 3 text
https://zh-hans.reactjs.org/docs/hooks-reference.html
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
useState模型 • 官⽅⽤法： https://codesandbox.io/s/react-hooks- demo-1-7lw3p • 简单实现：https://codesandbox.io/s/react-hooks- demo-2-4c92p
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Flow&内部
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
实现 • 内部链表（理解成列表） ——> 单独储存 • 按顺序读取值，按顺序执⾏ hook （不断地rerender，状态 机） • 触发更新，和 setState⼀样最后都进⼊ Fiber更新队列
Slide 10
Slide 10 text
优点 • 跨⽣命周期复⽤代码 • 你可以⾃定义Hook
Slide 11
Slide 11 text
本质：复⽤代码的尝试 PS:以函数为载体的复⽤
Slide 12
Slide 12 text
理论上
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
实际上
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
问题0：设计
Slide 17
Slide 17 text
违反单⼀，KISS原则
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
如果需要你学习很久，那其实 是很是失败的设计。 每个⼈理解的不⼀样。
Slide 20
Slide 20 text
问题1：可视化阅读
Slide 21
Slide 21 text
1.Class的⽣命周期，字⾯量划分被打 破。视觉阅读结束。 你需要去看每个函数式组件。 2.他并没有明显区分。
Slide 22
Slide 22 text
问题2：⼼智负担
Slide 23
Slide 23 text
1.Hook⾃⼰⽐较难理解 2.useEffect的官⽅介绍就要 70min
Slide 24
Slide 24 text
1.以前的组件⼼智模型⼀致 现在你需要知道Hook做了什么 你必须熟悉每⼀个Hook。 2.他⽤了什么state，还是context，他⽤了 effect还是什么 3.还有他⾃⼰写的Hook——毕竟这是跨⽣命周 期⾥⾯的复⽤。
Slide 25
Slide 25 text
问题3：滥⽤？闭包
Slide 26
Slide 26 text
1.你的代码会收获⼀⼤堆罗列在⼀起 的函 数。 2.看起来像极了C语⾔ 3.OO本身就是为了简化问题，这次反向倒⻋ 4.闭包是复杂的，潜在的内存泄漏
Slide 27
Slide 27 text
问题4：开发体验差
Slide 28
Slide 28 text
1.闭包，意味着你可能出现内存泄漏⽽ 不⾃制。轻轻松松写出有问题的代码。 2.⽆限循环之殇：写错了就要重启浏览 器。体验极差
Slide 29
Slide 29 text
问题5：代码真的少 了？
Slide 30
Slide 30 text
1.每⼀步都要追踪依赖，优化性 能，真的很麻烦 2.碎⽚化的useState未必真的好
Slide 31
Slide 31 text
你的开悟瞬间
Slide 32
Slide 32 text
⼀苇渡江 开悟时刻 技术的平衡游戏 平衡是编程⾥⾯的艺术
Slide 33
Slide 33 text
Hook也许不是为你准 备的
Slide 34
Slide 34 text
可能适合组件库 • 纯粹，⼀致性的组件。可以极⼤地发挥其复⽤性。 • 因为纯粹所以写不复杂。每个组件是健壮⽽⾼效的。
Slide 35
Slide 35 text
也许不适合业务
Slide 36
Slide 36 text
1.⾸先他不纯粹 2.易变化 3.琐碎且容⻓的业务逻辑 4.相似⼜不相关——并不能很好被复⽤ 5.可读性是业务代码中最重要的
Slide 37
Slide 37 text
理性拥抱新技术 新技术！==好技术 好技术===经得起时间考验的技术
Slide 38
Slide 38 text
参考资料 • 《useEffect 完整指南》https://overreacted.io/zh-hans/a- complete-guide-to-useeffect/ • https://github.com/brickspert/blog/issues/26 • https://github.com/donavon/hook-flow