大家好，我是Kason。我们知道，React发布Hooks之后，在业界掀起了一股Hooks热潮。许多框架（如VueCompositionAPI、Solid.js）都借鉴了Hooks模型。不过，尽管这些框架都借鉴了Hooks，但由于框架作者的思路不同，发展方向也逐渐不同。例如，在VueCompositionAPI中，watchEffect是ReactuseEffectAPI的基准。在Vue文档中，有一个简短的部分介绍了它的用法：而在Reactbeta文档中，有6个完整的部分介绍了useEffect：为什么会有这样的差异？我们从useEffect来看React和Vue设计理念的区别。Vue和React的区别当Hooks刚出来的时候，它被看作是类组件的替代品。文档中介绍Hooks时，也将其与类组件进行了对比。useEffect的执行时机包括以下三个生命周期函数：componentDidMountcomponentDidUpdatecomponentWillUnmount相比之下，Hooks的VueCompositionAPI是借鉴，同时提供了不同场景的watchEffectAPI和生命周期函数。两者在设计理念上的差异在这里已经有所体现：React作为Facebook创建的一个框架，旨在探索“UI开发”的最佳实践，一贯的做法是保持API的稳定（例如this.setState诞生于React从一开始就存在）。而Vue借鉴了各种框架的最佳实践（例如虚拟DOM、响应式更新...）。因此，在易用性方面，VueCompositionAPI绝对优于ReactHooks，例如：Hooks不能在条件语句中声明。挂钩必须明确指示依赖关系。而且，随着框架的迭代，这种易用性的差异会越来越明显。useEffect会变得越来越复杂。本着“保持API稳定性”的原则，目前的useEffect主要与以上三个生命周期函数相关。不过以后useEffect关联的触发机会会更多。所以，React团队正在努力做一件事——淡化useEffect和生命周期的关系，甚至淡化useEffect和组件的关系（因为说到组件，很自然地会想到组件生命周期）。怎么稀释呢？答案是——严格模式下，DEV环境会触发多次useEffect回调。如果您将useEffect用作??componentDidMount/WillUnmount，此功能很可能会导致您的代码出现错误。React团队之所以这样做，是为了教育开发者——useEffect与生命周期无关。开发者应该把useEffect看成是“对某个数据源的一个同步过程”。例如，在下面的聊天室组件中，useEffect可以看作是一个“聊天室连接的同步过程”：constserverUrl='https://localhost:1234';functionChatRoom({roomId}){useEffect(()=>{constconnection=createConnection(serverUrl,roomId);connection.connect();return()=>{connection.disconnect();};},[roomId]);//...}作为聊天室组件在挂载、更新或卸载时，要进行相应的同步处理。当roomId发生变化时，需要进行相应的同步处理。同样，如果React在Vue中原生支持KeepAlive，那么当聊天室组件从“可见”变为“不可见”以及从“不可见”变为“可见”时，应该执行同步过程。因此，当我们从“什么时候应该执行同步过程”的角度来看useEffect时，上述useEffect的触发时机是合理的。但是，如果从生命周期函数的角度来看useEffect，在未来（可能是v18的一个版本），OffscreenComponent特性会落地（相对于Vue中的KeepAlive），组件会从“可见”到“不可见”。Visible”状态下，useEffectdestroy函数和useEffect回调函数会依次执行，这样会很混乱。这就是为什么，正如我上面所说，React团队一直淡化useEffect和生命周期的关系，甚至淡化了useEffect和组件的关系，一切都是为了“以后把其他特性链接到useEffect”打下理论基础。而这些特性从“组件”或“生命周期函数”的角度来看是没有意义的。这就是为什么新文档中有6个部分与useEffect相关。相比之下，Vue遇到新的场景会怎么做呢？显然是在设计新的API。总结一下，是提供一个API更好，但是可以覆盖更多的场景（文档有6段介绍他），还是每个场景都提供一个API更好？不同的开发商有自己的答案。但是有一点很明确，对于前端新手来说，React的上手难度会越来越难，而Vue的上手难度会越顺越好。这里的前端小白，可能是想要进入前端的新人，也可能是认为“我也能做前端”的后端。那么，这对现在的从业者来说是好事还是坏事呢？
