javascript - 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 。 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

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

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

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

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

用于测试

• 我可以通过使用不同版本的 React 创建组件来测试该组件并查看差异。
• 我可以传递不同的 stub 和 spy ，而不是使用实际行为。
• 我可以使用较新版本的服务或依赖项，并创建新组件仅用于测试，而实际上无需直接在应用中为 TDD 创建。

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