当前位置：首页 > React

react如何分view层和model层

2026-01-26 06:25:45React

React 中分离 View 和 Model 的方法

在 React 中，分离 View（视图）和 Model（数据逻辑）可以通过多种方式实现。以下是几种常见的方法：

使用自定义 Hook 封装 Model 逻辑

将数据获取、状态管理、业务逻辑等封装到自定义 Hook 中，组件仅负责渲染。

react如何分view层和model层

// 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 层。

react如何分view层和model层

// 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>
  );
});