react如何分view层和model层
React 中分离 View 和 Model 的方法
在 React 中，分离 View（视图）和 Model（数据逻辑）可以通过多种方式实现。以下是几种常见的方法：
使用自定义 Hook 封装 Model 逻辑
将数据获取、状态管理、业务逻辑等封装到自定义 Hook 中，组件仅负责渲染。
// Model 层 (useUserModel.js)
function useUserModel() {
const [users, setUsers] = useState([]);
const fetchUsers = async () => {
const response = await fetch('/api/users');
const data = await response.json();
setUsers(data);
};
return { users, fetchUsers };
}
// View 层 (UserList.js)
function UserList() {
const { users, fetchUsers } = useUserModel();
useEffect(() => {
fetchUsers();
}, []);
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}使用状态管理库（如 Redux）
Redux 提供了明确的分离，Store 作为 Model 层，组件作为 View 层。
// Model 层 (userSlice.js)
const userSlice = createSlice({
name: 'users',
initialState: [],
reducers: {
setUsers: (state, action) => action.payload,
},
});
export const { setUsers } = userSlice.actions;
export default userSlice.reducer;
// View 层 (UserList.js)
function UserList() {
const users = useSelector(state => state.users);
const dispatch = useDispatch();
useEffect(() => {
fetch('/api/users')
.then(res => res.json())
.then(data => dispatch(setUsers(data)));
}, []);
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}使用 Context API
通过 Context 提供全局状态，实现 Model 和 View 的分离。
// Model 层 (UserContext.js)
const UserContext = createContext();
function UserProvider({ children }) {
const [users, setUsers] = useState([]);
const fetchUsers = async () => {
const response = await fetch('/api/users');
setUsers(await response.json());
};
return (
<UserContext.Provider value={{ users, fetchUsers }}>
{children}
</UserContext.Provider>
);
}
// View 层 (UserList.js)
function UserList() {
const { users, fetchUsers } = useContext(UserContext);
useEffect(() => {
fetchUsers();
}, []);
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}使用 MVC/MVVM 模式库
MobX 等库支持 MVVM 模式，自动处理数据绑定。
// Model 层 (UserStore.js)
class UserStore {
users = [];
fetchUsers = flow(function* () {
const response = yield fetch('/api/users');
this.users = yield response.json();
});
}
// View 层 (UserList.js)
const UserList = observer(() => {
const { users, fetchUsers } = useContext(userStore);
useEffect(() => {
fetchUsers();
}, []);
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
});选择建议
- 简单应用：自定义 Hook 或 Context API
- 复杂状态：Redux 或 MobX
- 需要响应式数据：MobX
- 需要中间件支持：Redux
每种方法都能有效分离关注点，根据项目复杂度选择合适方案。
