三种自定义 hook 的事件封装方式，你会选择哪种？

文章预览

我们经常通过自定义 hook 的方式抽离组件的逻辑，而这种自定义 hook 里很多都是给元素绑定事件的。 绑定事件的写法一共有三种，我们一起来过一遍。 首先是 useHover 的 hook： import  useHover  from   './useHover' ; const  App =  ()  =>  {    const  element =  ( hovered: boolean ) =>      < div >       Hover me! {hovered  & &  'Thanks'}      div > ;    const  [hoverable, hovered] = useHover(element);    return  (      < div >       {hoverable}        < div > {hovered ? 'HOVERED' : ''} div >      div >   ); }; export   default  App; 浏览器只有 mouseover、mouseleave 事件，封装成 hover 的 hook 还是挺有意义的。 这个 hook 接收 React Element 作为参数，绑定事件后返回。 这样实现的： import  { cloneElement, useState }  from   "react" ; export  type Element =  ( (state: boolean ) =>  React.ReactElement) | React.Rea ………………………………