React官方团队出手，补齐原生Hook短板

大家好，队出k短我卡颂。手补生

我们知道，齐原Hooks使用时存在所谓的队出k短「闭包陷阱」，考虑如下代码：

function Chat() {

const [text,手补生 setText] = useState();

const onClick = useCallback(() => {

sendMessage(text);

}, []);

return ;

我们期望点击后sendMessage能传递text的最新值。

然而实际上，齐原由于回调函数被useCallback缓存，队出k短形成闭包，手补生所以点击的齐原效果始终是sendMessage()。

这就是队出k短「闭包陷阱」。

以上代码的手补生一种解决方式是「为useCallback增加依赖项」：

const onClick = useCallback(() => {

sendMessage(text);

但是这么做了后，每当依赖项(text)变化，齐原useCallback会返回一个全新的队出k短onClick引用，这就失去了useCallback「缓存函数引用」的手补生作用。

「闭包陷阱」的齐原出现，加大了Hooks的上手门槛，也让开发者更容易写出有bug的代码。

现在，React官方团队要出手解决这个问题。

解决方式是引入一个新的亿华云原生Hook —— useEvent。

他用于定义一个函数，这个函数有2个特性：

上面的例子使用useEvent改造后：

function Chat() {

const [text, setText] = useState();

const onClick = useEvent(() => {

sendMessage(text);

});

return ;

在Chat组件多次render时，onClick始终指向同一个引用。

并且onClick触发时始终能获取到text的最新值。

之所以叫useEvent，是因为React团队认为这个Hook的主要应用场景是：「封装事件处理函数」。

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)。IT技术网

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的更新时机也是不确定的云南idc服务商。

这就增加了在「并发更新」下使用时潜在的风险。

可以说，useEvent通过限制handlerRef.current更新时机，进而限制应用场景，最终达到稳定的目的。

useEvent当前还处于RFC(Request For Comments)[1]阶段。

很多热心的开发者对这个Hook的命名提出了建议，比如：useStableCallback：

又比如：useLatestClosure：

从这些命名看，他们显然扩大了useEvent的应用场景。

经过本文的分析我们知道，「扩大应用场景」意味着「增加开发者使用时出错的风险」。

[1]RFC(Request For Comments):

https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md。

最新评论