新内置Hook--useEvent

[AnathanPham]

背景

在很早的时候，Dan就发布了RFC打算推出一个新的hook--useEvent。
useEvent的背景是，因为useCallback总是需要添加依赖数组，这在一些场景下会导致一些不必要的render。而useEvent不需要依赖数组，总是能够执行最新的回调函数。
社区进行很很多的讨论，最终，在React中加入了useEvent。

在官方发起useEvent RFC之前，社区中已经有了很多类似的实现，如ahooks中的useMemoizedFn。
如今的useEvent和useMemoizedFn的核心原理是相同的--利用闭包包装回调函数，ref保存包装函数的引用，再返回包装函数。

使用

它的使用方式和useMemoizedFn一样。

import React, { Component, experimental_useEvent as useEvent } from "react"

export default function Foo() {
  const handleClick = useEvent(() => {
    alert("hello!")
  })
  return <button onClick={handleClick}>click me!</button>
}

原理

useEvent是React内置的hook。
useEvent和其他内置hook一样，将状态保存在Fiber中。
useEvent利用闭包包装回调函数，ref保存包装函数的引用，再返回包装函数。

挂载阶段:
https://github.com/facebook/react/blob/7583f13ef6a1db8ab6f714c7d1e16fb56eba7f08/packages/react-reconciler/src/ReactFiberHooks.new.js#L1874-1899
更新阶段:
https://github.com/facebook/react/blob/7583f13ef6a1db8ab6f714c7d1e16fb56eba7f08/packages/react-reconciler/src/ReactFiberHooks.new.js#L1901-1915

值得注意的是: useEvent的更新（更新闭包中目标回调函数的引用）时机和useEffect相同。这是不同于useMemoizedFn在render阶段更新的。