React开发做响应式应用选Bootstrap还是react-bootstrap？二者有何区别

1. 能不能直接在React项目里用原生Bootstrap？ #

完全可以，没有任何规则要求你必须用react-bootstrap。
如果你只需要用Bootstrap的响应式布局能力，用法非常简单：

• 要么直接在项目入口HTML的head标签里引入Bootstrap的CSS CDN链接
• 要么通过npm安装bootstrap包后，在React项目的入口JS/TS文件里引入Bootstrap的CSS文件即可

所有Bootstrap的布局类（比如container、row、col-*-*、响应式显示/隐藏类等）都可以直接写在React元素的className属性里正常使用，不会有任何问题。
唯一要注意的是：原生Bootstrap的交互类组件（模态框、下拉菜单、轮播图、Tooltip等）依赖jQuery和原生DOM操作，和React的虚拟DOM渲染逻辑不兼容，直接使用很容易出现状态不同步、组件渲染异常的问题，这类场景才需要用到react-bootstrap。

2. 二者的核心区别是什么？ #

• 依赖不同：原生Bootstrap的交互功能依赖jQuery和Popper.js；react-bootstrap完全移除了jQuery依赖，所有交互逻辑都基于React的状态和生命周期实现，和React的运行逻辑完全适配
• 使用方式不同：原生Bootstrap通过手动拼接类名、添加data属性实现组件效果，示例：<button className="btn btn-primary">提交</button>；react-bootstrap把所有Bootstrap组件封装成了独立的React组件，直接导入使用即可，示例：<Button variant="primary">提交</Button>，不需要手动管理类名
• 状态管控能力不同：原生Bootstrap的组件状态由内部DOM维护，很难和React的业务状态打通；react-bootstrap的所有组件状态都通过props暴露，完全由React管控，和你的业务逻辑适配性更好
• 开发体验不同：react-bootstrap原生支持TypeScript类型提示，开发时会有代码补全和参数校验，原生Bootstrap没有这项能力

3. 实际项目该选哪个？ #

• 如果你只需要用到Bootstrap的响应式布局能力，不需要用它自带的交互组件，直接用原生Bootstrap就足够，更轻量，也没有额外的学习成本
• 如果你需要用到Bootstrap的各类交互组件，优先选react-bootstrap，可以避免大量DOM操作和状态同步的坑，开发效率更高

内容的提问来源于stack exchange，提问作者Jagannath Krishna.P.A