Javascript React组件的工厂功能

我一直在阅读Eric Elliott关于React以及他如何在工厂功能中包装组件的文章：

---

• 这种使用工厂的方法通常是处理依赖注入（DI）和控制反转（IoC）
  当您创建一个组件时，所有的依赖关系和行为都是一成不变的。但是，通过这种方法，您的目标将被分离出来。您可以创建一个新组件，该组件将具有相同的模板，但具有不同的属性和依赖项
  在开发中几乎没有优势，但在测试中这将非常有用。 发展中
  • 我可以在不同的应用程序中使用相同的文件来创建类似的组件，这对于重用来说是一个巨大的双赢
  用于测试
  • 我可以通过使用不同版本的react创建组件来测试该组件，并查看差异
  • 我可以通过不同的存根和间谍，而不是使用实际的行为
  • 我可以使用更新版本的服务或依赖项，创建一个新组件用于测试，而不需要直接在应用程序中创建TDD
  据我所知，这些是我可以立即想到的一些优点，以及作者推荐这种方法的原因。但实际作者也可能有不同的意图来使用这种方法

  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