React除了用HOC，你還有其他選擇

緣由

今天看到這個影片：Never Write Another HOC，作者建議不要使用React HOC(Higher-Order-Component)

不要用的原因

• HOC的props如果忘記用<WrappedComponent {…this.props} />，上面傳過來的props就不會往下跑

• props可能會被覆蓋，假如Component掛載的多個HOC同時使用了相同名稱的props就會被覆蓋掉

• 當你Component使用的HOC 很多時，你就會不知道這個props是從哪個HOC過來的，例如上面的範例就無法得知this.props.text是由哪個HOC來的。

React HOC Code

這裡我們建立了一個withMouse的HOC，它提供了滑鼠移動時的座標放到props給掛載的Component使用。

Content Component要使用的時候只需要使用@withMouse掛載起來，就可以從this.props.mouse中取得從HOC傳遞過來的資料，並顯示在畫面上。

不要使用HOC的做法

依照作者的說法，不要使用HOC的話，我們可以使用下面的做法：

首先建立Mouse Component，特別的是使用了{this.props.children(this.state)}將滑鼠移動時的座標傳遞到children中。

Content Component將Mouse Component放到最上層，並且使用mouse參數就可以得到從Mouse Component傳遞過來的滑鼠座標並顯示在畫面上。

總結

React HOC是個很方便的做法，可以替Component的使用提供了相當大的彈性，但是就如同上面作者所述的原因，雖然那些缺點是可以避免的，但是多人一起開發專案時，就無法預期問題什麼時候會爆發。

之前的專案也做了很多HOC，之後的專案應該就會按照作者建議的方法來做囉！