react实现mvvm模式
React 实现 MVVM 模式的方法
MVVM（Model-View-ViewModel）是一种前端架构模式，通过数据绑定实现视图与逻辑的分离。React 本身基于单向数据流设计，但可以通过以下方式模拟 MVVM 的核心特性。
使用状态管理库实现数据绑定
React 的 useState 或 useReducer 可以管理状态，结合 Context API 实现跨组件数据共享。ViewModel 层可以通过自定义 Hook 封装业务逻辑：
// ViewModel 示例
function useTodoViewModel() {
const [todos, setTodos] = useState([]);
const addTodo = (text) => {
setTodos([...todos, { text, completed: false }]);
};
return { todos, addTodo };
}
// View 层绑定
function TodoView() {
const { todos, addTodo } = useTodoViewModel();
return (
<div>
<button onClick={() => addTodo("New Task")}>Add</button>
<ul>
{todos.map((todo, i) => <li key={i}>{todo.text}</li>)}
</ul>
</div>
);
}第三方库辅助实现
使用 mobx-react 或 react-mvvm 等库可更直接地实现 MVVM 模式。以 MobX 为例：
import { observer } from "mobx-react";
import { observable, action } from "mobx";
// Model 和 ViewModel
class TodoStore {
@observable todos = [];
@action addTodo(text) {
this.todos.push({ text, completed: false });
}
}
// View 层
const TodoView = observer(({ store }) => (
<div>
<button onClick={() => store.addTodo("New Task")}>Add</button>
<ul>
{store.todos.map((todo, i) => <li key={i}>{todo.text}</li>)}
</ul>
</div>
));数据绑定与响应式更新
通过 useEffect 监听数据变化，结合自定义事件或状态管理工具实现响应式更新：
function useFormViewModel(initialValue) {
const [formData, setFormData] = useState(initialValue);
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};
return { formData, handleChange };
}总结要点
- Model: 数据层，通常由 API 或本地状态管理
- ViewModel: 通过 Hook 或类封装业务逻辑，提供视图所需的数据和方法
- View: React 组件，负责渲染和用户交互
React 的灵活性允许通过不同方式模拟 MVVM 模式，选择取决于项目复杂度与团队偏好。
