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