reacthooks的短板，官方终于出手弥补

　　如果你喜欢我的文章，请给个点赞支持一下或关注。
　　我们在使用hooks的时候都会存在闭包陷阱，这是react保证依赖正确的做法。比如以下的代码。functionApp（）｛const〔text，setText〕useState（）；constonClickuseCallback（（）｛sendMessage（text）；｝，〔〕）；returnSendButtononClick｛onClick｝；｝复制代码
　　我们预期是点击onClick能传递text新的值。但是由于useCallback缓存，形成了闭包所以最后你得到结果是sendMessage（）
　　hooks上手容易，但是如果不去思考，也很容易让开发者写出有bug的代码。有时候有些人写的hooks忘了添加依赖导致排除很久。React新hooksuseEvent
　　在官网RC的版本中引入了一个新的hooks，useEvent当前还处于RFC（RequestForComments）阶段。
　　他用于定义一个函数，这个函数有2个特性：在组件多次render时保持引用一致函数内始终能获取到最新的props与state
　　上面的例子使用useEvent改造后：functionApp（）｛const〔text，setText〕useState（）；constonClickuseEvent（（）｛sendMessage（text）；｝）；returnSendButtononClick｛onClick｝；｝复制代码
　　在Chat组件多次render时，onClick始终指向同一个引用。
　　并且onClick触发时始终能获取到text的最新值。
　　之所以叫useEvent，是因为React团队认为这个Hook的主要应用场景是：封装事件处理函数。这将会让我们更好的做DDD领域设计驱动实现
　　useEvent的实现其实也不是很难的。functionuseEvent（handler）｛consthandlerRefuseRef（null）；视图渲染完成后更新handlerRef。current指向useLayoutEffect（（）｛handlerRef。currenthandler；｝）；用useCallback包裹，使得render时返回的函数引用一致returnuseCallback（（。。。args）｛constfnhandlerRef。current；returnfn（。。。args）；｝，〔〕）；｝复制代码官网还处于RC阶段，目前的项目怎么处理呢？
　　从上面的例子来看实现一个useEvent并不难，也有很多开源库实现了类似的功能，比如start最多的hooksahooks就有这么一个hooksuseMemoizedFn。
　　这不过useMemoizedFn定位于缓存各种函数。functionuseMemoizedFnTextendsnoop（fn：T）｛constfnRefuseRefT（fn）；更新fnRef。currentfnRef。currentuseMemo（（）fn，〔fn〕）；。。。省略代码｝复制代码
　　useEvent定位于处理事件回调函数这一单一场景。useLayoutEffect（（）｛handlerRef。currenthandler；｝）；复制代码
　　官方这么做的是为了更加稳定，能否获取到最新的state与props取决于handlerRef。current更新的时机。在上面模拟实现中，useEvent更新handlerRef。current的逻辑放在useLayoutEffect回调中进行。而事件回调触发的时机显然在视图完成渲染之后，所以能够稳定获取到最新的state与props。
　　useMemoizedFn，fnRef。current的更新时机是useMemoizedFn执行时（即组件render时）
　　在React18启用并发更新后，组件render的次数与时间都不确定。有后端并发编程的同学都知道并发是无顺序的。所以导致useMemoizedFn的更新时机也是不确定。从而增加了并发更新下的潜在风险。可以说useEvent通过限制handlerRef。current更新时机，进而限制应用场景，最终达到稳定的目的。
　　作者：傻梦兽
　　链接：https：juejin。cnpost7095195845938642957
　　来源：稀土掘金
　　著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。