Question

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

SingleOrDefault() vs FirstOrDefault()＆lt; - JSX看起来像一个憎恶。但它对你有好处
https://medium.com/javascript-scene/jsx-looks-like-an-abomination-1c1ec351a918＆lt; - 宝贝的第一反应。 React的“Hello，World”示例
https://medium.com/javascript-scene/baby-s-first-reaction-2103348eccdd＆lt; - 上述文章评论之一。

如果您已阅读其中一篇文章，那么您可能会看到与此类似的示例代码：

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或假设React可用作全球。＆lt; - https://medium.com/@_ericelliott/what-do-you-mean-by-does-not-work-could-you-reproduce-the-problem-on-codepen-io-as-i-understand-d24903a14a0

2）您可以通过options哈希中的所有组件转发您想要的任何内容，并且所有组件都可以访问它。＆lt; - 甚至是应用程序的CSS共享样式

我不能得到的部分是当他说＆＃34; 你可能也注意到该组件没有关于事件监听器正在做什么的任何概念。我在这里使用了技巧，使组件在任何应用程序中都非常容易测试和重用 - 我将其包装在工厂函数中。＆＃34;

为什么在模块导出实际组件而不是工厂函数时更容易测试和重用？

非常感谢！

Answer 1

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

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

开发中没有什么优势，但在测试中这将非常有用。在发展中

我可以在不同的应用程序中使用相同的文件来创建类似的组件，这是重用的巨大胜利。

进行测试

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

据我所知，这些是我能立即想到的一些优点以及作者为何推荐这种方法。但实际的作者也可能有不同的意图使用这种方法。

React组件的工厂功能

1 个答案: