Open susucain opened 3 years ago
请问persistFn定义和赋值为什么要分两行,直接:
const persistFn = useRef<T>(function (...args) {
return fnRef.current!.apply(this, args);
} as T)
有区别吗? 还有,这里不用箭头函数,也不一样吗?
请问persistFn定义和赋值为什么要分两行,直接:
const persistFn = useRef<T>(function (...args) { return fnRef.current!.apply(this, args); } as T)
有区别吗? 还有,这里不用箭头函数,也不一样吗?
不好意思现在才看到。定义赋值可以不分开写的,没有区别,这里我是贴的ahooks
源码😂。用箭头函数会更改函数调用时的this指向,这里只能用function。
usePersistFn
usePersistFn可以持久化function,保证函数地址永远不会变化。
为什么要用usePersistFn?
在
React
官方文档中提到官方给出的demo如下
ExpensiveTree
是一个复杂的子组件,其接受一个props
handleSubmit函数。如果使用useCallback
,由于handleSubmit函数内部使用了text变量,便要写为如下形式:只要text发生变化,
useCallback
接收的内部函数便要重新创建,导致handleSubmit函数的引用地址发生变化。进而引起子组件ExpensiveTree
的重渲染,对性能产生影响。usePersistFn
的目标便是持久化接收的函数,且调用时内部函数引用的变量(上例为text)能获取到实时的值(useCallback
的依赖传空数组也能实现持久化函数,但无法获取实时的值)官方给的demo中更新textRef写在了
useEffect
中,为什么usePersistFn
不这样实现?参见这个issue
如果在子组件的
useEffect
回调函数中调用usePersistFn
就会出现问题。因为渲染时会先执行子组件的useEffect
,后执行父组件自定义hooks的useEffect
。demo参见在useEffect中更新fnRef