1、useEffect
参考: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也不会重新生成。