useState(保存组件状态)
用法:const [state,setState] = useState([]);
useEffect(处理副作用)
Function Component 不存在生命周期,所以不要把Class Component的生命周期概念搬过来试图对号入座。
用法:useEffect(() => {
// effect
return () => {
// cleanup
}
}
),[依赖的状态,空数组表示不依赖]
不要对Dependencies撒谎,如果你明明使用了某个变量,却没有申明在依赖中,等同于向React撒了谎,后果就是当依赖的变量改变时,useEffect也不会再次执行,eslint会报警告。
useCallback(记忆函数)
防止因为组件重新渲染,导致方法被重新创建 ,起到缓存作用; 只有第二个参数 变化了,才重新声明一次
用法:
var
handleClick
=
useCallback
(()
=>
{
console
.
log
(
name
)
},[
name
])
<
button onClick
=
{()
=>
handleClick
()}
>
hello
<
/button>
useMemo(记忆组件)
useCallback 的功能完全可以由
useMemo
所取代,如果你想通过使用
useMemo
返回一个记忆函数也是完全可以的。
用法:
useCallback
(
fn
,
inputs
)
is equivalent to useMemo
(()
=>
fn
,
inputs
).
唯一的区别是:
useCallback
不会执行第一个参数函数,而是将它返回给你,而
useMemo
会执行第一个函数并
且将函数执行结果返回给你。
所以在前面的例子中,可以返回
handleClick
来达到存储函数的目的。
所以
useCallback
常用记忆事件函数,生成记忆后的事件函数并传递给子组件使用。而
useMemo
更适合经过函数
计算得到一个确定的值,比如记忆组件。
useRef(保存引用值)
用法:
const
myswiper
=
useRef
(
null
);
<
Swiper ref
=
{
myswiper
}
/>
useReducer
和
useContext(
减少组件层级
)
useReducer 与 useContext 连用。
自定义
hooks
当我们想在两个函数之间共享逻辑时,我们会把它提取到第三个函数中。
必须以“use”
开头吗?必须如此。这个约定非常重要。不遵循的话,由于无法判断某个函数是否包含对其内部
Hook的调用,React
将无法自动检查你的
Hook
是否违反了
Hook
的规则