reactjs - 使用一个大型 React 组件有哪些缺点？-6ren

reactjs - 使用一个大型 React 组件有哪些缺点？

转载作者：行者123 更新时间：2023-12-03 13:56:06

25

4

使用一个大型 React 组件有哪些缺点？

我对 webpack、browserify、AngularJS、ES6、NPM 和其他类似的 Web 框架有很深的使用经验。我是 React 新手。

我想在 React 中创建一个单页应用程序。我不想或不需要测试。我不需要团队 friend 来工作。我只需要让产品开发尽可能快。让事情顺利进行。你可以称之为 MVP。你可以称之为 type lessm，或者智能开发。如果将来一切顺利的话我可以考虑重构该项目。我是唯一从事此工作的开发人员。我不担心性能问题(如果只是几毫秒)

问题是:所有文章都说要制作尽可能多且小的 React 组件。在单独的文件中。您可以看到 React-Starter-Kit。它是巨大的。

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

future 还有什么问题是我没有想到的吗？

<小时/>

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

最佳答案

缺点有很多。我将尝试根据我所面对和观察到的情况列出它们:-

React 的构建理念是将页面分解为组件，所以，是的，将页面分解为小组件越多，它就越容易使用。
通常很容易跟踪代码。
其可扩展性
一个组件不会破坏其他组件。
仅当指定组件被隔离时，才会进行重新渲染。如果您将所有内容都放在一个组件中，则渲染会使整个组件再次加载，从而降低效率。
更难测试
在传递操作然后连接到存储时很难与 redux 一起使用。
您的组件应该只执行一项工作。
无法将组件分解为展示组件和容器组件，因此无法充分利用 redux 的潜力。
无法使用 webpack 的代码溢出功能，该功能会由于部分代码加载而提高页面速度。

这些是我个人遇到的一些事情。接下来，进入 webpack 配置。我几乎没有配置超过 100 行的 webpack 文件，相信我，这 100 行会让你的生活变得更轻松。事实上，基本配置只需 10-15 行即可生成您的包。

现在，谈到 future 的问题，是的，以下将会是问题:-

难以扩大规模。
难以测试
没有充分利用库的潜力
由于单体行为，难以管理组件。

希望对你有帮助!!!

关于reactjs - 使用一个大型 React 组件有哪些缺点？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39391195/

25

4

0

文章推荐： facebook - Reactjs中componentDidMount和getInitialState的区别

文章推荐： reactjs - 反作用力组件DidMount

文章推荐： reactjs - 如何等待并淡出元素？

缺点功能不起作用
我目前正在尝试编写一个函数，它将一个新元素添加到列表顶部，并将列表的其余部分推回...任何人都可以帮助我吗？当我尝试编译和运行我的程序时，它不起作用。它无限循环。有什么帮助吗？ #include #
python - 将表情符号放入代码中是否有任何风险/缺点？
我有时在程序中使用表情符号来突出显示代码的某些部分(在开源库中)。每个脚本我很少使用超过 5-6 个，而且我发现它们在文本编辑器中的颜色确实很突出。通常，它们是 transient 标记，并且会在与
reactjs - 在无状态组件内部定义方法的优点/缺点
假设我有一个像这样的(有点人为的组件) const ExampleComponent = (props) => { const renderList = () => {
WPF 命令与事件的优点/缺点
谁能告诉我在 WPF 中使用命令与事件的优点是什么？命令或事件是否会遇到内存泄漏？什么是最快的方法。它们的缺点是什么？最佳答案与事件处理程序相比，命令具有两个主要优点: 命令未链接到调用者，所以相
boolean - 使用卡诺图代替真值表有哪些优点/缺点
我应该使用什么？或者是否有特殊场合我应该使用其中一种而不是另一种？最佳答案对于更高维度，K 图不一定失败。问题在于，对五个以上的变量进行可视化非常困难。 4 变量 K 图是二维的并且易于可视化。第
docker - 将数据库和应用程序部署到同一容器中的单独容器中有什么好处/缺点？
在使用kubernetes部署我的应用程序和数据库容器时，我试图了解以下体系结构的优缺点。背景知识:该应用程序位于Nginx代理后面。所有请求都从代理流向Web服务器。 Web服务器是唯一有权访问(
.net - 嵌入式脚本环境的优点/缺点？
有多种脚本环境可用于 .NET 应用程序(例如 this post)。我的问题是，使用它们各自的优缺点是什么？示例包括(但不限于) PowerShell IronPython 路亚 JavaScr
java - 访问资源文件时代码位置的优点/缺点
以下是我在访问资源文件时看到的 3 个选项。由于可能存在异常(exception)情况，选项 1 可能是最不推荐的，因此问题实际上与选项 2 或选项 3 相关，即哪个是首选或推荐的实现。选项 1 -
JavaBean 缺点——构造时不一致
Effective Java - Item-2 states, a JavaBean may be in an inconsistent state partway through its const
android:手动处理配置更改的优点/缺点
我不希望每次旋转设备时都重新创建我的 Activity，所以我将 android:configChanges="keyboardHidden|orientation"标签放在我的 list 文件中。
java - 提供默认哈希和相等方法的语言有哪些优点/缺点？
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 8 年前。 Improv
c++ - 许多嵌套回调的优点/缺点？
我有一个工作分配方案，其中每个单元都进行一些簿记和管理，并将任务传递给订单链中的下一个单元，例如；假设有 3 个类:老板、经理、 worker class Boss { void do_asy
MySQL 多个唯一键，缺点
创建一个包含字段 A、B、C 的唯一键然后创建另一个包含字段 C、B、A 的唯一键是否有缺点，因此 MySQL 将在仅使用 A 和仅使用 A 进行搜索的情况下利用索引C? 最佳答案您不想创建额外的复
javascript - 声明构造函数的优点/缺点
我对 JavaScript 中的原型(prototype)设计和构造函数很陌生。我看到有人这样声明构造函数: var Person = (function(){ function Person
ios - 使用初始化程序与计算属性解析数据的优点/缺点
假设我有一个 json 数据对象，我想将其解析为我自己的对象。我遇到过两种方法。第一种是像这样使用初始化程序: class DataModelOne { let firstProperty: S
c++ - 使用类方法而不实例化的优点/缺点
在c++中我们可以调用一个类的方法而不用实例化它。比如； MyClass mc; mc.method(); 在不实例化类的情况下使用类方法的优点和缺点是什么？我们什么时候应该使用这种类型？最佳答案
jquery - 使用ajax加载div内容的优点/缺点
我需要更好地了解 web 开发，尤其是 CSS 的工作原理。我从事 Web 开发已有大约 2 年了，我认为现在是时候了解如何优化我网站的性能了。我想问的事情不多。首先: 每当我的页面上有标签内容时，
Css float 缺点
代码如下: .thumbnail { float:left; width:110px; height:90px; margin:5px; }
c# - 使用按位枚举的优点/缺点？
上下文:数据库规范化，我正在创建一个表:UserInvolvement。User 可以通过多种方式(基于角色和其他方式)参与另一个实体:Foo。在当前情况下，每种类型的参与都作为单独的列添加到 Foo
c - 缺点/对的实现
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the

首页

博学

6Ren·AI

商城

reactjs - 使用一个大型 React 组件有哪些缺点？