React全家桶写一个CNode社区

webpack2+react+react-router+react-redux+ES6+antd-mobile版本的Cnode

https://juejin.im/post/5902c98fda2f60005def88a2?utm_source=tuicool&utm_medium=referral

苦于我就职的公司的技术栈还是ES5+jQ+handelbars，
而我一直对React全家桶非常感兴趣，所以想自己来个强行实战，
见到react中国社区有几个CNode社区的react版本，
于是自己也计划了用CNode提供的API，从零开始做一个开源项目。
这个项目是我刚开始是写在github上的，用了一周左右从零学react，
然后清明节放假，哪也没去，做了这个非全功能版的CNode社区。

从开始熟悉react到完成这个作品，一共用了不到2周时间，
前提是我有一定的技术沉淀，所以新手也不要觉得2周很快。
也许对一些大牛来说，这已经比较慢了。

先上个作品地址，来扫码：

觉得还不错的话，点这里给我一颗Star~
静态服务器是node搭的，PM2开启守护，不用再担心挂掉了。

2017.4.27给自己立两个flag，不定期会更新：

• 改造hashHistory为browserHistory，包括服务端都自己来配置(宗旨是解决微信分享会截断#哈希地址的问题)。
• 把react-router升级到4版本。

2017.4.6更新思维导图。

首页加载还是有一些可以优化的地儿耐心等一会儿吧~！

使用的技术栈：

webpack：更新到2版本，网上目前大多数webpack-react教程都是1版本的配置写法。
react：谁用谁知道。
react-router：激进的我一边查阅4版本的英文文档一边做demo，发现改动太大，国内连issue几乎都没有，所以我鸟悄的退回到3版本使用(后期会更新到4版本)。
react-redux：挑战所在，相当于在新的开发模式上再叠加新的东西。
ES6：以前自己学JAVA的时候就喜欢Class的写法，这次每写一个组件都爽咩哈哈。
antd-mobile：UI样式，阿里提供的antd的移动端实现，完美契合react，好用，好看。

几点心得：

• 对常用jQuery/Zepto这类类库开发的开发者来说，react开发体验要好太多，webpack的强大功能使开发专注于代码，不用再考虑babel转好了ES6还要确定目录、sass还要用考拉或者filewatcher来处理、代码复用到底写在哪里才好...等问题。

• 众多的贡献者，超高的社区活跃度，数不清的插件(这次项目中使用了许多，实在是太好用)，react+webpack+ES6的技术栈可以给开发者长期浸淫的信心。

• redux架构给我的体验还不错，多亏阮一峰老师的简明教程，这个教程是三部的，都需要认真看。这些教程让我可以快速掌握一些核心的使用方式以及提早要避免的坑，对应redux，我的项目结构是经过一番考究才定下来的。

• 虽然react-redux建议UI不要带有任何自己的state，但实际业务中，灵活的使用UI本身的state是非常有利于开发的，不要为了使用redux而使用redux。另外，开发人员不是特多的话，reducer写在一个js里也不错，出了逻辑问题直接定位到这。action的type命名遵循一定规律，会给后期开发带来想不到的福利，比如这次的异步action‘fetch’，开发后期发现异步带来的问题有很多，需要一个全局控制，这时reducer配合正则表达式+遵循了一定规律的命名，很简单就实现了想要的。

• 虽然可以很快就实现初级的项目，开发过程中，完全不考虑操作DOM的体验虽然好，但也带来了许多可能的不必要的重复渲染，react配合redux非常需要注意性能，reducer处理不好，经常会重复渲染，理解react的运作方式很重要，零活运用shouldComponentUpdate来使你的页面性能达到最好，本身这就是一个挑战，再加上redux的参与...经过一番努力，我才使所有的页面都禁止了不必要的渲染，这个优化我体现在了控制台里，你可以查看每页的渲染情况。

• 实现回到长列表的上次滚动位置，着实耗费了我不少时间(我经常在react技术群里看到好多人提这个问题)，想了许多种实现方式，最终通过ListView的initialListSize属性配合缓存，实现了几乎媲美原生的回退到上次列表位置的效果。还有antd的ListView重复触发又没有详细明确的解答的onEndReached事件问题，最终通过对异步的控制以及在render中做了一些非常规处理才解决。

• 长列表的滚动延续动画无法控制，导致模仿iOS回到顶部的功能总是有缺陷，我有很多想法，比如：屏蔽掉原生事件，Touch.js之类的组件模拟。也可以单独弄个回到顶部的按钮出来，那样点击一次就会让滚动停下，第二次就可以回到顶部了(但是那样长得就不像原生的了)。 网上有很多长列表优化的文章，这个也是作为H5发开着需要着重研究的一个点，需要更深入的研究。也许在RN里能有更好的表现？所以，呃，研究RN势在必行。

• 重要的首屏加载问题，在Gzip的淫威下，1.6M的bundle压缩后只有300多k，然后，webpack+react-router还能实现按需加载，在硬件不断进步的今天，越来越不是问题了，这已经是现实了，就像两年前我们还在担心有的老板想兼容IE6，如今淘宝都只支持IE9+了，我的梦想是，没有IE，哈哈哈哈。Gzip我是用webpack-dev-server开的，包括proxy也是用它开的，在开发角度来说，比ngnix还方便。以前用ngnix处理开发中的跨域，还要另外去动手(懒得不要不要的)。

• 虽然英文水平可以勉强看英文文档，但无法像看中文文档那样自如浏览，一定程度上影响跟随国外优秀新版本技术的脚步，下一步也要强迫自己多贴近英文。

• 因为接触的越多，觉得需要学习的越多，内心也是五味杂陈的，我还没女朋友呢。。。

作品实现的功能：

1、首页：上拉无限加载(目前没做下拉刷新)，文章分类显示，点击条目进入文章详情，实现回退/Tab切换后，回到记录的滚动位置。2、文章详情页：显示文章详情和评论，登录情况下可以收藏/取消收藏，提供回退功能。(评论点赞和回复功能暂时没有实现)3、收藏页：显示已经收藏的文章，点击条目进入文章详情。4、消息页：(目前没做跟消息有关的功能)。5、我的：只提供了显示头像和退出功能。6、登录：实现了登录功能，没有登录的情况下，进入无权限的页面会跳转到登录页面。*、其他：首页长列表Iphone体验良好(回到顶部是缺陷)，没有考虑android的情况，比如按需进行body滚动等等。*、后期规划：不定期完善剩余功能，也有可能转战RN，下一步打算做一个思维导图，梳理一下架构思路(已完成)。*、已知问题1：模仿iOS回到顶部功能没实现，也没做按钮式的回到顶部；*、已知问题2：移动4G情况下，CNode的API好像被墙了，有时导致数据加载不出来。*、已知问题3：频繁的联网/断网后，可能会出现Bug，毕竟不是线上产品，暂时不处理。

更多效果图片请到这里来看，掘金的图片排版我还没搞懂...

在此开放源码，提供给有兴趣一起研究的coder们，主要部分我都进行了注释。
快速实现本地dev模式运行我的源码，三步走起：

  1、选择合适的空文件夹，打开你的git bash输入 git clone [e-mail]:TerryBeanX2/Webpack-React-Router-Redux-ES6.git 克隆我的仓库；  2、命令行 npm install ；  3、命令行 npm run dev ，浏览器访问 localhost:8888 ，F12进入移动开发模式查看 ；  *、如果出现问题，尝试cnpm淘宝镜像安装。

2017.4.6更新实际项目思维导图

其实就是React+React-Router+React-Redux的架构流程图实例版

首先，我们来说为什么要用Redux

下面上本项目思维导图

希望得到你的STAR

这次很用心的做了一个作品，希望得到同仁们的肯定，
我会尽量继续更新，快来点Star吧~