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

Question

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

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

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

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

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

我想不出将来有什么问题吗？

HTML:

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

Run Code Online (Sandbox Code Playgroud)

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])

Run Code Online (Sandbox Code Playgroud)

Answer 1

Har*_*uja 10

缺点很多.我将尝试从我所面对和观察到的内容中列出它们: -

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

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

现在,将来遇到问题,是的,以下是问题: -

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

希望能帮助到你!!!

Answer 2

小智 7

拥有一个大文件很好.React建立在格言"没有抽象比错误的抽象更好"并且具有低表面积的API.

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

如果你的应用程序很可能因为它的功能集没有被固定而变得不稳定,那么不要通过在不同的文件中移动东西来让自己忙于工作.

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

可以使用React作为一种方法,为html在不同状态下的外观提供声明性语法.

归档时间：	9 年，3 月前
查看次数：	1638 次
最近记录：	9 年，3 月前