• React+dva+antd的运用


    前言

    技术资料

    react + dva + redux + react-router + redux-sage + antd + antd动画

    总的来说dva是一个很简单的项目 一步步跟大家来说一下把

    效果图

    初始化环境配置

    因为项目中使用了antd的关系 所以 这边需要做一下设置 才可以正常使用

    文件名称是:.roadhogrc

    目录结构

    初始化dva

    初始化部分 非常简单 首先一个个来说明一下

    1.const app = dva()

    这部分是用来做dva初始化的部分 先给大家看一下完整的接口

    在这里 你可以设置全局state 全部error 还有包括router的事件 state的事件 等等 

    都可以直接统一的在这边进行设置与管理

    还有history这个参数是从react-router中来的

    相关地址:react-router dva初始化

    2.app.use

    这个是用来加载插件的 因为我这个项目没用到什么其他的redux第三方中间件 所以这边直接忽略

    3.app.model

    这个是用来接收你发送的action的

    相关链接:model

    4.app.router

    在这里面 进行你所有页面的初始化路由设置

    这里有两种写法

    写法1:

    写法2:

    下面这种是按需加载的 所有 性能会比上面的那种 要高很多 尤其是你的页面比较重的时候

    ok初始化部分全部讲完了 现在来看看ui部分

    UI代码

    这个是我的一个完全简化版 不含里面的内容 因为UI部分 我想搞前端的人 应该都会 所以就来讲点跟dva有关系的

    我想 如果没有接触过这种写法的人 肯定会感觉很纳闷吧 这是啥招 不知道在干吗啊 来看看 说明

    首先说一下 这个写法的优点跟缺点

    优点:

    因为这样写的话 就是一个function 所以react在判断的时候 会直接省略生命周期的部分 从而 可以大大的加快加载速度

    缺点:

    缺点就是 你无法使用this,也没有办法使用生命周期 

    所以 如果你的页面 必须要使用生命周期的话 还是用class吧 

    connect

    这个其实很好理解

    如果说你的ui里面需要用到model里面的数据的话 那么就可以直接用这个 将model里面的元素 当做props的方式 传递进来

    如果你只想接管一个app的model的话

    connect(({app}) => ({app})

    如果你想接管多个 直接在app后面添加即可

    至于另外的form.create部分 因为这里使用到了一个antd的表单组件

    所以需要用form.create的方式 将里面的内容以props的方式 传递进去

    相关文章:antd表单组件

    登录

    因为我们是一个表单登录页面 所以 当我们点击登录的时候 需要发送一条dispatch给model那边 然后通过他来实现页面的跳转

    先来看看如何发送数据

    因为使用了antd的关系 所以表单部分 可以说是被无限的弱化了 你现在 不需要关心任何事情 他都会帮你搞定 具体相关的api 可以看上面发的那个链接

    来看看消息发送的部分

    这里其实 很简单 因为antd已经帮我们做了处理 我们可以在他们提供的表单组件中 进行相关的配置 而所有的数据 他都会通过这个来直接返回过来

    所以我们只需要在这边进行一下判断即可 如果产生了错误就直接返回 

    否则执行dispatch 发送一条action给对应的model那边 然后在那边做出相应的判断

    model部分

    首先 一般介绍的文章都会写的很详细 但是对于新手来说 有可能会无从下手 

    所以 我们在接触到我们不熟悉的东西的时候 最好能用自己习惯的一种语言去解释他 这样也方便学习 按功能 我们依次下来

    reducers 处理数据

    effects   接收数据

    subscriptions 监听数据

    通过这样的解释是不是稍微能对其有个大概的了解 每个都是按照功能分类的 所以 尽量 不要在不归他管的地方 做其他的事情

    还记得 我们刚才发送数据的那个命令吗 我们在来看一下

    dispatch 是根据你里面设置的type内容 然后转发到指定的model的 所以你这边 要设置正确以后 在model那边才能接收到你发送的这条action

    login就是我们处理接收消息的地方

    在这里 又遇见了几个新的单词 put call

    其实 不止这几个 

    一般常用的有put call select take 

    当然 在这个上面 还有一些基于这些函数 封装的高阶函数

    相关文章:github.com/dvajs/dva/blob/master/test/effects-test.js

    简单来说一下 这几个函数的大概内容

    put  用来发起一条action

    call 以异步的方式调用函数

    select 从state中获取相关的数据

    take 获取发送的数据

    当我们使用put发送一条action的时候 与之对于的reducers就会接收到这个消息 然后在里面返回state等数据

    这里有一点 reducers中尽量只做state的数据返回 而不要在这里写相关的逻辑

    对于路由跳转的部分 我们使用这样来实现

    当我们执行这个命令的时候 因为我们的router已经相互绑定起来了 所以他会自动调用router中的数据来进行展示

    ok 总体就这么多吧 是不是感觉很简单

    我自己个人觉得 毫无难点 入门简直 不要太方便

    我相信 只要仔细看完我所有写的 dva的所有功能都将可以掌握

  • 相关阅读:
    Currency Exchange
    Robot Motion
    Crashing Robots
    Parencodings
    Y2K Accounting Bug
    Tautology
    Power of Cryptography
    Radar Installation -poj 1328
    The Pilots Brothers' refrigerator
    【java】之cron表达式
  • 原文地址:https://www.cnblogs.com/zhangbob/p/7421527.html
Copyright © 2020-2023  润新知