基于webpack + react + react-router + redux + less +antd + ES6 的cnode社区
发布于 8 年前 作者 zhangfan6644777 5779 次浏览 来自 分享

楼主身为一个非计算机专业的大四学生,目前在学校附近的公司实习,利用工作之余做的第一个redux项目,也是刚刚接触redux 1个月,从最开始的看不懂到现在的能稍微写点东西出来了,希望各位大神觉得哪里做的不好,不足的地方,还请各位批评指正,非常感谢. 同时也是求star!!!

项目介绍

github地址 基于webpack + react + react-router + redux + less + ant + es6 的cnode社区 非常感谢cnode提供的api以及react china社区的各位大神,真的提供了很多的帮助,里面也有很多的例子,都值得去学习

运行项目(nodejs 6.0+)

  git clone https://github.com/zhangfan6644777/Redux-cnode.git
  cd Redux-cnode
  npm install 
  npm run dev (开发版本访问:http://localhost:8088/)

功能

  1.登录退出
  2.列表分页,下拉自动加载
  3.查看帖子,发帖,回复帖子,点赞
  4.查看消息
  5.个人中心
  6.查看别人的资料

项目总结

1.基本思路就是每个页面对应一个reducer

  • Topic主要是主页的列表信息,上拉加载
  • Article对应文章内容页面,点赞,评论,关注的逻辑都在这里
  • PublishTopic对应发布文章页面,
  • Message对应账号的消息页面,包括已读消息和未读消息
  • Login对应账号的登录信息
  • UserInfo对应账号的个人信息,还有发布,收藏,参与的话题

2.代码结构我是模仿实例讲解基于 React+Redux 的前端开发流程去构建的,他的这篇文章我觉得写得非常好,通俗易懂.尤其是对于我这样的小白来说,代码的结构也很容易理解,非常感谢这篇文章带我入门redux,然后这个是我根据这个文章写的demo Redux-PickApple,欢迎star!!

3.引用了蚂蚁金服的移动端Antd,样式挺好看的,不用再自己造轮子,ui一部分是模仿大神的cnode去做的

4.redux听起来确实很高大上,主要是对我开发思维的一个改变,但是有时候我觉得实施起来确实有点复杂,可能是我刚接触redux,还不是特别理解。

5.react配合redux非常需要注意性能,一定要尽可能减少渲染的次数,逻辑处理的不好,会导致多次的渲染,所以要好好利用shouldComponentUpdate来提升性能(需要改进的地方)

6.对react有了进一步的了解

  • setState()是异步的 this.setState()会调用render方法,但并不会立即改变state的值,state是在render方法中赋值的。所以执行this.setState()后立即获取state的值是不变的。同样的直接赋值state并不会出发更新,因为没有调用render函数。
  • 在组件里面最好不要写自己的state,应该放在根state统一进行管理,但是有些时候我觉得放在本身组件内代码写着会简单一点(TTTTTTTTTTTT)。

7.react-router

  • 可以使用下面代码优雅的传递复杂的参数
 <Link to={{pathname:link,state:data}}>

8.对es6有了进一步的了解,推荐阮大神的书籍ECMAScript 6 入门

  • class写法 如果使用es6的class类继承react的component组件,constructor中必须调用super,因为子类需要用super继承component的this,否则实例化的时候会报错。
  • 方法要绑定bind(this)才可以使用,与es5的React.createClass不同,es5的方式是自动绑定到this上的。
  • 其中箭头函数 扩展运算符和变量解构赋值真的帮助很大,极大的提升效率。

9.目前还没有解决的问题(正在改进中)

  • 评论的时候滚动条
  • 在消息页面点击被删除的帖子会出错

截图

1.png2.png3.png4.png5.png6.png7.png8.png9.png10.png11.png12.png13.png

12 回复

看到react就亲切 小伙子加油

已 star。土木工程自学半年能到这个程度,很不错哟。顺便,我这儿正在招前端,来跟一伙5年以上经验家伙的一起玩不?

@kcshan 谢谢 我会努力的 最近工作是使用apicloud,闲时看一下mobx.

@pinxue 非常感谢, 是怎么知道我是土木工程专业的呢? 招聘的话有什么要求呢?

@zhangfan6644777 显然是你自己说过的呗。发 email 到你qq邮箱了。

大龄前端向你学习

@pinxue 收到了 我会尽快给您回电话的(今晚或者是明晚)

@TonyYu2015 感谢您的肯定 一起学习 共同进步

小伙子,可以的

@leehomeok 谢谢您的鼓励,我会继续努力的

恩 …我来自顶一下

回到顶部