目录
Hook解决的问题
需要为function组件添加state，但不想重写function组件为class组件时使用Hook真香～
先决认知：function组件与class组件的区别
组件预编译
class方案可能带来的问题：
1、不能很好压缩；
2、热重载不稳定；
3、不易于优化。
已有Hook（典型）
1、useState
- 推荐使用时机：为函数组件增加state，避免重写函数组件为类组件
- state更新特点：与setState不同的是，hook更新state是 r e p l a c e \color{red}{replace} replace而非merge
2、useEffect（两种模式）
(1) Effects Without Cleanup
-
scene：需要在react更新DOM之后运行一些额外的code。
-
class components：render方法不应该造成side effects，时间过早。通常我们期望在react更新DOM后执行effects。所以class components中我们将side effects放在componentDidMount和componentDidUpdate。
-
需求： 每 次 r e n d e r 触 发 \color{red}{每次render触发} 每次render触发。
-
现状：class components无相应功能方法。提取方法后仍需要在componentDidMount 和 componentDidUpdate调用两次。
-
现有解决方案：useEffect（将组件内相关的副作用组织在一起，避免拆分到不同的生命周期）。
-
其他可应用场景：data fetching, and so on。
-
我care的问题点：
a: Why is useEffect called inside a component?
—— 及时获取changes（无需单独的API）；
—— hooks包含js闭包，避免在js已经提供解决方法的地方引入特殊的react API；b: Does useEffect run after every render?
——YES！
(2) Effects With Cleanup
- scene: 某些情况下我们需要对外部的数据进行subscription，此类情况为避免memory leak，cleanup尤为重要。
- class components: componentDidMount里订阅，componentWillUnmount里卸载, Hook一次搞定。
-
使
用
注
意
\color{red}{使用注意}
使用注意：需要return.
Hook使用
- 禁 用 地 方 \color{red}{禁用地方} 禁用地方：loop、conditions、nested functions.
- 集中更新逻辑仍然建议使用redux reducer，但可将reducer也封装成Hook（官方useReducer）。
关于自定义Hook
自定义hook使用一种重用有状态逻辑机制（
a
m
e
c
h
a
n
i
s
m
t
o
r
e
u
s
e
s
t
a
t
e
f
u
l
l
o
g
i
c
\color{red}{a mechanism to reuse stateful logic}
amechanismtoreusestatefullogic），所有state、effects都是孤立的（isolated）。
官方Hook🔗
- Basic Hooks
- Additional Hooks
997
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
