共计 2872 个字符，预计需要花费 8 分钟才能阅读完成。
之前一直都是一边学习，一边写代码，从来没有像现在这样做过课程分享笔记。坚持更完确实不容易，虽然作为 react 结合 dva 的入门，不算是精品，但是还是感谢那些愿意阅读的朋友。在现在这个鱼龙混杂的 IT 圈，浮躁的氛围正侵蚀着每一个人。那些愿意 学习，愿意研究的人相信最终会越来越好。
1 学习 dva 的初衷
最为一格后端开发者，我对于前端酷炫的页面始终情有独钟。相比而言，后端全是数据接口，并没有多少视觉上的冲击力。
以前后段的我也写过页面，jsp 加 jquery 的时代已经一去不复返。虽然说 jquery 简化了好多 js 的写法，但是对于一些复杂的业务逻辑，还是要写很多的代码，一点也不 fashion。
前端近几年来不断发展壮大，每天都有新的技术涌现。react 和 vue 作为最出名的框架，打开了前端新世界的大门。
一些原生 js 开发者，看不上这些框架，老夫只用 jauery，用框架的都是小白新手。不管怎样看不上，但是这些框架确实提高了开发效率，让我们这些后端也能很快上手。
之前已经学习过了 vue，只后也了解过 react，但是并没有系统的学习过。一次偶然的机会，在一个个人网站上，看到了 dva 框架。作者只是提供了前两节课程的免费学习，后面的都要付费。我是个穷人，没法支持作者，只能自己学习，于是就想到了使用 dva 结合 cnode 的免费 api 来学习。
本来是打算用豆瓣的 api 的，结果人家不提供了，只好用 cnode 的了。不是说豆瓣的 api 好，只是因为图书，影视的数据展示出来效果好。Sorry，我就是个颜值控。
2 简单搬砖部分
所有页面都用的 antd，仿照官网的例子，直接上手自己改造就好。
虽然自己写了登陆，注册，导航等组件，其实只是使用 antd 的组件，然后将一些参数放到属性中。在其他页面中使用时，传入组件属性参数，来实现一些动态效果，并没有做到复杂的效果。
页面的布局都属于简单，上中下的结构，尾部没有加。每个页面引入头部导航组件，然后再引入自己的功能，像拼积木一样完成搭建。
只要看下 antd 官网的 api，你就可以熟练使用。这么说，复制粘贴你就可以完成页面。如果对于一些样式不满意，你可以使用行内样式或是引入样式去覆盖。
3 难以理解部分
你需要了解dva的数据流向，应为他本身就是用来解决数据管理的。如果你熟悉java后端的mvc结构，我想你会很容易理解。
routes 里面放的就是页面，也相当于controller层，根据不同的路由去不同的页面，不同于java的是，每个页面的路由并没有直接写在自己的页面代码中，而是全部放在 router.js 中去，为每个页面邦定路由，然后注册到整个应用中去。
app.router(require(‘./router’).default);
视图层需要和后端数据去交互。于是有了dao层，在 service 中去请求后台api获取数据。相当于java的service层
model 来统一存储视图层的数据，你可以选择那些数据需要去存储。相当于java的service层。视图层发送action到对应的 model 中,model 响应action去dao层拿数据，然后存储数据到state。
export default {
namespace: ‘user’,
state:{
isLogin:false,
user:{}
},
effects: {
*login({payload: { userName,password} }, {call, put}) {
const result = yield call(userService.getUser, { userName,password})
yield put({
type: ‘updateUser’,
payload: {
result
}
})
yield put(routerRedux.push(‘/’))
},
*reg({payload: { userName,password} }, {call, put}) {
const result = yield call(userService.regUser, { userName,password})
yield put(routerRedux.push(‘/login’))
},
*logOut({payload: {} },{call, put}){
yield put({type: ‘userOut’})
}
},
reducers: {
‘updateUser'(state, { payload: data}) {
let r = data.result
return {isLogin:true,user:r}
},
‘userOut'(state) {
return {isLogin:false,user:{}}
}
},
};
effects 中都是异步方法，用于请求service中的数据，然后告诉 reducers 去更新数据状态。这样视图层就会重新渲染。
4 数据的邦定
因为所有的数据统一放到 model 中去管理，所以要想在组件中获取，两者直接就需要进行邦定，将 state 中的数据邦定到组件 props 中，这样你就能获取到了。
function mapStateToProps(state) {
return {
state
};
}
// export default ListData;
export default connect(mapStateToProps)(Person);
5 路由
react-router 里面有好多路由的介绍，我也还没有使用的很熟练。因为这次的网站并没有很复杂。
视图层使用 <Link/> 来进行跳转
在代码中，我们可能也会进行跳转。使用 routerRedux
this.props.dispatch(routerRedux.push(‘/’))
权限路由，写一个路由组件，在里面进行判断。在想要鉴权的路由上用它包裹
6 样式
因为是单页面应用，你在某一个页面或组件中导入的样式，会污染到其他组件或页面。所以最好不要使用导入样式，在每个页面或组件中去写样式。
百度了下，解决方案有的是加样式前缀，每个组件和页面有不同的前缀，这样就不会污染了。还有的是借助webpack的一些插件来实现，比较麻烦。
因为样式对于我来说实在过于复杂，就不班门弄斧了，大家自己深入了解吧
7 es6 语法
dva中大量使用es6的语法，如果你不了解的话，可能会出很多问题。记得我第二节课因为不了解语法，始终没办法把数据和state邦定，花了很多时间。
所以你需要多花点时间去学习es6的语法。
因为我是菜鸟，就不多说了
8 结束语
技术注定是鼓噪的，能静下心来学习研究的人，都是对于编程有着一定的兴趣。我之前也是浮躁的不行，现在也开始不断的进行知识的分享。我想只有把这些记录下来，才不会忘记。万一哪天项目中就用到了呢？
凡事都有第一次，看着那么多的技术大v有那么多的粉丝，每篇文章有那么多的阅读量，非常羡慕。也希望自己能有更多的关注，慢慢努力吧。
感谢那些看完我整个系列文章的朋友，如果有些错的地方还请指出。第一次写技术文章，还有很多地方需要改进，后面争取越写越好。
此次系列文章也同步发到我的公众号，别忘了关注我 mike 啥都想搞
还有其他后端技术分享在我的公众号。
