Composition API 與 React Hook 很像,區別是什么?
從 React Hook 的實現角度看,React Hook 是根據 useState 調用的順序來確定下一次重渲染時的 state 是來源于哪個 useState,所以出現了以下限制:
- 不能在循環、條件、嵌套函數中調用 Hook;
- 必須確??偸窃谀愕?React 函數的頂層調用 Hook;
- useEffect、useMemo 等函數必須手動確定依賴關系。
而 Composition API 是基于 Vue 的響應式系統實現的,與 React Hook 的相比:
- 聲明在 setup 函數內,一次組件實例化只調用一次 setup,而 React Hook 每次重渲染都需要調用 Hook,使得React 的 GC 比 Vue 更有壓力,性能也相對于 Vue 來說也較慢;
- Compositon API 的調用不需要顧慮調用順序,也可以在循環、條件、嵌套函數中使用;
- 響應式系統自動實現了依賴收集,進而組件的部分的性能優化由 Vue 內部自己完成,而 React Hook 需要手動傳入依賴,而且必須保證依賴的順序,讓 useEffect、useMemo 等函數正確的捕獲依賴變量,否則會由于依賴不正確使得組件性能下降。
雖然 Compositon API 看起來比 React Hook 好用,但是其設計思想也是借鑒 React Hook 的。

浙公網安備 33010602011771號