React官方团队完善原生Hook闭包陷阱

目录
  • 正文
  • useEvent
  • useEvent的实现
  • 与开源Hooks的差异
  • 总结

正文

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

function Chat() {
  const [text, setText] = useState('');
  const onClick = useCallback(() => {
    sendMessage(text);
  }, []);
  return <SendButton onClick={onClick} />;
}

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

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

这就是闭包陷阱

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

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

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

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

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

useEvent

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

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

  • 在组件多次render时保持引用一致
  • 函数内始终能获取到最新的propsstate

上面的例子使用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能否获取到最新的stateprops取决于handlerRef.current更新的时机。

在上面模拟实现中,useEvent更新handlerRef.current的逻辑放在useLayoutEffect回调中进行。

这就保证了handlerRef.current始终在视图完成渲染后再更新:

useLayoutEffect(() =&gt; {
  handlerRef.current = handler;
});

事件回调触发的时机显然在视图完成渲染之后,所以能够稳定获取到最新的stateprops

注:源码内的实际更新时机会更早些,但不影响这里的结论

再来看看ahooks中的useMemoizedFnfnRef.current的更新时机是useMemoizedFn执行时(即组件render时):

function useMemoizedFn<T extends noop>(fn: T) {
  const fnRef = useRef<T>(fn);
  // 更新fnRef.current
  fnRef.current = useMemo(() => fn, [fn]);
  // ...省略代码
}

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

所以useMemoizedFnfnRef.current的更新时机也是不确定的。

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

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

总结

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

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

又比如:useLatestClosure

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

经过本文的分析我们知道,扩大应用场景意味着增加开发者使用时出错的风险,更多关于React Hook闭包陷阱完善的资料请关注我们其它相关文章!

(0)

