用于 React 的 Bootstrap 与 Material UI？

Posted 2023-02-22

【中文标题】用于 React 的 Bootstrap 与 Material UI？

【英文标题】：Bootstrap vs Material UI for React?

【发布时间】：2018-11-22 16:29:56

【问题描述】：

我一直在我的项目中使用这两个组件，有时我发现需要在引导组件中使用 Material UI 组件，并且 UI 会按我的预期显示。尽管有人建议我不要使用这种方法。由于两者都使用网格并且可以弯曲，有什么理由吗？

【问题讨论】：

Material UI 在 github github.com/mui-org/material-ui 上有 49,000 颗星。 React Bootstrap 只有 16,000 个。显然，很多使用 React 的人都选择了 Material UI。我将此添加为评论以避免投票。

但下载量是另一回事：npmtrends.com/material-ui-vs-react-bootstrap

@pmiranda 那是因为您正在比较现在已弃用的 material-ui npm 包，而 @material-ui/core 是应该使用的当前包。 npmtrends.com/react-bootstrap-vs-@material-ui/core

迁移到 material-ui 感谢分享统计数据！

我发现最好、最简单的理由是结构清晰。您应该始终努力争取能够在一年没有看到代码文件后打开它，并且一眼就了解它的作用和方式。为此，我个人认为最好选择一个框架并坚持下去。

【参考方案1】：

我比较冗长，所以我会把简明的答案放在最上面：

结论：

谁说两者都用不好可能只是在表达他们的意思 意见，实际上说使用两者都不好确实缺乏上下文 在你正在设计的东西中。 @user3770494 提出了一个很好的观点——但是 点，虽然关于构建大小是有效和真实的，但它确实取决于 应用范围。如果它是一个内部应用程序 本地光纤网络上的每个人都将缓存在内存中 无论如何...但是（不是你认识我）我不会负面评价你 如果您将它们混合在一起-除非是针对百万用户 在移动设备（非常低的设备）、桌面和其他设备上运行的应用程序 世界各地需要实时更新的设备，以及 以任何方式与 10000 名活跃用户一起流式传输动态内容 时间 24/7。

说实话-如果不是生或死-我会说同时使用-而且 做你自己的。多了解一件事的经验是 比个人“致力于单一解决方案”更好 成长。

---

本文的其余部分是可选的 - 不客气 :)

我个人在生产应用程序中都使用过这两种方法（同时使用，也可以独立使用）...我也是从头开始做的...（CSS 是我最不喜欢的部分我所做的工作 - 幸运的是我有一个擅长这方面的同事） 以下是我的想法：

警告：我倾向于冗长。

免责声明：

作为一个喜欢功能胜于形式的人，形式是事后才想到的，对于客户询问微不足道的小变化是很挑剔的。我将尽可能多地离开我对“每个选项的感觉如何”的看法。

另外，我正在查看您当前正在做出的选择中的问题——使用 ReactJS / create-react-app 为触摸屏嵌入式系统制作“演示”项目——所以我将推出一半十几个用于演示的模拟程序并没有真正做任何事情（CCscanner，条形码扫描仪，gps，网络摄像头集成，诸如此类的有趣的东西）。所以我正在研究什么对我来说是最容易做到的，“因为我很无聊，找了个 pi3b+board 来娱乐）。

答案：

如果你有时间、有奉献精神和有资源，真的有 将它们混合在一起没有错。但你只需要思考 关于它的时间/成本/收益。 DIY让最终用户开心- 即使你混合它们。完全是你自己在改造***——但你 总是可以引入 boostrap 样式等。

固有的风险是，如果您同时使用两者 - 确保不要将它们“混合”太多 - 因为那样您总是会在尝试时遇到问题 对任何一个都进行版本更改。

我喜欢很多 MaterialUIs 的东西，但老实说我不喜欢一些东西的外观（默认情况下风格明智）- 从功能上我更喜欢它 然后引导，但同时，我不喜欢 MaterialUIs React 编程风格（作为一个讨厌 CSS 但知道有多重要的纯粹主义者 它是 - 必须使用 !important ever ever ever... 是 big big big nonononononononon) 与我和我的同事使用的任何方式相比 为公约。不是说它比我自己的好还是坏 偏好——但有几件事真的让我很讨厌（即使它们是 这样做是有充分理由的）。

Bootstrap 有很多可供选择的用途——我喜欢它看起来更好的样子，我更喜欢它与 ReactJS 一起玩的更好——但是有 reactstrap vs. react-bootstrap（这就是为什么我发现你的帖子在尝试 弄清楚我正在做的这个演示使用哪个）。

最近（对于生产项目）我确实尝试只使用一个，但通常我正在制作功能而非形式的系统。所以 他们并不真正关心 UI 元素，而是关于 如何使用它不会让它变得漂亮。所以我坚持使用一个 只是为了让我的工作更轻松——而且通常我自己仍然会覆盖样式 ...如果原始样式惹恼了我。但我不坚持一个 因为“两者都用是不好的形式”我只是坚持使用一个 上面提到的原因。我实际上会说如果带宽不是 问题-使用两者的质量-但只使用它们中的部分 你实际使用。

（我注意到有人曾经导入完整的 jQuery，当时他们唯一使用的是 $.ajax（虽然很多但仍然如此）......我想......这不是矫枉过正吗？！） - - 因此，如果您同时使用两者并希望保持苗条 - 只需确保在编译时您只导入您正在使用的内容。我在 Python 上说 - 永远不要使用 import * from module （但是你在 javascript 中将其表达为一个概念 - webpack/gulp/whomever 应该为你处理大部分内容）。假设您使用的是 ES6/7 风格的 Javascript。

【讨论】：

应该有更多“冗长”的人愿意帮助/解释。谢谢

【参考方案2】：

我最近遇到了这种情况，并选择将两者都用于特定任务。由于它是一个响应式网络应用程序，Bootstrap 最适合用于小部件的布局和 Material UI（只是我个人的偏好）。

【讨论】：

几年后的更新；我完全去掉了 Bootstrap，现在只使用 Material UI。只管理一个更容易，并且可以减少捆绑包的大小。

【参考方案3】：

您绝对可以同时使用这两种方法，但您应该注意以下几点：

除非您花时间和精力从每个库中仔细挑选元素来管理它，否则所提供的功能会有很多重叠。即便如此，您也会面临无法避免重叠的情况。这基本上会产生更大的捆绑包。 您必须维护两个系统的主题变量，以便在您的应用程序中具有一致的呈现。即便如此，也会出现诸如表格复选框与表单复选框看起来不同的情况，因为它们来自不同的库。 您必须学习和理解这两个系统。这意味着有时很难找到导致某个错误的原因。您还将花费更多时间来决定将哪个库用于哪个组件。

总体而言，使用两个不同的系统对您来说工作量更大，而且看起来不一致的可能性更高。也就是说，将诸如网格系统之类的东西与有限的主题混合起来可能还不错。

如果可能，我强烈建议您选择一种系统并坚持使用。

【参考方案4】：

同时使用这两种方法会增加您的生产 js 大小。

Material Ui 和 bootstrap 都提供了具有基本样式的组件，比如按钮，所以选择一个。

您可以仅将引导网格用于结构，甚至可以使用 flex。