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

更新日期: 2022-05-06阅读: 1.1k标签: Hook

大家好,我卡颂。

我们知道,Hooks使用时存在所谓的「闭包陷阱」,考虑如下代码

function Chat() {
  const [text, setText] = useState('');

  const onClick = useCallback(() => {
    sendMessage(text);
  }, []);

  return <SendButton onClick={onClick} />;
}

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

然而实际上,由于回调函数被useCallback缓存,形成闭包,所以点击的效果始终是sendMessage('')。

这就是「闭包陷阱」。

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

const onClick = useCallback(() => {
  sendMessage(text);
}, [text]);

但是这么做了后,每当依赖项(text)变化,useCallback会返回一个全新的onClick引用,这就失去了useCallback「缓存函数引用」的作用。

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

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

useEvent

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

他用于定义一个函数,这个函数有2个特性:

  1. 在组件多次render时保持引用一致。
  2. 函数内始终能获取到最新的props与state。

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

function Chat() {
  const [text, setText] = useState('');

  const onClick = useEvent(() => {
    sendMessage(text);
  });

  return <SendButton onClick={onClick} />;
}

在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的差异

很多开源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<T extends noop>(fn: T) {
  const fnRef = useRef<T>(fn);
  // 更新fnRef.current
  fnRef.current = useMemo(() => fn, [fn]);
  // ...省略代码
}

当React18启用「并发更新」后,组件render的次数、时机并不确定。

所以useMemoizedFn中fnRef.current的更新时机也是不确定的。

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

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

总结

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

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


又比如:useLatestClosure:


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

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

来源: 魔术师卡颂

链接: https://www.fly63.com/article/detial/11455

分享 10 个可以使用 Vue.js 制作的有用的自定义钩hook

Vue.js 是我使用的第一个 JavaScript 框架。 我可以说 Vue.js 是我进入 JavaScript 世界的第一扇门之一。 目前,Vue.js 仍然是一个很棒的框架。 我认为有了组合 API,Vue.js 只会增长得更多

pytest插件探索——hook开发

conftest.py可以作为最简单的本地plugin调用一些hook函数,以此来做些强化功能。pytest整个框架通过调用如下定义良好的hooks来实现配置,收集,执行和报告这些过程:

React中useState Hook 示例

到 React 16.8 目前为止,如果编写函数组件,然后遇到需要添加状态的情况,咱们就必须将组件转换为类组件。编写 class Thing extends React.Component,将函数体复制到render()方法中,修复缩进,最后添加需要的状态。

useContext Hook 是如何工作的?

所有这些新的React Hook之间都有一个宗旨:就是为了使函数组件像类组件一样强大。useContext hook 与其它几个有点不一样,但它在特定场景下还是很有用的。React 的 Context API 是一种在应用程序中深入传递数据的方法

结合React的Effect Hook分析组件副作用的清除

我们在DidMount的时候通过ID订阅了好友的在线状态,并且为了防止内存泄漏,我们需要在WillUnmount清除订阅,但是当组件已经显示在屏幕上时,friend prop 发生变化时会发生什么?

结合高阶函数聊聊useMemo和useCallback

useCallback和useMemo是其中的两个 hooks,本文旨在通过解决一个需求,结合高阶函数,深入理解useCallback和useMemo的用法和使用场景。 之所以会把这两个 hooks 放到一起说,是因为他们的主要作用都是性能优化

关于为什么使用React新特性Hook的一些实践与浅见

Hook是对函数式组件的一次增强,使得函数式组件可以做到class组件的state和生命周期。Hook的语法更加简练易懂,消除了class的生命周期方法导致的重复逻辑代码,解决了高阶组件难以理解和使用困难的问题。

React封装强业务hook的一个例子

最近因为使用列表展示的需求有点多,就想着把列表分页筛选的逻辑抽象一下。看了umi的一个useTable的hook,也不能满足业务需要,于是就自己写了一个,支持本地分页筛选和接口分页筛选。

实现一个自定义 React Hook:UseLocalStorageState

最近做需求,需要将数据保存到 localStorage 里,在组件初始化的时候获取,然后修改该值的时候,要保存到本地的 localStorage 中。很显然,这些逻辑完全可以封装为一个 React Hook

为什么Hook没有ErrorBoundary?

在很多全面使用Hooks开发的团队,唯一使用ClassComponent的场景就是使用ClassComponent创建ErrorBoundary。可以说,如果Hooks存在如下两个生命周期函数的替代品,就能全面抛弃ClassComponent了:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!