能否在React应用中仅用Bootstrap 4而非React-Bootstrap？兼询jQuery兼容性

1. 能不能只使用Bootstrap 4？ #

当然可以！Bootstrap 4本质上是一个CSS优先的框架（附带一些依赖jQuery的JavaScript组件），你完全可以在React项目里直接引入它的样式文件，然后通过className属性给React元素添加Bootstrap的类名来实现样式。

比如你可以这样操作：

• 通过npm安装Bootstrap 4：npm install bootstrap@4
• 在React入口文件（比如index.js）里导入CSS：import 'bootstrap/dist/css/bootstrap.min.css'
• 然后在组件里直接使用Bootstrap的类：

function MyButton() {
  return <button className="btn btn-primary">点击我</button>;
}

如果需要用到Bootstrap的JS组件（比如模态框、下拉菜单），你可以选择引入jQuery和Bootstrap的JS文件，但这里要注意后面提到的和React的协同问题。

2. 这样做属于不当方案吗？ #

绝对不算不当方案，这完全取决于你的项目场景：

• 适合的场景：如果是小型项目、快速原型开发，或者你只需要Bootstrap的样式，不需要复杂的交互组件，直接用Bootstrap 4会更轻量，不需要额外安装React-Bootstrap这类封装库，学习成本也更低。
• 更推荐React-Bootstrap的场景：如果是中大型项目，需要频繁复用组件，或者希望组件能和React的状态、生命周期深度结合，React-Bootstrap会更合适——它把Bootstrap的UI组件封装成了原生React组件，用props来控制组件状态（比如模态框的显示隐藏不用手动操作DOM，直接通过state切换），更符合React的声明式编程思维，也能避免直接操作DOM带来的潜在问题。

3. jQuery与React无法协同工作的说法属实吗？ #

这个说法太绝对了，不是完全不能协同，但确实不推荐在React项目里混用。

React的核心是虚拟DOM，它通过维护虚拟DOM和真实DOM的一致性来更新界面；而jQuery是直接操作真实DOM的。如果两者同时修改同一个DOM元素，就可能出现虚拟DOM和真实DOM不一致的情况，导致界面更新异常、bug难以排查。

但如果两者各司其职，比如：

• 用jQuery处理一些和React状态无关的、独立的DOM操作（比如某些老旧的第三方插件必须依赖jQuery）
• 确保jQuery操作的DOM节点不在React的渲染范围内（比如React根节点之外的元素）
  这种情况下是可以协同工作的。不过一般来说，在React项目里尽量避免使用jQuery，因为它违背了React的设计理念，会让代码的可维护性下降。

内容的提问来源于stack exchange，提问作者John Taylor