将已有jQuery项目迁移到React，核心并不只是换一套语法，而是开发思维的彻底转变。jQuery依赖命令式地查找节点、绑定事件、手动修改内容；React则要求把界面看成状态的映射，任何变化都通过数据驱动视图重新渲染。理解这种差异，才能把老代码平稳过渡而不留坑。
为什么jQuery手动操作DOM难以维护
在典型的jQuery代码中，开发者使用$('#list')这类选择器定位元素，然后在异步请求完成后用.append()或.html()直接改动页面。这种方式在页面简单时很直观，但随着功能增加，同一个DOM节点可能被多个函数修改，且修改时机分散在各处回调里。一旦某次数据更新忘记同步视图，或者视图被别的逻辑意外覆盖，就会出现界面与数据不一致的隐蔽BUG。
另一个问题是状态分散。jQuery没有统一的状态容器，按钮是否禁用、表单当前值、列表数据往往藏在DOM属性或闭包变量中。新接手的人很难理清“现在页面到底展示的是什么”。当产品要求增加 loading 态、错误重试等功能时，jQuery代码会迅速膨胀成层层嵌套的回调与判断，可读性急剧下降。
从性能角度看，频繁调用.html()重建大段节点会让浏览器反复解析并重构DOM树，在低配设备上卡顿明显。而React的虚拟DOM在内存中做差异比对，只把真正变化的节点同步给真实DOM，减少了无谓的重排重绘。这并不是说jQuery一定慢，而是手动优化成本太高，容易写出低效更新逻辑。
迁移核心：用状态与组件替代选择器
开始迁移时，建议先挑一个独立模块，比如原来的用户评论列表。第一步是在React中声明状态：用useState保存评论数组与加载标记。原来jQuery里$.get('/api/comments', function(res){ $('#list').html(...) })的写法，应改为在useEffect中发起请求，拿到结果后执行setComments(res.data)。界面不再由JS去“填”，而是由React根据comments自动生成。
事件处理也要改写。jQuery里$('#btn').on('click', handler)是命令式绑定，React中则写在JSX里：<button onClick={handler}>。注意这里用的是合成事件，无需担心兼容性或手动解绑。如果原代码有表单，应转为受控组件，把value绑到状态，onChange里setState，这样输入和内容源永远一致。
对于依赖第三方jQuery插件的部分，可以先用useRef拿到容器节点，在useEffect里初始化插件，并在卸载时调用销毁方法。但长远看，应寻找等效的React组件替换，避免混合编程带来的生命周期错乱。下面示例展示评论列表的基础迁移形态：
import React, { useState, useEffect } from 'react';
function CommentList() {
const [comments, setComments] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
fetch('https://ipipp.com/api/comments')
.then(res => res.json())
.then(data => {
setComments(data);
setLoading(false);
});
}, []);
if (loading) return <p>加载中...</p>;
return (
<ul>
{comments.map(c => (
<li key={c.id}>{c.text}</li>
))}
</ul>
);
}
常见迁移误区与渐进式策略
不少人试图用React把jQuery代码“包一层”，在componentDidMount里照抄原来的$('.x').click()，这其实没解决根本问题。这样写出的组件依然受DOM外部修改干扰，也享受不到状态管理的好处。正确做法是哪怕慢一点，也要把交互逻辑抽到状态与事件函数中，让渲染纯粹由数据决定。
如果项目庞大无法一次性重写，可采用渐进式嵌入：用React渲染新功能区块，老页面保留jQuery，通过自定义事件或全局状态桥接通信。比如老页面点击某个按钮时，派发window.dispatchEvent，React侧监听后更新自身。等核心模块逐步替换完，再卸掉jQuery依赖。这样既能交付业务，也控制了风险。
最后要注意测试覆盖。迁移后应为组件补上渲染与交互测试，确保原来jQuery手动验证过的流程在React下依然正确。当团队习惯用状态思考、用声明式写界面后，就会自然告别那个满屏选择器与回调的DOM操作时代，维护效率也将明显提升。
ReactjQuerydom_manipulation修改时间：2026-08-14 09:06:29