antd学习笔录

model问题

1. namespace：
   model 的命名空间，只能用字符串。一个大型应用可能包含多个 model，通过namespace区分。

2. state：
   当前 model状态的初始值，表示当前状态。

3. reducers：
   用于处理同步操作，可以修改 state，由 action 触发。reducer是一个纯函数，它接受当前的 state 及一个数据体（payload）作为入参，返回一个新的 state。

4. effects：
   用于处理异步操作（例如：与服务端交互）和业务逻辑，也是由 action 触发。但是，它不可以修改 state，要通过触发 action 调用 reducer 实现对 state 的间接操作。

5. action：
   是 reducers 及 effects 的触发器，一般是一个对象，形如{ type: ‘add’, payload: todo }，通过 type 属性可以匹配到具体某个 reducer 或者 effect，payload 属性则是数据体，用于传送给 reducer 或 effect。

代理问题

配置代理也很简单，只需在配置文件 config/config.js 中与 routes 同级处增加 proxy 字段，代码如下

  proxy: {
    '/dev': {
      // target: 'https://08ad1pao69.execute-api.us-east-1.amazonaws.com',
      changeOrigin: true,
    },
  },

配置的含义是：去往本地服务器 localhost:8000 的 ajax 调用中，如果是以 /dev 开头的，那么就转发到远端的

https://08ad1pao69.execute-api.us-east-1.amazonaws.com

服务器当中，/dev 也会保留在转发地址中。比如：

/dev/random_joke 就会被转发到

https://08ad1pao69.execute-api.us-east-1.amazonaws.com/dev/random_joke

mock模拟数据

1. 首先需要在config.js中配置locale

plugins: [
    ['umi-plugin-react', {
      antd: true,
      dva: true,
      locale: {
        enable: true,
      },
    }],
  ],

2. 模拟请求出错

export default {
  'get /dev/random_joke': function (req, res) {
    res.status(500);
    res.json({});
  },
};

3. 参考连接

自定义控件

当Input, Select之类的控件不满足需求时，需要自定义控件，让它们可以和 antd 的 Form 组件一起使用。可以使用getFieldDecorator 这个方法，它执行后会返回一个函数，那个函数接收的参数就是一个输入组件

FormItem label="自定义输入">
  {getFieldDecorator('custom', {
    rules: [{ required: true }],
  })(
    <YourInput />
  )}
</FormItem>

YourInput这个组件满足如下三个条件即可:

    提供受控属性 value 或其它与 valuePropName 的值同名的属性。  
    提供 onChange 事件或 trigger 的值同名的事件  
    不能是函数式组件  

上传下载

只要一个 a 标签，就可以实现文件下载,实例:

<a href="http://somehost/somefile.zip" download="filename.zip">Download file</a>

参考连接
如何使用JavaScript下载文件

关于umi

umi是一个可插拔的企业级 react 应用框架, 是蚂蚁金服的底层前端框架

环境准备

1 安装node 8.10以上版本
2 使用yarn 管理npm依赖

   # 国内源
   $ npm i yarn tyarn -g
   # 后面文档里的 yarn 换成 tyarn
   $ tyarn -v

3 全局安装 umi，并确保版本是 2.0.0 或以上

$ yarn global add umi
$ umi -v
2.0.0

4 在环境变量的path中配置路径
执行

yarn global bin

将得到的路径添加到path

脚手架

1. 建立空目录

$ mkdir myapp && cd myapp

2. umi g 创建一些页面

$ umi g page index
$ umi g page users

路由

umi 里约定默认情况下 pages 下所有的 js 文件即路由

启动本地服务

$ umi dev

npm run dev 执行的就是 umi dev

部署发布

1. 执行umi build
2. 验证

$ yarn global add serve
$ serve ./dist

Serving!

- Local:            http://localhost:5000
- On Your Network:  http://{Your IP}:5000

Copied local address to clipboard!

3. 部署

$ yarn global add now
$ now ./dist

> Deploying /private/tmp/sorrycc-1KVCmK/dist under chencheng
> Synced 3 files (301.93KB) [2s]
> https://dist-jtckzjjatx.now.sh [in clipboard] [1s]
> Deployment complete!

umiJS的成品有: Ant Design Pro等
例子
umi参考连接