reactstrap和react-bootstrap有什么区别？

Question

我为reactjs找到了两个不同的引导程序

1. npm install --save reactstrap react react-dom
2. npm install react-bootstrap引导程序

两者的基本区别和主要区别是什么？

Answer 1

我本人一直在为此而苦苦挣扎，就像@Besart Marku所说的那样，它高度基于意见。

让我感到与众不同的一件事是，reactstraps文档在其许多代码示例中使用state：

import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

class ModalExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState(prevState => ({
      modal: !prevState.modal
    }));
  }

  render() {
    return (
      <div>
        <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default ModalExample; 

vs react-bootstrap使用函数和Hooks：

function MyVerticallyCenteredModal(props) {
  return (
    <Modal
      {...props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Modal heading
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <h4>Centered Modal</h4>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
          dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
          consectetur ac, vestibulum at eros.
        </p>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={props.onHide}>Close</Button>
      </Modal.Footer>
    </Modal>
  );
}

function App() {
  const [modalShow, setModalShow] = React.useState(false);

  return (
    <ButtonToolbar>
      <Button variant="primary" onClick={() => setModalShow(true)}>
        Launch vertically centered modal
      </Button>

      <MyVerticallyCenteredModal
        show={modalShow}
        onHide={() => setModalShow(false)}
      />
    </ButtonToolbar>
  );
}

render(<App />);

我没有给出答案，说其中一个比另一个更好，这是我的一个偏爱，对我来说，我个人更喜欢使用reactstrap，因为我倾向于比Hooks更多地使用类组件，因此完成示例后，我可以用最少的努力进行调整就成功了。

Answer 2

官方文档：

• 反应引导
• 反应带

两者的工作原理是一样的，从使用的角度来看：

• 他们需要npm install bootstrap在index.js或App.js中导入Bootstrap样式表文件，以启用Bootstrap默认样式import 'bootstrap/dist/css/bootstrap.min.css';。默认情况下，ReactJS 会将所有 Bootstrap CSS 代码附加到 HTML 页面头部内的样式标签中。

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import "bootstrap/dist/css/bootstrap.min.css";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

• 为我们提供现成的 Bootstrap 组件，在内部重新设计为 JSX，无需使用 JQuery 或 Javascript 进行直接 DOM 操作（使用虚拟 DOM，因为 React 默认已经可以工作）；
• 在幕后，用于React.createElement渲染组件；

道具

根据包的不同，传递给组件的 props 可以有不同的名称。查看按钮颜色用法：https://codesandbox.io/s/reactbootstrapvsreactstrap-7y87c-7y87c ?file=/src/App.js

import React from "react";

import { Button as ReactBootstrapButton } from "react-bootstrap";
import { Button as ReactstrapButton } from "reactstrap";

const App = () => (
  <>
    <ReactBootstrapButton variant="danger">React BootStrap</ReactBootstrapButton>
    <ReactstrapButton color="danger">Reactstrap</ReactstrapButton>
  </>
);

export default App;

道具名称不同 和color，variant但渲染的 HTML 几乎相同，正如我们在 DevTools 中看到的：

幕后花絮

Button您可以查看这两种实现，比较包源代码中的基本组件：

• node_modules\react-bootstrap\cjs\Button.js (React Bootstrap ^1.6.0);
• node_modules\reactstrap\dist\reactstrap.cjs.js 行：930 (Reactstrap v^8.9.0);

反应引导

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import "bootstrap/dist/css/bootstrap.min.css";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

反应带

import React from "react";

import { Button as ReactBootstrapButton } from "react-bootstrap";
import { Button as ReactstrapButton } from "reactstrap";

const App = () => (
  <>
    <ReactBootstrapButton variant="danger">React BootStrap</ReactBootstrapButton>
    <ReactstrapButton color="danger">Reactstrap</ReactstrapButton>
  </>
);

export default App;

尽管存在一些差异，例如使用原型reactstrap实现的方法，特别是在此组件中，一些附加道具的处理，但总的来说，它们之间没有显着差异。

零部件清单

可用组件 80% 到 90% 相同，其中一些组件只是名称不同。

React Bootstrap：警报、手风琴、徽章、面包屑、按钮、按钮组、卡片、轮播、下拉菜单、数字、表单、输入组、图像、大屏幕、列表组、模态、导航、导航栏、覆盖、分页、弹出窗口、进度、旋转器、表格、选项卡、工具提示、Toast。

Reactstrap：警报，徽章，面包屑，按钮下拉菜单，按钮组，按钮，卡片，轮播，折叠，下拉菜单，淡入淡出，表单，输入组，大屏幕，布局，列表，列表组，媒体，模态，导航栏，导航，分页，弹出窗口、进度、旋转器、表格、选项卡、Toast、工具提示。

基准

• https://www.npmtrends.com/react-bootstrap-vs-reactstrap
• https://npmcompare.com/compare/react-bootstrap,reactstrap

你可以在这里查看我关于它的完整原始帖子

Answer 3

以为我会加我的 2 便士。我以另一种方式来到这里，在转向 React 之前学习了 Android 开发中的 React Native。

前一种使用 Reactstrap 的方法更接近我们在 Web 开发和 Bootstrap 中所做的事情，而后者更接近我在 React Native 中所做的事情，即基于组件的开发。

它真的取决于用例两者都有意义但是如果你有一个包含很多移动部分的动态页面我建议使用 React-Bootstrap 库因为实现更接近组件模型并且允许你使你的页面元素可重用（并不是说你不能用以前的 Reactstrap 库做到这一点）。

我现在使用 Reactstrap 只是因为它提供了所有 Bootstrap 4 开箱即用的功能，这正是我所需要的。

Answer 4

它们是2个不同的库，但是都基于Bootstrap组件。

关于它们的一些统计数据 https://www.npmtrends.com/react-bootstrap-vs-reactstrap