基于webpack + react + react-router + redux + less +antd + ES6 的cnode社区

#1

楼主身为一个非计算机专业的大四学生,目前在学校附近的公司实习,利用工作之余做的第一个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.引用了蚂蚁金服的移动端Antd,样式挺好看的,不用再自己造轮子,ui一部分是模仿大神的cnode去做的

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

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

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

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

6.react-router

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

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

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

请问， 登录， 我输入什么东东？ “cnode社区设置最下面查看Token” 没有看明白。 谢谢！

#4

就是cnode社区的设置的最下方有 你需要先登录cnode社区 然后获取你的accesstoken

#5

https://cnodejs.org/

#6

https://github.com/tjlightfuturedreams/reactcnode这个比较简单容易理解。希望帮到您

#7

自顶一下 虽然图片已经消失不见 hhhhhhh

#8

请问你的store写在哪里的？源码中没有看见，不好意思，才学react，有点不懂。

#10

是这样的 是有一个跟数据 store 然后每一个reducers分别返回一个store的属性 就是假如我有一个Login的reducers 那么我们数据就是这样的

store{
    Login:{}
}

然后我们怎么在相对应的页面使用对应的数据呢 就是靠redux的connect这个 这个我是写在containers里面的

function LoginSelect(state) {
	console.log(state)
	return {
		state: state
	}
}
export default connect(LoginSelect)(Login)

你就可以看他打印出来的是什么了 如果你这个页面只想使用store下的Login 那么就是 这样的

function LoginSelect(state) {
	console.log(state)
	return {
		state: state.Login
	}
}
#11

嗯，谢谢这么详细！-.-

#12

没事 谢谢star 哈哈哈哈哈哈

#13

token是？？？为什么输入后还是登录不进去，还要设置其他的还是怎么回事

#14

token指的是cnode社区的token 在这个设置里面

#15

谢谢，完美解决了

#16

客气了，谢谢star

#17

哈哈，不懂token的是纯前端～

#18

你很多东西可以封装一下的