1:Hooks+控制流
if(...) {
useEffect(() => {
}, [])
}
Hooks是对行为的声明,`if-else` 是分支控制, 不是声明的一部分。 从理论上不应该有声明在控制流之下。在React内部通过Hooks的词法顺序来区分不同的Hook。
2 : Stackoverflow
如果操作不慎,可能会导致StackOverflow。
const [s, setS] = useState(0)
useEffect(() => {
setS(x => x + 1)
}, [s])
3: Effect的注销
如果一个effect中监听了事件,或者发送了请求,但是有时候在事件响应、请求返回后组件已经被销毁了。因此要注意手动注销在effect中使用的资源。
useEffect(() => {
const unsub = editor.on("some-event" ,() => {
})
return () => {
unsub()
}
}, [])
4: 多状态更新
多状态更新时,到底用多个`useState` 还是合并用一个大的呢?
const [money, setMoney] = useState(...)
const [unit, setUnit] = useState(...)
// some click function
setMoney(100)
setUnit("$")
没有必须用多个state还是一个对象,要看具体的场景。 通常一个`useState` 要解决一类问题。
const [products, setProducts] = useState({
page : 0,
list : []
})
const [money, setMoney] ...
5 : 如何在state变化后执行程序
const [s, setS] = useState({...})
// 某个点击事件
setS({...})
// 通知外部
onChange()
有一些操作想要在setState后执行,这些操作可以将他们放到`useEffect` 当中:
const [s, setS] = useState({...})
useEffect(() => {
onChanage(s)
}, [s])
// 某个点击事件
setS({...})
1