学完这篇，你能把 Vue 项目迁到 React 时不靠"翻译语法"硬搬，而是先换脑子、再动手，并绕开那批最常见的坑。
第一步：先把"响应式"这条腿换掉
Vue 用 ref(0)，改的时候 .value++，视图自己跟着变，因为 Proxy 在替你追踪依赖。React 没有追踪这回事，它只有一条规则：调用 setter → 组件函数整体重跑 → 生成新的 JSX。
// Vue
const count = ref(0); count.value++;
// React
const [count, setCount] = useState(0);
setCount(count + 1);
由此推出第一个大坑：不要原地改数据。数组 push、对象改属性，引用没变，React 认为没变化，不重渲染。
// ❌ list.push(item); setList(list);
// ✅ setList([...list, item]);
注意：setCount(count + 1) 连写两次只会加 1，因为闭包读的是同一次渲染的旧值。要写成 setCount(c => c + 1)。
第二步：computed / watch → useMemo / useEffect
Vue 的 computed 自动收集依赖，React 要你手写依赖数组。判断标准很简单：
- 渲染期间算出来的值 →
useMemo
- 出了渲染之外的副作用（请求、订阅、定时器、改 DOM）→
useEffect
const total = useMemo(
() => list.reduce((sum, i) => sum + i.price, 0),
[list]
);
useEffect(() => {
const id = setInterval(tick, 1000);
return () => clearInterval(id); // 相当于 onUnmounted
}, []); // 空数组 = 只跑一次（约等于 onMounted）
注意：依赖数组漏写会读到旧值（stale closure），依赖里塞整个对象又会导致每次都重跑。依赖只放"真正用到的原始值"。
第三步：模板语法 → JSX
| Vue | React |
|---|
v-if="ok" | {ok && <X />} 或三元 |
v-for="i in list" | {list.map(i => <Row key={i.id} />)} |
:class="{active: on}" | className={on ? 'active' : ''} |
@click="fn" | onClick={fn} |
v-model="v" | value={v} onChange={e => setV(e.target.value)} |
:style="{color:'red'}" | style={{ color: 'red' }} |
注意：{count && <X />} 当 count 为 0 时页面上会渲染出一个孤零零的 0。数字做条件判断请写 count > 0 && ...。
注意：class 必须写 className，for 必须写 htmlFor；忘了给 key 会警告，用数组下标当 key 在可排序列表里会导致状态错位。
第四步：组件通信换个名字
Vue 的 emit，在 React 里就是往子组件传一个函数；slot 对应 props.children；provide/inject 对应 createContext + useContext；defineExpose 基本没有等价物，非要用就 useImperativeHandle。
// 子组件
function Child({ onPick }) {
return <button onClick={() => onPick(1)}>选 1</button>;
}
第五步：状态管理挑个对味的
Pinia 用户迁过来最顺手的是 Zustand，都是 hook 式、几乎没有样板代码：
const useStore = create(set => ({
count: 0,
inc: () => set(s => ({ count: s.count + 1 })),
}));
如果你原来重度依赖 Vuex 的 mutation/action 分层，那就上 Redux Toolkit，别硬套 Zustand。
第六步：把生命周期对照表贴在显示器边上
| Vue | React |
|---|
onMounted | useEffect(fn, []) |
onUnmounted | useEffect 里 return 的清理函数 |
onUpdated | useEffect(fn)（无依赖数组，慎用） |
watch(prop, cb) | useEffect(cb, [prop]) |
踩坑清单（照着排查）
- 开发环境
useEffect 跑两次：React 18 StrictMode 故意为之，用来暴露清理函数没写全的问题。副作用要幂等，return 里把订阅、定时器、请求 abort 都收干净。
- 定时器/事件监听里读到旧 state：用
useRef 存一份最新值，或把依赖补全。
useEffect 直接传 async 函数：会返回 Promise 报错。要在内部定义 async function run() 再调用。- 受控输入框打不出字：给了
value 却忘了 onChange。
setState 后立刻读 state：读到的是旧值，React 是批处理的。要在新值上用，就放进 useEffect 或直接用计算出的变量。- 满屏
useCallback/useMemo：只在确实传给 React.memo 子组件、或作为其他 hook 依赖时才包，否则是纯负担。
- 列表 key 用 index：插入、删除、排序时全部错位，用后端返回的 id。
小结
- 思维上只换一件事：从"数据变 → 框架追踪 → 局部更新"换成"调 setter → 组件重跑 → 出新 JSX"。
- 数据永远返回新引用，不原地改。
- 计算用
useMemo，副作用用 useEffect，依赖数组是命门。
- JSX 里
className、htmlFor、key、受控组件这四处最容易翻车。
- 组件通信 = props 向下 + 函数向上 + Context 跨层，没有 emit 和 slot。
- 迁移顺序建议：先搭好路由和状态管理骨架，再一个页面一个页面搬，别做逐行翻译。
见习用户
正式会员
认证极客
