使用React-bootstrap相比于Bootstrap的优势

Question

使用React-bootstrap相比于Bootstrap的优势

twitter-bootstrapreact-bootstrap

71

我该使用react-bootstrap还是普通的Bootstrap呢？

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

在React/Redux项目中使用普通的Bootstrap是否存在困难？

**编辑**

从阅读https://react-bootstrap.github.io/introduction.html得出结论，react-bootstrap唯一给我的就是类名的简写吗？以下是同一页的示例。

在plain bootstrap中，我会这样做：

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

React.render(button, mountNode);

而在 react-bootstrap 中：

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

React.render(button, mountNode);

所有这些来自react-bootstrap的bsStyle、bsSize等都是人们不喜欢在Angular上记住所有那些ng-*标签的事情...我个人并不介意，但如果这是react-bootstrap唯一提供给我的东西，我会使用twitter-bootstrap。或者我错过了什么？

- Amio.io

5个回答

10

这实际上取决于您计划使用哪个前端框架。如果您要使用Angular、Ember、Knockout或普通的jQuery，则传统的Bootstrap可能已经足够了。但是，与React不同的是，JavaScript应用程序代码与DOM交互的基本方式存在根本差异，这使得使用jQuery在Bootstrap中变得非常困难，因为React主要使用虚拟DOM。使用React-Bootstrap确实会减少编写样板代码的数量，使您可以轻松完成诸如按钮或表单元素之类的简单任务，但这并不是其主要优势。

- Matt Smith

3

如果我理解正确，react-bootstrap只是一种组件扩展，使那些不了解html+css的人们更容易使用。如果您不具备使用html+css+js自己创建按钮、菜单、布局等方面的知识，我建议您使用bootstrap。React并不为您提供按钮和菜单等设计。以下是Facebook链接，说明为什么要使用React：

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

我选择React而非Angular，因为如果你已经了解JavaScript，学习React会更容易。

如果你需要使用Bootstrap，我建议你仅使用Twitter Bootstrap，因为你可以在bootstrap.css之后添加另一个CSS文件来自定义布局。

- Alessander França

我接受了Guigui的答案，因为它更好地回答了我的问题。没有冒犯的意思。 :) - Amio.io

8

我认为你误解了问题...它是关于Bootstrap与React-Bootstrap的比较，而不是Bootstrap与React的比较！（原意翻译，没有改变句意） - Kris Jobs

2

bs 不适合不懂 HTML CSS 的人，它主要用于网格系统，这可能需要很长时间来自定义。 - Mr-Programs

0

Bootstrap框架的优势： 1. 支持JavaScript和jQuery插件 2. 框架易于理解 3. 学习和实践容易 4. 工具组件可再次使用 5. 兼容所有类型的浏览器

React框架的优势： 1. 提高生产力 2. 持续编码 3. 友好的搜索引擎优化操作。 4. 所有公司都可以使用此工具。 5. 生成具有新鲜内容的动态网站。 6. 可重复使用所使用的组件。

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

- Johnp007

1

-1 是因为这个问题只涉及到 bootstrap 本身，而不是 react-bootstrap 库。react-bootstrap 是一个以 React 为导向的库，将 Bootstrap 组件封装成 React 组件。 - Thiago Silva

0

React-Bootstrap是专门为在React应用程序中使用而设计的。

Bootstrap组件是基于HTML的。

React-bootstrap组件是基于React的。

由于react-bootstrap的组件是使用React构建的，它利用了React的状态管理功能来处理组件状态。

如果使用React项目，请使用react-bootstrap。

如果与其他项目一起工作，请使用bootstrap。

- Abhith

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Guichi · Accepted Answer

React-bootstrap为您创建React组件。

如果您考虑使用bootstrap在React项目中进行动画，那么它的优势将是显而易见的。

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

然而，有了bootstrap组件，您就不必担心bootstrap如何实现动画，您只需要在组件中指定属性和钩子，库将完成其余的工作。更具体地说，它可以添加一些对客户端不可见的包装器。

如上所示，<Fade>和<Transition>组件都是由bootstrap添加的。

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

如上所示，在<select>中放置<input>是语义UI的一种方式，但React会报错。我预计bootstrap可能也会遇到类似的问题，如果没有一个定制的库。