用于 React 的 Bootstrap 与 Material UI? [英] Bootstrap vs Material UI for React?
问题描述
我一直在我的项目中使用这两种方法，有时我发现需要在引导程序组件中使用 Material UI 组件，并且 UI 会按照我的预期显示.有人建议我不要使用这种方法.既然两者都使用网格并且可以弯曲，那么有什么理由吗?
I have been using both in my projects and sometimes I find the need to use a Material UI component within a bootstrap component and the UI displays as I would expect. I have been advised though not to use this approach. Is there any reason why since both are using the grid and can be flexed?
推荐答案
我倾向于冗长，所以我会把简明的答案放在最上面:
I tend to be verbose so I'll put the concise answer up top here:
结论:
谁说两者都用不好，可能只是表达了他们的看法意见，实际上说两者都使用不好确实缺乏上下文在你设计的东西中.@ user3770494 提出了一个很好的观点 - 但点，虽然关于构建大小是有效和真实的，但它确实取决于适用范围.如果是办公室内应用程序本地光纤网络上的每个人都将缓存在内存中无论如何......但是(不是说你认识我)我不会消极地评价你如果你把它们混合在一起——除非是给百万大用户在移动设备(非常低的设备)、桌面和其他设备上运行的应用程序世界各地需要实时(ish)时间更新的设备，以及在任何给定时间与 10000 名活跃用户一起流式传输动态内容24/7 时间.
Whoever said it was bad to use both might just be expressing their opinion, in reality saying it's bad to use both really lacks context in what you're designing. @user3770494 made a very good point- but the point, while valid and truthy about the build size, it does depend on the scope of the application. If it's an intraoffice application with everyone on a fiber network local it'd all be cached in memory anyways... but (not that you know me) I would not judge you negatively if you mixed them together-- unless it was for a MAJOR million user application to run on mobile (an very low devices), desktop, and other devices around the world requiring real(ish) time updates, and streaming dynamic content with 10000s of active users at any givin time 24/7.
说实话——如果不是生或死——我会说两者都用——还有做你自己的.理解不止一件事的经验是更好，然后只是致力于一个单一的解决方案"为个人成长.
In all truth- if it's not life or death-- I'd say use both- and also do your own. The experience of understanding more then one thing is better then just "committing to a single solution" for personal growth.
<小时>
本阅读的其余部分是可选的 - 不客气:)
The rest of this reading is optional - you're welcome :)
我个人在生产应用程序中都使用过(同时使用，也独立使用)...我也从头开始...(CSS 是我最不喜欢的部分我所做的工作 - 幸运的是我有一个很擅长的同事)以下是我的想法:
I personally have used both in production applications (both together, and independently)... I've also done it all from scratch... (CSS is my least favorite part of job things I do - luckily I have a coworker who is great at it) Here are my thoughts:
警告:我倾向于冗长.
免责声明:
作为喜欢功能胜过形式的人，形式是事后的想法，对于客户询问微不足道的微小变化来说很挑剔.我将尽可能多地将我的意见留在每个选项的外观如何"上.
As someone who likes function over form, form is an afterthought that is nit picky for clients to ask about tenuous little changes. I am going to try to leave my opinion on "how each option looks for feels" out of this as much as I can.
此外，我正在做的当前选择中查看您的问题 - 使用 ReactJS/create-react-app 为触摸屏嵌入式系统制作演示"项目 - 所以我将推出一半十几个用于演示的模拟程序没有什么能真正做任何事情(CCscanner、条码扫描仪、gps、网络摄像头集成，诸如此类的有趣的东西).所以我正在研究什么对我来说更容易做到这一点因为我很无聊并且有一个 pi3b+board 是为了好玩).
Also I'm looking at your question in a current choice I'm making- which is using ReactJS / create-react-app to make "demo" projects for touch screen embeaded systems- so I am going to roll out half a dozen mock programs for demos nothing that really does anytihng exactly (CCscanner, barcode scanner, gps, webcam integration, fun stuff like that). So I'm researching what will be easist for me to just commit to for this "beacuse I'm bored and got a pi3b+board for fun).
答案:
如果你有时间、奉献精神和资源，真的有将它们混合在一起没有错.但你只需要考虑关于它的时间/成本/收益.DIY让最终用户满意-即使你混合它们.完全是你自己在改造车轮——但你总是可以引入 boostrap 样式等.
If you have the time, dedication and resources, there is really nothing wrong with mixing them together. But you just need to think about the time/cost/benifit of it. DIY to make the end user happy- even if you mix them. Totally yourself is remaking the wheel- but you can always pull in boostrap styles etc.
固有的风险是，如果你同时使用两者——确保你不要混合"太多——因为那样你总是会在尝试时遇到问题对任何一个进行版本更改.
The inherent risks is that if you use both- make sure you don't "Mix them" to much- because then you will always have issues with trying to ever do version changes on either one.
我喜欢很多 MaterialUI 的东西，但老实说，我不喜欢一些东西的外观(默认风格明智)- 在功能上我更喜欢它然后引导程序，但同时，我不喜欢 MaterialUIs React编程风格(作为一个讨厌 CSS 但知道其重要性的纯粹主义者)它是 - 必须使用 !important ever... 很大很大很大nonononononononon) 与我和我的同事使用的任何方式相比为公约.不是说它比我自己的好或更差偏好——但关于它的一些事情真的让我很生气(即使它们是有充分的理由这样做).
I like a lot of MaterialUIs things, but I honestly dislike how a few things look (style wise by default)- functionally I like it better then bootstrap, but at the same time, I do not like MaterialUIs React programming style (as a purist who hates CSS But knows how important it is- having to use !important ever ever ever ... is big big big nonononononononon) compared to whatever way my coworkers and I use for conventions. Not saying it's better or worse then my own preference- but a few things about it really irk me (even if they are done for good reasons).
Bootstrap 有很多选择 - 我喜欢它看起来更好，我喜欢它如何更好地与 ReactJS 一起使用 - 但有reactstrap vs. react-bootstrap(这就是为什么我发现你的帖子试图确定我正在做的这个演示中使用哪个).
Bootstrap has a lot of choices to use for- I like how it looks better, I like how it plays with ReactJS better- but there is reactstrap vs. react-bootstrap (which is why I found your post trying to figure which one to use for this demo thing I'm doing).
最近(对于生产项目)我确实尝试只使用一个，但通常我正在制作功能胜于形式的系统.所以他们并不真正关心 UI 元素，而是关心如何使用它不会让它变得漂亮.所以我坚持使用一个只是为了让我的工作更轻松 - 通常仍然自己覆盖样式...如果原始样式惹恼了我.但我不坚持一个因为同时使用两者是不好的形式"我只是坚持使用一个上面提到的原因.我实际上会说如果带宽不是问题 - 两者都使用是质量 - 但只使用它们的一部分你实际使用.
Most recently (for production projects) I do try to stick just with one but normally I'm making systems that are function over form. So they don't really care that much about the UI elements, it's about how to use it not make it pretty. So I stick with using a single one just to make my job easier- and usally still override styles myself ... if the original styles piss me off. But I do not stick with one because "It's bad form to use both" I just stick with one for that reason mentioned above. I'd actually say if bandwidth is not an issue- it's quality to use both- but only use the parts of them that you actually use.
(我注意到有人曾经导入完整的 jQuery，而他们唯一使用的东西是 $.ajax(虽然很多，但仍然如此)......我想......这不是矫枉过正吗?！) -- 因此，如果您同时使用两者并希望保持精简 - 只需确保在编译时您只导入您正在使用的内容.我在 Python 上是说 - 永远不要使用 import * from module (但是你在 Javascript 中将它表达为一个概念 - webpack/gulp/whomever 应该为你处理大部分).假设您使用的是 ES6/7 风格的 Javascript.
(I noticed someone once importing full jQuery when the only thing that they used from it was $.ajax (all be it a lot but still) ... I was like... is that not overkill?!) -- So if you use both and want to keep things slim- just make sure on compilation you're only importing what you're using. Pythonically I'm saying- never use import * from module (however you express that in Javascript as a concept - webpack/gulp/whomever should take care of most of that for you). Assuming you're using ES6/7 style Javascript.
这篇关于用于 React 的 Bootstrap 与 Material UI?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
