之前一直都是一边学习，一边写代码，从来没有像现在这样做过课程分享笔记。坚持更完确实不容易，虽然作为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 难以理解部分你需要了解ｄｖａ的数据流向，应为他本身就是用来解决数据管理的。如果你熟悉ｊａｖａ后端的ｍｖｃ结构，我想你会很容易理解。routes里面放的就是页面，也相当于ｃｏｎｔｒｏｌｌｅｒ层，根据不同的路由去不同的页面，不同于ｊａｖａ的是，每个页面的路由并没有直接写在自己的页面代码中，而是全部放在router.js中去，为每个页面邦定路由，然后注册到整个应用中去。app.router(require(’./router’).default);视图层需要和后端数据去交互。于是有了ｄａｏ层，在service中去请求后台ａｐｉ获取数据。相当于ｊａｖａ的ｓｅｒｖｉｃｅ层model来统一存储视图层的数据，你可以选择那些数据需要去存储。相当于ｊａｖａ的ｓｅｒｖｉｃｅ层。视图层发送ａｃｔｉｏｎ到对应的model中,model响应ａｃｔｉｏｎ去ｄａｏ层拿数据，然后存储数据到ｓｔａｔｅ。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中都是异步方法，用于请求ｓｅｒｖｉｃｅ中的数据，然后告诉reducers去更新数据状态。这样视图层就会重新渲染　。4 数据的邦定因为所有的数据统一放到model中去管理，所以要想在组件中获取，两者直接就需要进行邦定，将state中的数据邦定到组件props中，这样你就能获取到了。function mapStateToProps(state) { return { state };}// export default ListData;export default connect(mapStateToProps)(Person);5 路由react-router里面有好多路由的介绍，我也还没有使用的很熟练。因为这次的网站并没有很复杂。视图层使用<Link/>来进行跳转在代码中，我们可能也会进行跳转。使用routerReduxthis.props.dispatch(routerRedux.push(’/’))权限路由，写一个路由组件，在里面进行判断。在想要鉴权的路由上用它包裹6 样式因为是单页面应用，你在某一个页面或组件中导入的样式，会污染到其他组件或页面。所以最好不要使用导入样式，在每个页面或组件中去写样式。百度了下，解决方案有的是加样式前缀，每个组件和页面有不同的前缀，这样就不会污染了。还有的是借助ｗｅｂｐａｃｋ的一些插件来实现，比较麻烦。因为样式对于我来说实在过于复杂，就不班门弄斧了，大家自己深入了解吧７ es6语法ｄｖａ中大量使用ｅｓ６的语法，如果你不了解的话，可能会出很多问题。记得我第二节课因为不了解语法，始终没办法把数据和ｓｔａｔｅ邦定，花了很多时间。所以你需要多花点时间去学习ｅｓ６的语法。因为我是菜鸟，就不多说了8 结束语技术注定是鼓噪的，能静下心来学习研究的人，都是对于编程有着一定的兴趣。我之前也是浮躁的不行，现在也开始不断的进行知识的分享。我想只有把这些记录下来，才不会忘记。万一哪天项目中就用到了呢？凡事都有第一次，看着那么多的技术大ｖ有那么多的粉丝，每篇文章有那么多的阅读量，非常羡慕。也希望自己能有更多的关注，慢慢努力吧。感谢那些看完我整个系列文章的朋友，如果有些错的地方还请指出。第一次写技术文章，还有很多地方需要改进，后面争取越写越好。此次系列文章也同步发到我的公众号，别忘了关注我 mike啥都想搞还有其他后端技术分享在我的公众号。