相关推荐

  • ahooks正式发布React Hooks工具库

    目录 起因 解法 共建 项目目标 品牌升级 社区开源 API 规范 示例演示 开发迭代 下一步 起因 从 React Hooks 正式发布到现在,越来越多的项目正在使用 Function Component 替代 Class Component,Hooks 这一新特性也逐渐被广泛的使用. 然而在实践的过程中,我们发现在很多常见的场景下,大部分逻辑是重复且可被复用的,如对数据请求的逻辑处理,对防抖节流的逻辑处理等,同样的代码经常会在同一个或不同的项目中被重复的编写 . 另一方面,由于 Hooks

  • react hooks闭包陷阱切入浅谈

    目录 引言 1.一个熟悉的闭包场景 2 浅谈hooks原理,理解useEffect 的 “闭包陷阱” 出现原因 2 难道真的要在依赖数组里写上的值,才能拿到新鲜的值? 3 为什么使用useRef能够每次拿到新鲜的值? 4 完毕 引言 首先,本文并不会讲解 hooks 的基本用法, 本文从 一个hooks中 “奇怪”(其实符合逻辑) 的 “闭包陷阱” 的场景切入,试图讲清楚其背后的因果.同时,在许多 react hooks 奇技淫巧的文章里,也能看到 useRef 的身影,那么为什么使用 useR

  • ahooks整体架构及React工具库源码解读

    目录 引言 React hooks utils 库 ahooks 简介 特点 hooks 种类 ahooks 整体架构 项目启动 整体结构 hooks 总结 引言 本文是深入浅出 ahooks 源码系列文章的第一篇,这个系列的目标主要有以下几点: 加深对 React hooks 的理解. 学习如何抽象自定义 hooks.构建属于自己的 React hooks 工具库. 培养阅读学习源码的习惯,工具库是一个对源码阅读不错的选择. 注:本系列对 ahooks 的源码解析是基于 v3.3.13.自己

  • ahooks解决React闭包问题方法示例

    引言 本文是深入浅出 ahooks 源码系列文章的第三篇,这个系列的目标主要有以下几点: 加深对 React hooks 的理解. 学习如何抽象自定义 hooks.构建属于自己的 React hooks 工具库. 培养阅读学习源码的习惯,工具库是一个对源码阅读不错的选择. 注:本系列对 ahooks 的源码解析是基于 v3.3.13.自己 folk 了一份源码,主要是对源码做了一些解读,可见 详情. 系列文章: 大家都能看得懂的源码 ahooks 整体架构篇 如何使用插件化机制优雅的封装你的请求

  • React中10种Hook的使用介绍

    目录 React Hook是什么? React目前提供的Hook 1.useState 2.useEffect & useLayoutEffect 3.useMemo & useCallback 4.useRef 5.useContext 6.useReducer React Hook是什么? React官网是这么介绍的: Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 完全可选的 你无需重写任何已有

  • React Hooks与setInterval的踩坑问题小结

    目录 一.需求 二.解决方案 1.函数式更新 2.使用useRef 3.用useReducer 4.自定义的hooks 一.需求 我们希望有一个每一秒自动+1的定时器 function Counter() { let [count, setCount] = useState(0); useEffect(() => { let id = setInterval(() => { setCount(count + 1); }, 1000); return () => clearInterval

  • React官方团队完善原生Hook闭包陷阱

    目录 正文 useEvent useEvent的实现 与开源Hooks的差异 总结 正文 我们知道,Hooks使用时存在所谓的闭包陷阱,考虑如下代码: function Chat() { const [text, setText] = useState(''); const onClick = useCallback(() => { sendMessage(text); }, []); return <SendButton onClick={onClick} />; } 我们期望点击后s

  • 如何解决React官方脚手架不支持Less的问题(小结)

    说在前面 create-react-app是由 React 官方提供并推荐使用构建新的 React 单页面应用程序的最佳方式,不过目前版本(1.5.x)其构建的项目中默认是不支持动态样式语言Less的.如果我们的项目必须要使用 Less 呢,这就需要我们手动集成一下.本篇主要针对集成的过程做一个简要记录. 环境准备 本小节先用 create-react-app 构建一个全新的 React 项目作为实验环境. 如果您之前未曾使用过 create-react-app,请先通过如下命令全局安装(假定您

  • react合成事件与原生事件的相关理解

    1. 原生事件 原生事件就是js的原生事件,如通过document.addEventListener来设置的监听事件. 在react中即使有自己的一套事件机制(见下面合成事件),但有时候的业务场景我们仍然需要使用原生事件.比如我们封装一个Modal弹窗组件,需要在点击非弹窗区域时关掉弹窗,此时我们只能针对document进行原生点击事件监听. 由于原生事件需要绑定在真实DOM上,所以一般是在componentDidMount阶段或者组件/元素的ref的函数执行阶段进行绑定操作,并且注意要在com

  • React Native与Android 原生通信的方法

    我们用React Native 做混合开发的时候免不了要原生和React Native 进行通信交互,这篇文章就是分享原生模块与JS传递数据的几种方式. 总的步骤可以分为如下几点: 在原生端定义Module类,继承ReactContextBaseJavaModule,在Module类里,定义交互的方法. 定义Package类,继承ReactPackage,将Module实例添加到集合. 在android继承的ReactApplication,回调实现getPackages方法,将Package实

  • react实现自定义拖拽hook

    前沿 最近发现公司的产品好几个模块用到了拖拽功能,之前拖拽组件是通过Html5 drag Api 实现的但体验并不是很好,顺便将原来的拖拽组建稍做修改,写一个自定义hook,方便大家使用拖拽功能. 正文 拖拽功能原理: 1.拖拽元素通过addEventListener监听器添加鼠标按下,鼠标移动,以及鼠标抬起事件.2.再通过getBoundingClientRect() 得到拖拽元素四周相对于可拖拽区域边界的距离.3.鼠标移动时计算x轴和y轴的移动偏移量.4.通过element.style.tr

  • useEvent显著降低Hooks负担的原生Hook

    目录 前言 没有 useEvent 的时候

  • Android原生项目集成React Native的方法

    开发环境准备 首先按照开发环境搭建教程来安装React Native在安卓平台上所需的一切依赖软件(比如npm). 在应用中添加JS代码 在项目的根目录中运行: $ npm init $ npm install --save react react-native $ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig npm init创建了一个空的node模块

  • React中hook函数与useState及useEffect的使用

    目录 1. 简介 2. useState使用 3. useEffect使用 useEffect发起网络请求 1. 简介 在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数组件,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖于类组件来获取数据,处理数据,并向下传递参数给 UI 组件进行渲染.React在v16.8 的版本中推出了 React Hooks 新特性,Hook是一套工具函数的集合,它增强了函数

随机推荐