React 组件的工厂函数答案

【问题标题】：factory functions for React componentsReact 组件的工厂函数
【发布时间】：2017-09-01 05:23:36
【问题描述】：

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

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

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 作为全局可用。 https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375#95b7

2) 您可以通过 options 哈希中的所有组件传递您想要的任何内容，并且所有组件都可以访问它。

我不明白的部分是当他说“你可能还注意到该组件对事件侦听器在做什么没有任何概念。我在这里使用了一个技巧，使组件真的很容易在任何应用程序中测试和重用 — 我将它包装在工厂函数中。“

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

非常感谢！

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

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

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

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

用于测试

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

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

【讨论】：