设计价值观

Ant-Design在设计方面,存在两个大的价值观,自然和确定。自然即顺其自然,在顺应用户的自我感知和行为方式来开发更自然的产品。确定即探索设计规律,并将其抽象成对象,减少设计者的主观干扰,降低系统的不确定性。还有模块化设计,将复杂的或者相同的部分抽象成模块,最终减少系统的复杂度,增进可靠性和可维护性。

Ant-Design的React实现

https://ant.design/docs/react/practical-projects-cn

先贴出地址来,上面还有很多东西没学,今天做了一个应用Ant-Design的Table组件,了解了一些常见的Table组件的用法。

Table组件

  • dataSource:需要传递给表格的数据,格式是一个数组
  • columns:定义表格有哪些列,如果是静态数据的话,只需要写key,title,dataIndex属性,如果是动态操作的话,还会有render属性
  • loading

    详情请参照这个链接https://ant.design/components/table-cn/#components-table-demo-reset-filter

dva的八个概念

用户通过在界面上进行操作,产生Action,然后在组件里面对Action(比如是删除delete操作)添加处理函数(handleDelete),在handleDelete函数里面,调用dispatch函数来分发action,然后dva-cli命令会帮我们创建models目录,dva通过model的概念将一个领域的模型管理起来,包括同步更新state的reducers,处理异步逻辑的effects,订阅数据源的subscriptions。有了model和component,还需要将这两者串联起来,就是通过connect,connect类似于react-redux中的connect。

我简单总结一下今天所学到的,在做上面这个表格,ui方面的话就是用的Ant-Design来做的样式,其中也学到一些Table组件的相关用法。

  • state:表示Model的状态数据,通常表现为一个JavaScript对象,在dva中可以通过dva的实例属性_store看到顶部的state数据,但是通常很少用到。
  • Action:也是一个JavaScript对象,表示用户的操作,包括type,payload等属性
  • dispatch函数:触发action的函数,action是改变state的唯一途径,这里一般是在handleDelete函数里面调用(处理用户的操作)
  • Reducer函数接受两个参数:之前已经累积运算的结果和当前要被累积的值,返回的是一个新的累积结果。该函数吧一个集合归并成一个单值。
  • Effect:副作用,在应用中,称为异步操作。dva 为了控制副作用的操作,底层引入了redux-sagas做异步流程控制,由于采用了generator的相关概念,所以将异步转成同步写法,从而将effects转为纯函数。
  • Subscription:订阅,用于订阅一个数据源,然后根据条件dispatch的需要的action,数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。
  • Router:这里的路由通常指的是前端路由,由于我们的应用现在通常是单页应用,所以需要前端代码来控制路由逻辑,通过浏览器提供的 History API 可以监听浏览器url的变化,从而控制路由相关操作,dva 实例提供了 router 方法来控制路由,使用的是react-router
import { Router, Route } from 'dva/router';
app.router(({history}) =>
<Router history={history}>
<Route path="/" component={HomePage} />
</Router>
);
  • Route Components:在 dva 中,通常需要 connect Model的组件都是 Route Components,组织在/routes/目录下,而/components/目录下则是纯组件(Presentational Components)

    详情请参照https://github.com/dvajs/dva/blob/master/docs/Concepts_zh-CN.md

初识Ant-Design的更多相关文章

  1. ant design pro 初识

    发送请求 上次讲到在api.js中发送请求,模拟了假数据,这次讲一下调用真实接口进行请求并渲染页面. 先完整的过一遍请求吧 首先view层发送请求例如下面的代码: componentDidMount( ...

  2. Ant Design 的一个练习小Demo

    Ant Design 由蚂蚁金服团队出品, 基于 React 的组件化开发模式,封装了一套丰富而实用的 UI 组件库. 在这个练习Demo 中,按照 Ant Design 官网的教程示例,尝试使用 A ...

  3. 实现Ant Design 自定义表单组件

    Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...

  4. Ant Design UI组件

    Ant Design 是面向中台的 UI 设计语言.  http://ant.design/

  5. Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器,桌面安装运行

    ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验   最近需要讲AntD Pro项目(以 ...

  6. button样式篇一(ant Design React)

    这篇来介绍button中elementUi.iview.ant中样式结构 ant Design react ant-react中button分两个文件less: mixins.less:根据butto ...

  7. elementUi、iview、ant Design源码button结构篇

    在看elementUI的button组件的时候,一起和iview.ant Design的button组件比 较功能.样式.代码结构,看他们的一些不同点,不同的写法哪种会好些,button的对外开放的功 ...

  8. 使用selenium操作ant design前端的页面,感觉页面没加载完

    因需要收集页面数据,遂准备使用selenium爬取瓦斯阅读页面, 瓦斯网站使用的是ant design,元素定位非常困难,页面元素都没有ID,现在还只是能做到操作登录,不能自动打开订阅,查询某公众号, ...

  9. 使用Ant Design的select组件时placeholder不生效/不起作用的解决办法

    先来说说使用Ant Design和Element-ui的感觉吧. 公司的项目开发中用的是vue+element-ui,使用了一通下来后,觉得element-ui虽然也有一些问题或坑,但这些小问题或坑凭 ...

  10. React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)

    最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...

随机推荐

  1. python中requests库中文乱码问题

    当使用这个库的时候经常会出现各种乱码的情况. 首先要知道: text返回的是处理过的unicode的数据. content返回的是bytes的原始数据 也就是说r.content比r.text更加节省 ...

  2. 数据结构--Avl树的创建,插入的递归版本和非递归版本,删除等操作

    AVL树本质上还是一棵二叉搜索树,它的特点是: 1.本身首先是一棵二叉搜索树.   2.带有平衡条件:每个结点的左右子树的高度之差的绝对值最多为1(空树的高度为-1).   也就是说,AVL树,本质上 ...

  3. C#使用Linq To XML读取XML,Linq生成XML,Linq创建带属性或带节点XML

    using System; using System.Linq; using System.Xml.Linq; namespace Sample2 { class Program { static v ...

  4. 使用OC swift 截取路径中的最后的文件名

    使用 OC swift 截取路径中的最后的文件名 如何截取下面路径中最后的文件名 AppDelegate.swift /Users/XXX/Desktop/Swift/swift02/code/02- ...

  5. 【总结】IE和Firefox的Javascript兼容性总结

    长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javas ...

  6. linux命令(50):top命令

    TOP是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命令,它将独占前台,直到用户终止该程序为止.比较准确的说,top命令提供了实时的对系统处理器的状态监视.它将显示系统中C ...

  7. 51Nod 1022 石子归并 V2(区间DP+四边形优化)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1022 题目大意: N堆石子摆成一个环.现要将石子有次序地合并成 ...

  8. Docker概览

    Docker.xmind下载

  9. Permutations I&&II

    Permutations I Given a collection of distinct numbers, return all possible permutations. For example ...

  10. Linux磁盘的性能详细测试办法

    # 测试写入20Gb文件sync && time -p bash -c "(dd if=/dev/zero of=test.dd  bs=1000K count=20000; ...