从useEffect看React、Vue设计理念的不同

公众号@魔术师卡颂

发布于 2022-11-22 14:41:31

1.6K0

发布于 2022-11-22 14:41:31

文章被收录于专栏：魔术师卡颂魔术师卡颂

大家好，我卡颂。

我们知道，React发布Hooks后，带来了业界一波Hooks热。很多框架（比如Vue Composition API、Solid.js）都借鉴了Hooks的模式。

但是，即使这些框架都借鉴了Hooks，但由于框架作者的理念不同，发展方向也逐渐不同。

比如，在Vue Composition API中，对标React useEffect API的是watchEffect，在Vue文档中，有一小段内容介绍他的用法：

而在React beta文档中，介绍useEffect的，则有整整6节内容：

为什么会有这样的区别？让我们从useEffect看看React、Vue设计理念的不同。

Vue与React的差异

当Hooks刚问世时，他被看作是类组件的替代方案。文档中介绍Hooks时也是将他与类组件对比。

其中useEffect的执行时机囊括了如下3个生命周期函数：

componentDidMount
componentDidUpdate
componentWillUnmount

反观借鉴了Hooks的Vue Composition API，则同时提供了watchEffect API与不同场景的生命周期函数。

这里已经体现出两者设计理念的不同了：

React作为Facebook为探索「UI开发」最佳实践而生的框架，一贯的做法是 —— 保持API稳定（比如this.setState从React诞生伊始就一直存在）。

而Vue则借鉴了各种框架中的最佳实践（比如虚拟DOM、响应式更新...）。

所以，从易用性上来说，Vue Composition API是一定优于React Hooks的，比如：

Hooks不能在条件语句中声明
Hooks必须显式指明依赖

并且，这种易用性的差异会随着框架迭代，愈发明显。

useEffect会越来越复杂

本着「保持API稳定」的原则，当前useEffect主要与上述三个生命周期函数相关。

但是，未来会有更多触发时机与useEffect挂钩。

所以，React团队在努力做一件事 —— 淡化useEffect与生命周期的关系，甚至淡化useEffect与组件的关系（因为当谈到组件时，很自然的会想到组件生命周期）。

怎么淡化呢？答案是 —— 在严格模式下，DEV环境会触发多次useEffect回调。

如果你将useEffect当作componentDidMount/WillUnmount来用，这个特性很可能让你的代码出bug。

React团队之所以这么做，就是想教育开发者 —— useEffect和生命周期没有关系。开发者应该将useEffect看作「针对某个数据源的同步过程」。

比如，下述聊天室组件，其中的useEffect可以看作是「针对聊天室连接的同步过程」：

const serverUrl = 'https://localhost:1234';

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [roomId]);
  // ...
}

当聊天室组件mount、update、unmount时，对应的同步过程应该进行。

当roomId变化时，对应的同步过程应该进行。

同理，如果React原生支持了Vue中的KeepAlive，那么当聊天室组件从「可见」变为「不可见」，以及从「不可见」变为「可见」状态，同步过程都应该进行。

所以，当我们从「同步过程应该何时进行」的角度看待useEffect时，上述useEffect触发时机都是合理的。

但是，如果从生命周期函数的角度看待useEffect，等未来（可能是v18的某个版本），Offscreen Component特性落地（对标Vue中的KeepAlive），组件从「可见」变为「不可见」状态时，useEffect销毁函数与useEffect回调函数会依次执行，就会让人很头大。

这就是为什么，我上文说，React团队一直在淡化useEffect与生命周期的关系，甚至淡化useEffect与组件的关系。

一切都是为了「未来其他特性与useEffect的挂钩」打下理论基础。而这些特性从「组件」或「生命周期函数」的角度讲不通。

这也是为什么在新文档里有6节内容与useEffect相关的原因。

作为对比，Vue在遇到新的场景时会怎么做呢？显然是设计新的API。