当前位置：首页 > React

react业务和ui如何分离

2026-01-25 07:44:59React

分离React业务逻辑与UI的方法

将业务逻辑与UI分离是提升代码可维护性和可测试性的关键。以下是一些有效的方法：

使用自定义Hook封装业务逻辑 将业务逻辑抽离到自定义Hook中，组件仅负责渲染。例如数据获取、状态管理可以封装在Hook里，组件通过调用Hook获取所需数据和操作。

// useUserData.js (业务逻辑)
function useUserData(userId) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then(data => setUser(data));
  }, [userId]);

  return { user };
}

// UserProfile.js (UI组件)
function UserProfile({ userId }) {
  const { user } = useUserData(userId);

  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

采用容器组件模式 容器组件负责处理数据逻辑，展示组件只接收props进行渲染。这种模式清晰区分了职责边界。

// UserContainer.js
function UserContainer({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);

  return <UserProfile user={user} />;
}

// UserProfile.js
function UserProfile({ user }) {
  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

状态管理工具集中管理业务状态 对于复杂应用，使用Redux、Zustand等状态管理工具将业务状态与UI解耦。UI组件通过selector获取状态，通过dispatch触发动作。

// store/userSlice.js
const userSlice = createSlice({
  name: 'user',
  initialState: null,
  reducers: {
    setUser: (state, action) => action.payload
  }
});

// UserProfile.js
function UserProfile({ userId }) {
  const user = useSelector(state => state.user);
  const dispatch = useDispatch();

  useEffect(() => {
    fetchUser(userId).then(data => dispatch(setUser(data)));
  }, [userId]);

  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

服务层抽象API调用 创建独立的服务模块处理所有API通信，组件通过调用服务方法获取数据，避免直接在组件中处理fetch逻辑。

// services/userService.js
export function getUser(id) {
  return fetch(`/api/users/${id}`).then(res => res.json());
}

// UserProfile.js
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    getUser(userId).then(setUser);
  }, [userId]);

  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

使用Render Props模式 通过组件组合方式分离逻辑和渲染，父组件处理逻辑，子组件通过render prop接收数据并负责UI展示。

// UserDataFetcher.js
function UserDataFetcher({ userId, children }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);

  return children(user);
}

// App.js
function App() {
  return (
    <UserDataFetcher userId="123">
      {user => user ? <UserProfile user={user} /> : <div>Loading...</div>}
    </UserDataFetcher>
  );
}

这些方法可以单独使用或组合使用，根据项目复杂度选择最合适的方案。关键原则是保持UI组件尽可能简单，只关注渲染，而将数据获取、状态转换等业务逻辑移到单独的层中。

react业务和ui如何分离