常用hooks总结

Posted 2022-11-09 一杯清泉

1、useEffact

参考：https://www.cnblogs.com/guanghe/p/14178482.html

2、useState

作用：更新变量，触发render。

const [loading, setLoading] = useState(true);

当loading变化时候会触发render。

3、useMemo

作用：解决hooks会触发多次无用的渲染问题。如果useMemo(fn, arr)第二个参数匹配，并且其值发生改变，才会多次执行执行，否则只执行一次，如果为空数组[]，fn只执行一次。

举例：

const db = useMemo(() => new Data(dbName), [dbName]); 

当dbName发生变化时候才渲染，否则只渲染一次，每次获取是同一个值。

4、useRef

作用：保存初始化的常量，在整个生命周期内不会变化，并且当更新current值时并不会render ，这是与useState不同的地方。

举例：

（1）定义：

const id = useRef();

（2）设置

onClick(()=>
    id.current = 'xxxxx'
)

（3）获取

const id = chooseList.current.id

5、useCallback

作用：避免函数的多次更新调用。用法与useState的用法基本一致，但最后会返回一个函数，用一个变量保存起来。

举例：

const getUser = useCallback(() =>
    return function()
        
    
, [id])

返回的函数getUser会根据id的变化而变化，如果id始终未发生变化，getUser也不会重新生成。