初识Ant-Design

时间：2024-01-14 20:31:02

设计价值观

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

相关文章