原来这就是react设计模式啊

最近React项目开发中, 想把数据、逻辑、视图分离,以提升项目的可维护性、可扩展性和可测性,记录下我用的分离方式

先看个代码示例吧:

数据请求(useData.js)逻辑封装也可以用useHook

如果业务开发中有许多兄弟或者子(孙)组件,可以利用useContext/Provider,这样每个组件都可以用useContext拿到useData.js的数据

js 复制代码
// hooks/useData.js 
import { useState, useEffect } from 'react'; 

export function useData(userId) { 
    const [data, setData] = useState(null); 
    const [loading, setLoading] = useState(true); 
    
    useEffect(() => { 
        fetch(`/api/user/${userId}`) 
          .then(res => res.json()) 
          .then(json => setData(json)) 
          .finally(() => setLoading(false)); 
    }, [userId]); 
    
    return { data, loading }; 
}
视图组件(Box.js)
js 复制代码
// components/Box.js
export function Box({ user, loading }) {
  if (loading) return <div>加载中...</div>;
  if (!user) return <div>未找到用户</div>;
  return (
    <div>
      <h2>{user.name}</h2>
      <p>邮箱:{user.email}</p>
    </div>
  );
}
容器组件(UserContainer.js)
js 复制代码
// containers/UserContainer.js
import { useUserData } from '../hooks/useUserData';
import { UserView } from '../components/UserView';

export function UserContainer({ userId }) {
  const { data, loading } = useUserData(userId);
  return <UserView user={data} loading={loading} />;
}

总结:

  • 数据:用 hooks/service 统一管理和请求。
  • 逻辑:可以用 hooks/service 封装,容器组件只调用 或者 直接写在容器组件。
  • 视图:纯展示组件,无业务逻辑和数据请求。

这样,可以有效实现"数据、逻辑、视图"三者的分离,使代码更清晰易维护

解释

数据层(Data)
  • 状态管理 :使用 React 的 useStateuseReducer,或外部库(如 Redux、MobX、Recoil、Zustand 等)管理数据。
  • 数据请求 :将 API 请求封装在单独的模块或 hooks(如 useFetchUser),避免在组件内直接请求和处理数据。
  • 数据抽象 :通过自定义 hooks(如 useUserData)将数据获取和处理逻辑与 UI 解耦。
逻辑层(Logic)
  • 自定义 Hooks :把业务逻辑、状态操作封装到 hooks(如 useLoginuseForm),组件只关心如何展示。
  • 服务层:将复杂业务逻辑(如表单验证、流程控制)独立成 service 文件或 hooks。
  • 事件处理:事件处理函数尽量独立,不直接写在 JSX 内联。
视图层(View)
  • 纯展示组件:只负责渲染 UI,根据 props 显示内容,无内部状态和副作用。

  • 容器组件:负责连接数据和逻辑,将数据和事件通过 props 传递给展示组件。

相关推荐
搞科研的小刘选手3 分钟前
【学术会议合集】2025-2026年地球科学/遥感方向会议征稿信息
大数据·前端·人工智能·自动化·制造·地球科学·遥感测绘
2501_916008897 分钟前
JavaScript调试工具有哪些?常见问题与常用调试工具推荐
android·开发语言·javascript·小程序·uni-app·ecmascript·iphone
zero13_小葵司10 分钟前
在不同开发语言与场景下设计模式的使用
java·开发语言·javascript·设计模式·策略模式
蓝莓味的口香糖21 分钟前
【CSS】flex布局
前端·css
Sapphire~43 分钟前
重学JS-009 --- JavaScript算法与数据结构(九)Javascript 方法
javascript·数据结构·算法
彩旗工作室1 小时前
用 Supabase 打造统一认证中心:为多应用提供单点登录(SSO)
服务器·前端·数据库
EveryPossible1 小时前
第一版代码
前端·javascript·css
ObjectX前端实验室2 小时前
【图形编辑器架构】渲染层篇 — 从 React 到 Canvas 的声明式渲染实现
前端·计算机图形学·图形学
java水泥工2 小时前
基于Echarts+HTML5可视化数据大屏展示-智慧消防大屏
前端·echarts·html5
杨超越luckly2 小时前
HTML应用指南:利用POST请求获取全国索尼体验型零售店位置信息
前端·arcgis·html·数据可视化·门店数据