探索Vue高階元件

阿新 • • 發佈：2020-07-21

探索Vue高階元件

高階元件(HOC)是 React 生態系統的常用詞彙，React 中程式碼複用的主要方式就是使用高階元件，並且這也是官方推薦的做法。而 Vue 中複用程式碼的主要方式是使用 mixins，並且在 Vue 中很少提到高階元件的概念，這是因為在 Vue 中實現高階元件並不像 React 中那樣簡單，原因在於 React 和 Vue 的設計思想不同，但並不是說在 Vue 中就不能使用高階元件，只不過在 Vue 中使用高階元件所帶來的收益相對於 mixins 並沒有質的變化。本篇文章主要從技術性的角度闡述 Vue 高階元件的實現，且會從 React 與 Vue 兩者的角度進行分析。

從 React 說起

起初 React 也是使用 mixins 來完成程式碼複用的，比如為了避免元件不必要的重複渲染我們可以在元件中混入 PureRenderMixin：

const PureRenderMixin = require('react-addons-pure-render-mixin')
const MyComponent = React.createClass({
  mixins: [PureRenderMixin]
})

後來 React 拋棄了這種方式，進而使用 shallowCompare：

const shallowCompare = require('react-addons-shallow-compare')
const Button  
= React.createClass({
  shouldComponentUpdate: function(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }
})

這需要你自己在元件中實現 shouldComponentUpdate 方法，只不過這個方法具體的工作由 shallowCompare 幫你完成，即淺比較。

再後來 React 為了避免開發者在元件中總是要寫這樣一段同樣的程式碼，進而推薦使用 React.PureComponent，總之 React 在一步步的脫離 mixins

，他們認為 mixins 在 React 生態系統中並不是一種好的模式(注意：並沒有說 mixins 不好，僅僅針對 React 生態系統)，觀點如下：

1、mixins 帶來了隱式依賴
2、mixins 與 mixins 之間，mixins 與元件之間容易導致命名衝突
3、由於 mixins 是侵入式的，它改變了原元件，所以修改 mixins 等於修改原元件，隨著需求的增長 mixins 將變得複雜，導致滾雪球的複雜性。

具體大家可以檢視這篇文章 Mixins Considered Harmful。不過 HOC 也並不是銀彈，它自然帶來了它的問題，有興趣的同學可以檢視這個視訊：Michael Jackson - Never Write Another HoC，其觀點是：使用普通元件配合 render prop 可以做任何 HOC 能做的事情。

本篇文章不會過多討論 mixins 和 HOC 誰好誰壞，就像技術本身就沒有好壞之分，只有適合不適合。難道 React 和 Vue 這倆哥們兒不也是這樣嗎

探索Vue高階元件