使用 react-bootstrap 优于 bootstrap 的优势

Question

在普通的旧 Bootstrap 上使用 react-bootstrap 有什么意义？

我正在经历https://react-bootstrap.github.io/components.html，但我没有看到任何优势。我只能看到它会给项目带来不必要的依赖。

在 React/Redux 项目中使用纯 Bootstrap 有什么困难吗？

**编辑**

从阅读https://react-bootstrap.github.io/introduction.html 推断是react-bootstrap 给我类名的唯一简写？以下是同一页面的示例。

在plain boostrap 我愿意：

var button = React.DOM.button({
  className: "btn btn-lg btn-success",
  children: "Register"
});

React.render(button, mountNode);

在react-boostrap:

var button = ReactBootstrap.Button({
  bsStyle: "success",
  bsSize: "large",
  children: "Register"
});

React.render(button, mountNode);

所有这些来自react-boostrap 的bsStyle, bsSize, ... 是人们不喜欢Angular 上的东西，它们记得所有那些ng-* 标签...我个人不介意，但如果这是唯一的react-bootstrap 给了我我将使用twitter-bootstrap。还是我错过了什么？

Answer 1

React-bootstrap 为你创建 React 组件。

如果您考虑如何在您的 React 项目中借助引导程序来制作动画，优势将是显而易见的。

没有 react-bootstrap，你需要 CSSTransitionGroup 之类的东西。你不能利用 bootstrap 的 API，因为它会操纵 DOM，这使得 React 的行为不可预测。此外，bootstrap 将隐藏其动画 API 的详细信息；也就是说，你根本无法使用它。

但是，使用引导组件，您无需担心引导程序是如何实现动画的，您只需要在组件中指定属性和挂钩，库就可以解决问题。更具体地说，它可以添加一些对客户端不可见的包装器。

如上所示，<Fade> 和 <Transition> 组件是由引导程序添加的。

另外，虚拟DOM的语法可能与DOM不兼容：

如上所示，将<input> 放入<select> 是一种语义UI 方式，但React 会抱怨。我预计如果没有自定义库，引导程序可能会遇到类似的问题。

Answer 2

这实际上是您计划使用什么前端框架的问题。如果您打算使用 Angular、Ember、Knockout 或普通的旧 jQuery，那么传统的 Bootstrap 可能就足够了。尽管使用 React，但 JavaScript 应用程序代码与 DOM 交互的方式存在根本差异，这使得 Bootstrap 中的 jQuery 方法很难使用，因为 React 主要与虚拟 DOM 一起使用。确实，使用 React-Bootstrap 会减少执行简单任务（如按钮或表单元素）所需的样板代码量，但这不是主要好处。

Answer 3

如果我理解正确的话，react-bootstrap 只是组件的一个扩展，让不懂 html + css 的人生活更轻松。

如果你不知道如何使用 html+css+js 自己做按钮、菜单、布局等，我建议你使用 bootstrap。

例如，React 没有为您提供按钮和菜单的设计。

这是来自 facebook 的为什么使用 react 的链接：

https://facebook.github.io/react/docs/why-react.html

尽管有 Angular，我还是选择了 React，因为如果你已经了解 javascript，学习 React 会更容易。

如果你需要使用 bootstrap，我建议你只使用 twitter-bootstrap，因为你可以自定义你的布局，只需在 bootstrap.css 之后添加另一个 css 文件

Answer 4

Bootstrap 框架的优点： 1. 支持 JavaScript 和 jQuery 插件 2.框架简单易懂 3.学习和练习很容易 4.工具的组件可以再次使用 5. 兼容所有类型的浏览器

React 框架的优点 1. 提高生产力 2.常量编码 3.搜索引擎优化友好操作。 4. 本工具可供所有企业使用。 5. 制作内容新鲜的动态网站。 6. 使用过的组件可以重复使用。

在此处阅读更多信息：https://techidology.com/bootstrap-vs-reactjs/