2-2-7 React 几个用Hooks的小技巧

Posted 2022-05-11 沿着路走到底

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