React官方团队出手,补齐原生Hook短板
大家好,我卡颂。
我们知道,Hooks
使用时存在所谓的闭包陷阱,考虑如下代码:
function Chat() {
const [text, setText] = useState('');
const onClick = useCallback(() => {
sendMessage(text);
}, []);
return ;
}
我们期望点击后
sendMessage
能传递text
的最新值。然而实际上,由于回调函数被
useCallback
缓存,形成闭包,所以点击的效果始终是sendMessage('')
。这就是闭包陷阱。
以上代码的一种解决方式是为useCallback增加依赖项:
const onClick = useCallback(() => {
sendMessage(text);
}, [text]);
但是这么做了后,每当依赖项(
text
)变化,useCallback
会返回一个全新的onClick
引用,这就失去了useCallback
缓存函数引用的作用。闭包陷阱的出现,加大了
Hooks
的上手门槛,也让开发者更容易写出有bug
的代码。现在,
React
官方团队要出手解决这个问题。欢迎加入人类高质量前端框架群,带飞
useEvent 解决方式是引入一个新的原生
Hook
—— useEvent
。他用于定义一个函数,这个函数有2个特性:
- 在组件多次
render
时保持引用一致 - 函数内始终能获取到最新的
props
与state
useEvent
改造后:function Chat() {
const [text, setText] = useState('');
const onClick = useEvent(() => {
sendMessage(text);
});
return ;
}
在
Chat
组件多次render
时,onClick
始终指向同一个引用。并且
onClick
触发时始终能获取到text
的最新值。之所以叫
useEvent
,是因为React
团队认为这个Hook
的主要应用场景是:封装事件处理函数。useEvent的实现
useEvent
的实现并不困难,代码类似如下:function useEvent(handler) {
const handlerRef = useRef(null);
// 视图渲染完成后更新`handlerRef.current`指向
useLayoutEffect(() => {
handlerRef.current = handler;
});
// 用useCallback包裹,使得render时返回的函数引用一致
return useCallback((...args) => {
const fn = handlerRef.current;
return fn(...args);
}, []);
}
整体包括两部分:
- 返回一个没有依赖项的
useCallback
,使得每次render
时函数的引用一致
useCallback((...args) => {
const fn = handlerRef.current;
return fn(...args);
}, []);
- 在合适的时机更新
handlerRef.current
,使得实际执行的函数始终是最新的引用
Hooks
库已经实现类似功能(比如ahooks
中的useMemoizedFn
)useEvent
与这些开源实现的差异主要体现在:useEvent
定位于处理事件回调函数这一单一场景,而useMemoizedFn
定位于缓存各种函数。那么问题来了,既然功能类似,那
useEvent
为什么要限制自己的使用场景呢?答案是:为了更稳定。
useEvent
能否获取到最新的state
与props
取决于handlerRef.current
更新的时机。在上面模拟实现中,
useEvent
更新handlerRef.current
的逻辑放在useLayoutEffect
回调中进行。这就保证了
handlerRef.current
始终在视图完成渲染后再更新:useLayoutEffect(() => {
handlerRef.current = handler;
});
而事件回调触发的时机显然在视图完成渲染之后,所以能够稳定获取到最新的
state
与props
。注:源码内的实际更新时机会更早些,但不影响这里的结论再来看看
ahooks
中的useMemoizedFn
,fnRef.current
的更新时机是useMemoizedFn执行时(即组件render时):function useMemoizedFn(fn: T) {
const fnRef = useRef(fn);
// 更新fnRef.current
fnRef.current = useMemo(() => fn, [fn]);
// ...省略代码
}
当
React18
启用并发更新后,组件render
的次数、时机并不确定。所以
useMemoizedFn
中fnRef.current
的更新时机也是不确定的。这就增加了在并发更新下使用时潜在的风险。
可以说,
useEvent
通过限制handlerRef.current
更新时机,进而限制应用场景,最终达到稳定的目的。总结
useEvent
当前还处于RFC(Request For Comments)阶段。很多热心的开发者对这个
Hook
的命名提出了建议,比如:useStableCallback
:文章图片
又比如:
useLatestClosure
:文章图片
从这些命名看,他们显然扩大了
useEvent
的应用场景。经过本文的分析我们知道,扩大应用场景意味着增加开发者使用时出错的风险。
推荐阅读
- react create-react-app 怎么添加sass
- react create-react-app 跨域
- 精品!React面试问题推荐合集
- 在create-react-app 中启用装饰器语法
- 团队冲刺第十四天-KeepRunningAPP
- react使用create-react-app后npm start报错
- 安卓逆向14.Nexus 5 线刷官方镜像root开始系统调试
- ReactNative+TypeScript仿喜马拉雅开发App
- 网上摘录React Native APP性能优化
- 团队冲刺第九天-KeepRunningAPP