react业务和ui如何分离
分离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组件尽可能简单，只关注渲染，而将数据获取、状态转换等业务逻辑移到单独的层中。
