在React项目中仅使用jQuery修改颜色、边框等样式是否可行？

原则上不推荐二者混用，仅在能完全规避DOM更新冲突的特殊场景下可有限使用

• 核心冲突逻辑：React自身维护虚拟DOM与真实DOM的映射关系，通过差分算法更新真实DOM节点。若你使用jQuery修改了某节点的样式属性，后续只要React触发了该节点的重渲染逻辑，就会直接用虚拟DOM中记录的样式值覆盖你通过jQuery修改的结果，很容易出现偶发的样式异常，这类跨框架的DOM操作冲突排查成本极高。
• 针对你提到的选择器便捷性需求，完全不需要引入jQuery实现：原生JS的document.querySelector('.foo')、document.querySelectorAll('.foo')已经支持几乎所有常用的CSS选择器语法，写法和$('.foo')几乎一致，没有额外学习成本，还能避免引入几十KB的jQuery冗余体积。如果是要操作React组件内部的DOM节点，更推荐使用useRef（函数组件）或者createRef（类组件）直接获取DOM引用，不需要走类名查询，性能和可控性都更高。
• 如果确实存在必须使用jQuery的场景（比如依赖仅支持jQuery调用的旧插件），请严格遵守以下约束降低冲突风险：
  • 所有通过jQuery操作样式的DOM节点，确保React不会主动更新这些节点的样式相关属性，可通过给组件添加memo浅比较、设置style属性为固定值的方式避免意外覆写
  • 所有jQuery操作都封装在useEffect钩子内，仅在组件挂载时执行一次，组件卸载时同步清理你绑定的jQuery事件、修改的样式，避免内存泄漏

只要你同时让两个框架操作同一片DOM，就一定存在不可预知的冲突风险，以上约束只能降低概率不能完全避免问题，非必要场景尽量不要混用。

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