当前位置：首页 > React

react如何实现mvvm

2026-02-26 07:56:07React

React 本身并不严格遵循 MVVM（Model-View-ViewModel）架构，但可以通过组合其核心概念（如状态管理、数据绑定和组件化）模拟类似模式。以下是实现思路：

数据绑定与状态管理

使用 React 的 useState 或 useReducer 管理组件的局部状态，将状态（Model）与视图（View）分离。通过 props 或 Context 将状态传递给子组件，实现单向数据流。

const [data, setData] = useState({}); // Model
return <ViewComponent data={data} onUpdate={setData} />; // View 与 ViewModel 交互

分离逻辑与视图

将业务逻辑抽离到自定义 Hook 或独立函数中，作为 ViewModel 层。例如：

function useUserViewModel() {
  const [user, setUser] = useState(null);
  const fetchUser = async () => { /* 逻辑代码 */ };
  return { user, fetchUser }; // 暴露给 View 的接口
}

function UserView() {
  const { user, fetchUser } = useUserViewModel(); // 绑定 ViewModel
  return <button onClick={fetchUser}>Load</button>;
}

双向数据绑定模拟

通过 onChange 事件和状态更新模拟双向绑定。结合表单库如 Formik 或 React Hook Form 可简化流程：

const [inputValue, setInputValue] = useState('');
<input 
  value={inputValue} 
  onChange={(e) => setInputValue(e.target.value)} 
/>

全局状态管理

对于跨组件共享的 ViewModel，使用 Redux、MobX 或 Zustand 等库。Redux 的 Store 可作为集中式 Model，而中间件处理逻辑：

// ViewModel 层（Redux slice）
const userSlice = createSlice({
  reducers: { updateUser: (state, action) => { /* 更新逻辑 */ } }
});

// View 层
dispatch(updateUser(newData)); // 触发 ViewModel 更新

组件化与分层

将 UI 拆分为展示组件（View）和容器组件（ViewModel 连接器）。展示组件仅接收 props，容器组件处理数据逻辑：

react如何实现mvvm

// 展示组件（纯 View）
function UserList({ users }) {
  return users.map(user => <div>{user.name}</div>);
}

// 容器组件（连接 ViewModel）
function UserListContainer() {
  const users = useSelector(state => state.users); // 从 Redux 获取 Model
  return <UserList users={users} />;
}

通过以上模式，React 可近似实现 MVVM 的核心思想，但需注意其本质仍基于单向数据流和组件化理念，而非严格的 MVVM 框架。