React Ant Design注意项

一、增加模块之后需要改动的文件汇总

1、在\src\routes里面加对应业务的文件夹。

2、\src\routes\index.js 主路由配置--通过url找到该模块

3、\src\routes\DataAssets\index.js （如果是子菜单可能要进行修改）

4、\src\routes\DataAssets\components\index.js（如果是子菜单可能要进行修改）

二、结构梳理

1、index.js 模块路由，与主路由对接

2、/service/index.js 里面是后端接口调用，payload是参数

3、/model/index.js 模型层

---- namespace: 'business',

----state:{zhangsan:aa,lisi:bb} -----视图层使用的时候，this.props.business.zhangsan

---- effects: {*dbInfoSelect。。。}

----reducers:{} Reducer 是 Action 处理器，用来处理同步操作

effects详解：

put 用于触发 action，进一步的可以触发reducers修改state
call 用于调用异步处理逻辑
select 用于从 state 中获取数据

namespace/effects中的item =》视图层中的 dispatch({type: "dataSource/dbInfoSelect"}} 是对应的

4、/components/index.js 视图层

三、流转逻辑

首先视图层（通过dispatch的type）调用Model中的effects（参数传递），Model通过effects（yield call()）调用Service（封装了request请求）中的请求函数来发起请求，获取服务端返回的响应后，调用reducers来改变state，调用视图层的render()来更新视图层

四、一些重点

1、this.props

React中的每一个组件，都包含有一个属性（props），属性主要是从父组件传递给子组件的，在组件内部，我们可以通过this.props获取属性对象

通过this.props.state名（namesapce）访问model层的state数据

this.state 作用域为当前组件（类组件中就相当于成员变量，如果其他组件想用必须得用this.props.namespace.xxx来调用）。

this.props作用域为组件间，作用是组件间传递参数值。

2、解构

const { dispatch } = this.props

相当于

const dispatch = this.props.dispatch

3、model中state与component中state

3.1、model中state相当于类中的成员属性集合，model当中的reducers当中对于state进行了修改（通过调后端方法，然后赋值给state里面的属性...state等）。即model当中的state是用来接收后端结果数据的。是用来渲染页面的，起到连接和承载数据的作用。

内容更新后，则可以通过在component的

render() {const { list, dynamicList, defualtIdArr} = this.props.business

3.2、component中的state是限于当前页面里面所使用的，记录了当前表单的各个值，当需要传参时，将state中的各个值组合成payload。给model传参。

五、回调函数

1、定义函数

2、注入函数

3、调用函数