当前位置：首页 > React

react 实现model

2026-01-26 16:06:01React

在 React 中实现 Model 层可以通过多种方式，以下是常见的几种方法：

使用自定义 Hook 封装逻辑

自定义 Hook 可以将业务逻辑与 UI 分离，实现类似 Model 的功能。创建一个以 use 开头的函数，封装数据获取、状态管理等逻辑。

function useUserModel() {
  const [user, setUser] = useState(null);

  const fetchUser = async (id) => {
    const response = await fetch(`/api/users/${id}`);
    const data = await response.json();
    setUser(data);
  };

  return { user, fetchUser };
}

结合 Context API 实现全局状态

对于需要跨组件共享的 Model，可以使用 Context API 提供全局状态管理。

const UserModelContext = createContext();

function UserModelProvider({ children }) {
  const [users, setUsers] = useState([]);

  const addUser = (user) => {
    setUsers([...users, user]);
  };

  return (
    <UserModelContext.Provider value={{ users, addUser }}>
      {children}
    </UserModelContext.Provider>
  );
}

使用状态管理库（Redux/Zustand）

对于复杂应用，可以采用专门的状态管理库实现 Model 层。

Zustand 示例：

import create from 'zustand';

const useUserStore = create((set) => ({
  users: [],
  addUser: (user) => set((state) => ({ users: [...state.users, user] })),
  fetchUsers: async () => {
    const response = await fetch('/api/users');
    set({ users: await response.json() });
  }
}));

类式 Model 实现

传统的面向对象方式也可以用于封装 Model 逻辑。

class UserModel {
  constructor() {
    this.users = [];
  }

  async fetchUsers() {
    this.users = await fetch('/api/users').then(res => res.json());
  }
}

// 在组件中实例化使用
const userModel = new UserModel();

服务层 + Hook 组合模式

将数据获取等操作封装为服务，再通过 Hook 暴露给组件。

// services/userService.js
export async function getUsers() {
  return fetch('/api/users').then(res => res.json());
}

// hooks/useUsers.js
function useUsers() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    getUsers().then(setUsers);
  }, []);

  return users;
}

每种实现方式各有优劣，选择取决于项目复杂度：

react 实现model