react如何实现mvvm
React 实现 MVVM 模式的方法
React 本身基于单向数据流设计，但可以通过以下方式模拟 MVVM（Model-View-ViewModel）的核心特性：
使用状态管理库
通过 Redux、MobX 或 Zustand 等库管理全局状态，将业务逻辑与组件分离。例如 MobX 的 @observable 和 @action 可直接实现数据绑定：
import { observable, action } from 'mobx';
class ViewModel {
@observable data = [];
@action
fetchData = async () => {
this.data = await api.getData();
}
}自定义 Hook 作为 ViewModel
将业务逻辑封装到自定义 Hook 中，组件仅负责渲染：
function useUserViewModel() {
const [users, setUsers] = useState([]);
const loadUsers = async () => {
const res = await fetch('/api/users');
setUsers(await res.json());
};
return { users, loadUsers };
}
function UserView() {
const { users, loadUsers } = useUserViewModel();
// 渲染逻辑...
}双向绑定模拟
通过 useState + 事件处理实现类似双向绑定：
function InputField() {
const [value, setValue] = useState('');
return <input
value={value}
onChange={(e) => setValue(e.target.value)}
/>;
}高阶组件封装
使用 HOC 分离视图与逻辑：
function withUserData(WrappedComponent) {
return (props) => {
const [data, setData] = useState(null);
useEffect(() => { fetchData().then(setData); }, []);
return <WrappedComponent data={data} {...props} />;
};
}关键差异说明
- React 特性：MVVM 中的双向绑定在 React 中需手动实现（通过
onChange+setState） - 数据流：MVVM 的 ViewModel 自动同步数据，React 需要显式状态更新
- 工具选择：MobX 更贴近 MVVM，Redux 则偏向 Flux 架构
建议根据项目复杂度选择方案，简单场景可用自定义 Hook，复杂状态管理推荐 MobX。
