React 与 Vue 组件状态边界：同一份数据只保留一个所有者

React 与 Vue 组件状态边界：同一份数据只保留一个所有者

组件难维护，常见原因不是框架 API 不够新，而是同一份状态同时存在 props、本地 state 和外部 store。三处都能写，更新顺序就会变成猜谜。

先给状态分类

服务端数据交给查询层缓存；跨页面业务状态进入现有 store；输入框展开、悬停等短生命周期状态留在组件。受控组件由父层持有值，子组件只发出变更意图，不再复制一份“镜像 state”。

副作用放在明确的生命周期中，并处理请求取消和旧响应。派生值能在渲染中计算，就不要再用 effect 同步。

验证组件边界

测试父层更新、用户连续输入、组件卸载和请求乱序。React DevTools 或 Vue Devtools 用来确认重复渲染来源，性能结论绑定数据规模和操作路径。状态所有者清楚后，组件模式才真正可复用。