從 useEffect 看 React、Vue 設計理念的不同

大家好，我卡頌。

我們知道，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 個生命週期函數：

反觀借鑑了Hooks的Vue Composition API，則同時提供了watchEffect API與不同場景的生命週期函數。

這裏已經體現出兩者設計理念的不同了：

React作爲Facebook爲探索 「UI 開發」 最佳實踐而生的框架，一貫的做法是 —— 保持API穩定（比如this.setState從React誕生伊始就一直存在）。

而Vue則借鑑了各種框架中的最佳實踐（比如虛擬DOM、響應式更新...）。

所以，從易用性上來說，Vue Composition API是一定優於React 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。

總結

到底是提供一個API，但是能覆蓋更多場景（文檔有 6 節來介紹他）好，還是每個場景都提供一個API好？

不同開發者有自己的答案。

但有一點很明確，對於前端新手，React的上手難度會越來越高，而Vue的上手難度會盡可能保持平滑。

這裏的前端新手，可能是想入行前端的新人，也可能是覺得 「前端我也能幹」 的後端。

所以，對於當前的從業者來說，這究竟是好事還是壞事呢？

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/jHBbKUmF6Ka9nQwr5kqOAQ

猜你喜歡