zoukankan      html  css  js  c++  java
  • 初识Ant-Design

    设计价值观

    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
  • 相关阅读:
    mysql常用方法案例
    springboot整合mybatis
    mysql自定义函数统计订单状态:GET_ORDER_STATUS()
    mysql计算时间差-本例为计算分钟差然后/60计算小时保留一位小数,由于直接得小时只会取整
    mysql字段值为null时排序问题
    对象与内存(一)
    java基础提升(关于数组)
    项目的部署
    myeclipse中ssm的搭建
    ui自动化笔记 selenium_webdriver,ui自动化框架(web)
  • 原文地址:https://www.cnblogs.com/sminocence/p/8955058.html
Copyright © 2011-2022 走看看