目录
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