useEffect的使用

Ant Design Pro 专栏收录该内容
6 篇文章 0 订阅

Form窗体

  const {
    onSubmit: handleUpdate,
    onCancel: handleUpdateModalVisible,
    createModalVisible,
    values,
    dispatch
  } = props;


  const [menuData, setMenuData] = useState([]);

  useEffect(() => {
    dispatch({
    #注意这里必须有相应的model,test指的是model的名称,query指的是具体方法,不是说访问的test/query后台接口,后台没有这个接口
      type: 'test/query',
      payload: {
        data: {"pageSize":"99999"}, 
      }
    }).then((data) => {
      setMenuData(data.data || []);
      console.log(data)
    })
  }, []);

model



export default {
  namespace: 'test',
  state: {
  },

  effects: {
    *query({ payload }, { call }) {
      const response = yield call(query, payload);
      return response;
    },
  },
};

最终service


export async function query(params?: TableListParams) {
  return request('/xxxx/test/listPage', {
    method: 'POST',
    data: {
      ...params
    },
  })
}
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<span style="font-size:24px;">前言</span><br /> <br /> <span style="font-size:18px;">如释重负,好用技术就应该越来越简单</span><br /> React Hooks 是 React 16.8 从提案转为正式加入新特性。这个新特性是个非常棒设计。 可以说对于React 技术栈发展具分割线一样意义。讲师在课程中提到:之前使用 React 作为主要前端技术,开发一款网页游戏。在整个游戏各个模块中,Redux ,mobx,以及蚂蚁金服 ant-design,dva, umi 这些框架或者第三方库都有涉及使用。但是自从了解了Facebook官方提案 Hooks 特性后,才真正觉得获得了前所未有解脱。如果你有React开发经验,学习了解 Hooks 后,一定有一种如释重负轻松感。<br /> <br /> <span style="font-size:18px;">React 带来了方便也带来了迷茫</span><br /> 相信关心 React Hooks 这项新特性童鞋,很多已经有了一定 React 开发经验。那么你一定有所体验,React 给我们带来方便同时,也确和长久以来前端开发模式有极大不同。React 并不需要用继承,而是推荐用嵌套。React 有独特 jsx 语法。大多数情况 jsx 都使得我们代码更加简洁了。然而有些时候也给我们带来了一些困扰。 比如数据传递,逻辑复用。 react 是一种 mvvm 设计模式,作为开发者一定要清楚,那些数据是业务数据,那些数据是UI数据。否则你代码很有可能会陷入混乱局面。<br /> <br /> <span style="font-size:18px;">大型项目中模块化与功能解耦困难</span><br /> 在公司项目中 App 稍大时候,我们发现状态提升和只通过 props 进行数据传递。很多时候都很难实现我们需求。这时无论我们是否清楚了解,但是状态管理也就是 redux mobx 等,轻易地进入到了公司项目中。我们经过初期尝试发现状态管理,确实比用纯粹 React 带来了数据传递上方便,以及代码组织上清晰。但前提是你看懂且理解了 redux 大神晦涩官网文档。 本来 React 被设计用来组件化前端开发。但当我们初期使用状态管理,我们常常会过度使用状态数据,业务逻辑和ui逻辑没有清楚分离,最终你应用代码结果可能是:除了少数几个组件是独立解耦,大多数组件都因为状态数据共享而耦合在了一起,且他们也完全依赖状态管理框架。无法再轻松转移复用。使用高阶组件,属性渲染,渲染回调等高级特性,确实可以帮我们解决模块或功能解耦问题。但是这些方法,确实有点超出普通“猿类”技能。且降低了代码可读性,对于团队协作,这是很致命问题。<br /> <br /> <span style="font-size:18px;">React Hooks 真正开启前端模块化金钥匙</span><br /> 对于以上问题,React Hooks 都有很好解决方案,官方设计动机就是解决这些曾经繁琐,化繁为简。React Hooks 让我们在纯函数中就可以使用 React 众多特性。而不必使用类。代码扁平,易读。解耦状态相关逻辑,UI逻辑和业务逻辑更好分离。这些逻辑往往是纯函数,而以前很容易混合在类组件中。通过自定义 Hooks 我们可以把应用中“状态相关”逻辑解耦出来,独立编写到我们自己hooks 中。从而更加易于复用和独立测试。<br />
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值