React组件的工厂功能

Question

我一直在阅读Eric Elliott的一些有关React的文章，以及他如何在工厂函数中包装组件：

• 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）我总是在options对象上传递React ，所以组件不需要导入潜在冲突的React或假设React可以作为全局对象使用。 < -https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375#95b7

2）您可以通过options哈希中的所有组件中继所需的任何内容，所有组件都可以访问它。 <-甚至由您的应用程序共享CSS样式

我不了解的部分是当他说“ 您可能还会注意到该组件对事件侦听器的功能没有任何概念。我在这里使用了一个技巧，可以使该组件真正易于在任何情况下进行测试和重用。应用程序-我将它包装在工厂函数中 。 “

为什么使用模块输出实际组件而不是工厂功能的方法更容易测试和重用？

非常感谢！

Answer 1

这种使用工厂的方法通常是处理依赖项注入（DI）和控制反转（IoC）。

创建组件时，所有依赖关系和行为都是一成不变的。 但是通过这种方法，您可以将它们分开。 您可以创建一个具有相同模板但行为和依赖关系不同的新组件。

开发几乎没有优势，但在测试中将非常有用。 发展中

• 我可以在不同的应用程序中使用同一文件来创建相似的组件，这对于重用来说是双赢。

供测试用

• 我可以通过使用不同版本的react创建组件来测试该组件，并查看差异。
• 我可以传递不同的存根和间谍，而不使用实际的行为。
• 我可以使用服务或依赖项的较新版本，并创建一个仅用于测试的新组件，而无需实际在应用程序中直接为TDD创建。

根据我的理解，这些就是我可以立即想到的一些优点，以及为什么作者推荐这种方法。 但是实际的作者可能也有使用此方法的不同意图。