Question

使用一个大的React组件有什么缺点？

我有使用webpack，browserify，AngularJS，ES6，NPM和其他类似Web框架的丰富经验。我是React的新手。

我想在React中创建一个单页面应用。我不想要或不需要测试。我不需要团队朋友来工作。我只需要尽可能快地进行产品开发。让事情有效。你可以称之为MVP。您可以将其命名为lessm或smart developpement。如果将来工作顺利，我可以考虑重构项目。我是唯一一个开展工作的开发人员。我不担心性能问题（如果只有几毫秒）

问题是：所有文章都说要尽可能多地制作许多小型的React组件。在单独的文件中。你可以看到React-Starter-Kit。这是巨大的。

您可以看到每个组件都是一个单独的文件。有一个巨大的webpack.config.js文件。每个组件都导入许多其他东西。如果我也想要Redux，我需要导入商店，并在每个组件上创建connect。我想采取不同的方法。我想使用React＆amp;终极版。但只使用一个组件。每个内部元素都可以调度或执行事件。

将来我有什么不考虑的问题吗？

HTML：

<html><head><body></body></html>

JavaScript的：

App=React.createClass(function(){
    getInitialState:function(){
        return {
            openMore:'block'
        }
    },
    openMore:function(){
        this.setState({openMore:'visible'})
    },
    render:function(){
        return (
            <div>
                I want to put all the HTML of the app
                <span>
                    In one component that do everything.
                    <button onClick={this.openMore}>More Info</button>
                    <span> This way I beleive I will need to type less for development</span>
                    <b style={{display:this.getState().openMore}}>What are the disadvance of this?</b>
                </span>
            </div>
        )
    }
})
ReactDOM.render(App,document.getElementsByTagName('body')[0])

Answer 1

缺点很多。我会尝试从我所面对的方面列出它们并观察： -

React建立在将页面分解为组件的概念之上，所以是你将页面分成更小的组件越多，它就越容易使用。
它通常很容易跟踪代码。
可扩展
一个组件不会破坏其他组件。
重新渲染仅适用于指定的组件（如果它们是隔离的）。如果您将所有内容都放在一个组件中，则渲染会使整个组件再次加载，从而降低效率。
更难测试
在传递操作然后连接到商店时难以与redux一起使用。
您的组件应该只能完成一项工作。
不能将组件分解为表示和容器组件，因此不能将redux充分发挥潜力。
无法使用webpack的代码溢出功能，因部分代码加载而导致页面速度增加。

这些是我个人面临的一些事情。接下来，来到webpack配置。我几乎没有配置超过100行的webpack文件，并相信我100条线让你的生活变得更加轻松。事实上，基本配置只有10-15行，可以生成你的包。

现在，未来遇到问题，是的，以下是问题： -

难以扩大规模。
难以测试
不利用图书馆潜力
由于整体行为而难以管理组件。

希望它有所帮助!!!

Answer 2

拥有一个大文件就可以了。 React建立在格言“没有抽象比错误的抽象更好”并且具有低表面积的API。

如果你不确定你的应用程序正在解决什么问题，那么等到你在创建之前感觉到没有抽象的痛苦。

如果你的应用程序很可能不受影响，因为它的功能集没有被固定下来，那么不要通过在不同的文件中移动来给自己忙碌的工作。

如果您没有使用直观可分离的重用组件设计的网站，请不要将其分成不同的组件。

将React用作为html在不同状态下应该具有的声明性语法的方法是可以的。

Answer 3

由于您无法简化代码，因此使用大型组件很糟糕。将模块拆分为较小的模块，可以使您更容易长期维护代码，以及更快地发现错误。当具有隐式组件时，堆栈跟踪更容易，并且更具组合性。

FWIW，您可以将组件分成更小的组件，例如过滤的道具和自己的状态。但最糟糕的是，当您查看其他人构建的构建时，您可以忽略应用程序的构建方式。

使用一个大的React组件有什么缺点？

3 个答案: