工廠函數

Question

我一直在閱讀有關的一些埃裏克·艾略特的文章反應，他如何包裝組件廠功能：

• https://medium.com/javascript-scene/jsx-looks-like-an-abomination-1c1ec351a918 < - JSX看起來像一個憎惡。但它對你有好處
• https://medium.com/javascript-scene/baby-s-first-reaction-2103348eccdd < - 寶寶的第一反應。 React的「Hello，World」示例
• https://medium.com/@_ericelliott/what-do-you-mean-by-does-not-work-could-you-reproduce-the-problem-on-codepen-io-as-i-understand-d24903a14a0 < - 上述文章評論之一。

如果你讀過的一篇文章中，你可能已經看到類似這樣的例子代碼：

const productFactory = ({ React, PropTypes }) => { 

    const Product = (props) => { 

     return { 
      props, 

      render() { 
       const { name, description, price, quantity, _id } = this.props.product 

       return (
        <div className="col-md-4 col-sm-6 col-xs-12 product"> 
         <div className="product-content"> 
          <div className="product-head"> 
           <div className="product-title"> 
            { name } 
           </div> 
           <div className="product-description"> 
            { description } 
           </div> 
          </div> 

          <div className="product-price"> 
           $ { price } 
          </div> 
          <button className="btn-std btn-qty" onClick={() => { this.props.removeProduct(_id) } }>-</button> 
          <span className="qty">{ quantity }</span> 
          <button className="btn-std btn-qty" onClick={() => { this.props.addProduct(_id) } }>+</button> 
         </div> 
        </div> 
       ) 
      } 
     } 
    } 

    Product.propTypes = { 
     product: PropTypes.object.isRequired, 
     addProduct: PropTypes.func.isRequired, 
     removeProduct: PropTypes.func.isRequired, 
    } 

    return Product 
} 

export default productFactory 

這些文章的作者說，關於這個模式：

我出口工廠的所有組件，而不是直接導出組件本身。這有兩個好處：

1）我總是傳遞React在options對象上，所以組件不需要導入潛在衝突React或假設作出反應是作爲一個全球性的。 < - https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375#95b7

2）您可以通過在options哈希所有組件轉發任何你想要的，所有部件將有機會獲得它。 < - 甚至CSS樣式共享您的應用

我不明白的部分是，當他說「您也可能會注意到，組件不具有什麼樣的事件監聽器正在做的任何想法我。使用此一招，使組件很容易測試和重用任何應用程序 - 我把它包在一個工廠函數「

這是爲什麼更容易測試和重用具有模塊輸出的實際組件而不是工廠功能？

非常感謝！

Answer 1

這種使用工廠的方法通常是處理依賴注入（DI）並進行控制反轉（IoC）。

當你創建一個組件時，所有的依賴關係和行爲都被設置爲石頭。但是用這種方法你將他們分離出來。您可以創建一個新的組件，這些組件具有相同的模板，但具有不同的蜂巢和依賴關係。

在開發中沒有什麼優勢，但在測試中這是非常有用的。 在研究與開發

• 我可以用在不同的應用程序同一個文件來創建類似的組件這是一個巨大的雙贏重用。

爲了測試

• 我可以用不同版本的反應，看到了不同的創造它測試組件。
• 我可以通過不同的存根和間諜，而不是使用實際的行爲。
• 我可以使用更新版本的服務或依賴關係，並創建一個新組件直接用於測試，而無需直接在應用程序中創建TDD。

這些是我可以立即想到的一些優點，以及爲什麼作者推薦這種方法，據我瞭解。但實際作者也可能有不同的意圖使用這種方法。