react案例->新闻移动客户端--（react+redux+es6+webpack+es6的spa应用）
今天分享一个react应用，应在第一篇作品中说要做一个react+redux+xxx的应用。已经做完一部分，拿出来分享。github地址为：点我就可以咯~
这里实现了一个新闻移动站的spa。本来想写pc端的，但是比较懒，而且因为主要是react的项目，关于css和布局的细节就是糊弄人的了。T.T,这里只说关于这个项目的js部分。
这里的功能很简单,有一下几点：
1，按”心“排序
当比上一个多了，就会排到前面。
2.评论部分
新闻的评论部分类似qq空间的评论
当然，也可以点击新闻回复的哦。
=============================================
大家看到了，功能比较简单，大家clone 项目下来，直接能用的，里面已经传了我用webpack打包好的文件。
=============================================
bundle.js有3m+,这个完全是因为我加了很多库进去，比如轮播图的swiper等等，而且这些东西都是没有压缩过的。你压缩完之后，会觉得react做移动端也可以的。
就不要再问我为什么不用rn做这个。。因为我不会T.T
=============================================
要看懂本文也需要一定的基础，比如es6基础，react和redux基础。
=============================================
最后一点废话，这个东西还没有做完，只是一部分，接下来会用redux的router把它作为一个完全的spa，并且完善它的测试部分。大家期待吧~
=============================================（主文分界线）
好，接下来介绍我们的主角redux，不会的可以转到我的另一篇博文：点此
redux，昨天花了一上午，竟然看完了它全部的源码。跟你们说，它未压缩的redux.js仅有600行。angular已经1w+行了。。。
主要的是很简单，源码一看就懂，而且redux完全是fp，也就是函数式编程，它内置了一些函数式编程的例子。运用fp的库还有lodas和underscore。我将会写另一篇介绍fp与redux的博文~~
分析代码之前，先给出文件目录：
这个目录是官方example的目录，我就直接拿来用了。webpack整理的文件在public中，bootstrap没有在webpack中打包，项目中一般也用不到，其他的css和js文件都打包进去了。
其中，fonts是字体，dist存放了webpack打包后的js和css文件，public里面是轮播图js文件和图片文件。test是测试文件，现在还没写。因为不是tdd。。
剩下的actions存放的是redux的action文件。components存放的是react的组件，containers是redux如何封装组件的配置文件。reducers是redux的reducer文件，store是创建store的配置文件。
webpack主入口是index.js 它里面是添加了一些应用需要的文件，比如import Swiper from "./public/js/swiper-3.3.1.min.js"和import "./public/js/swiper.min.css"，还有main.css
import React from 'react' import { render } from 'react-dom' import { Provider } from 'react-redux' import App from './containers/App' import configureStore from './store/configureStore' import "./dist/main.css"; import Swiper from "./public/js/swiper-3.3.1.min.js" import "./public/js/swiper.min.css" import 'react-bootstrap'; const store = configureStore(); render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') )
大家会看到这个项目跟上一个redux入门中的项目结构，甚至代码都类似，因为就是从上一个代码的基础上改的，不明白可以看上一篇文章。
主页就不多说了，开始的页面布局和引入css文件和打包之后的js文件。
主要说一下上面提到的功能。
首先是排序。排序的原理是什么？根据心排序，心的多少。
Box是那三个新闻，这里会根据children来循环遍历出来，那个children是啥呢？是redux的store的counter数据排序之后的数据。
可以看到，我自己写了一个数据排序，根据数据的val属性排序，然后遍历，就是完成了心的特性。
state={ counter:{ one:{id:1,counter:0,title:"xxxx" ,time:1}, two:{id:2,counter:0,title:"xxxx", time:1}, three:{id:3,counter:0,title:"xxxx",time:1} } }
这里的counter数据，counter是心的数量。排序就不说了，看代码吧。
评论功能呢，有三个难点。1是点击回复弹出input框，2是如何回复当前的评论。比如我回复的评论必须是这个评论，而不是下一个。3就是如何把评论内容显示出来。
最难的就是2了。这个还要设计一下store的数据结构。我用了一个小方法避免了添加id。这个以后再说。
1。点击弹出input框。
写react或者ng应用也不能用jquery的思想写了。点击弹出不能用click事件操作dom了。转变为react的思想，props和state。于是，要这样写。
这是根据state渲染dom阿，然后点击操作state。对了，react有个操作state的方法和初始化state的方法来着。叫getInitialState。
这里有个隐藏的坑，es6的写法不能用getInitialState。于是我就像上面这样写。es6怎么写state呢。于是我在下面的组件里又这样写：
这个state成为了这个组件的一个属性，但是确实没法用getInitialState了。不过可以用 this.setState({display: false})。这样写。来操作state
2，这个比较麻烦，首先看一下我设计的评论的store：
var data=[ [ { text:"这里是评论1", huifu:["huifuxxxxxxxxxxxxx",'2xxxxxxxxxxxxxxxxxxxx','3xxxxxxxxxxxxxxxxx'] }, { text:"这里是评论1.2", huifu:["huifuxxxxxxxxxxxxx"] } ],[ { text:"这里是评论2", huifu:["huifuxxxxxxxxxxxxx",'2xxxxxxxxxxxxxxxxxxxx','3xxxxxxxxxxxxxxxxx'] } ],[ { text:"这里是评论3", huifu:["huifuxxxxxxxxxxxxx",'2xxxxxxxxxxxxxxxxxxxx','3xxxxxxxxxxxxxxxxx'] } ] ]
这是整个评论的部分，包括回复。如果你要添加评论就在data[文章id].push(一样结构的评论数据)，回复也是直接添加数据。
问题来了，那我们怎么保证这个回复是这个评论的呢，比如我回复123，你怎么知道是评论1的还是评论1.2（代码中的评论1.2）的呢?
这里有个小方法。我的评论框是独立于遍历之外的，就是说，你不能给他传一个文章id。那怎么办？
它取本组件的state。然后评论操作state。就是这样。评论在打开一个回复input的时候，传入本评论的id，改变本组件的state，然后就不管它的事了。
这里的小方法避免了每个评论都加一个id属性，而是一个评论数组，用的就是数组map方法的keys--
keys，是数组的键，也就是0，1，2，3用这个当作文章id。可以的！
注意这里你循环出子组件的时候，必须给他一个key的props，由于react的diff算法，必须保证子组件的位置和渲染正确，传一个key，那正好，没有id我就用这里的keys传了：
这样就没问题了。
3。显示的问题，就是上面的遍历的问题了，输入框的显示就是组件自身state的问题了。
看组件是如何显示：
{ data[newId].map(function (items,keys) { return ( <div key={keys} className="body-text"> <h5>游客: <a onClick={that.handleClick.bind(that,keys)}>回复</a> <a href="">转发</a></h5> <p>{items.text}</p> { items.huifu.map(function (item,keyss) { return ( <div key={keyss}> <h5 className="huifu-user">游客回复：<a onClick={that.handleClick.bind(that,keys)} >回复</a> <a href="">转发</a></h5> <p className="huifu">{item}</p> </div> ) }) } </div> ) })
}
data数组是我们的数据，上面给了格式。循环遍历。
主要的是回复框的显示，操作state，这里给了他一个display属性，但是他不是true和false，而是false和keys，这个keys就是当前评论的id，这个id成为遍历的keys属性。
1的时候那张图就是根据display显示，这就不多说了。
react的优势：
其实这么多文件夹，这么多js文件，用js写，逻辑又清楚又快，而用react写还带有学习成本。为啥用react写。抛开赶前端潮流不说。react的优势在于维护起来爽翻天。
js写这些逻辑刚开始写完是很清晰，我觉得过一段时间以后，想维护就很难了吧。还有一点，我想改数据的时候直接修改state，想加一个新闻就复用我的组件，根据react的虚拟dom的算法，也是不慢的。
用redux的优势就是等这个新闻项目做大，一堆一堆的js代码，如果有redux维护那就简单多了。因为纯函数的关系，redux的测试也是非常好写的。redux压缩前600行代码，加上react也是轻量级框架，这点也是很受人好评的。
用这些框架都是类似，都是数据流，他们让你用数据控制页面。ng也是如此，操作仅仅是修改数据，而不会频繁的操作dom。这是框架的优点。react在此基础上做到的低耦合，单项数据流。经常听到有react维护比较爽的呼声。-。-好维护，低耦合，轻量级。正好符合现在前端对框架的要求。于是好多人选择了react。还有JSX的写法也是比较爽的0.0react背后还有facebook撑腰。嗯，必火。。。
关于本新闻端的问题：
问题在于这里：三篇新闻，每一篇当作一个事件来处理，于是--
export const LOVE_COUNTER_ONE = 'LOVE_COUNTER_ONE' export const LOVE_COUNTER_TWO = 'LOVE_COUNTER_TWO' export const LOVE_COUNTER_THREE = 'LOVE_COUNTER_THREE' export const TXST_COUNTER_ONE = 'TXST_COUNTER_ONE' export const TXST_COUNTER_TWO = 'TXST_COUNTER_TWO' export const TXST_COUNTER_THREE = 'TXST_COUNTER_THREE' export const HF_COUNTER_ONE = 'HF_COUNTER_ONE' export const HF_COUNTER_TWO = 'HF_COUNTER_TWO' export const HF_COUNTER_THREE = 'HF_COUNTER_THREE'
有人会说，如果100篇新闻，岂不是写n多的action？
当初在写的时候，想的是作为新闻的主页，我只放3个新闻，后面加一个更多，点开打开新闻列表页。当然，如果把这个作为新闻列表页那确实要写n多的xxx。。
那当这个新闻端改为新闻列表页怎么写呢？
首先构建一个store，把新闻id，新闻内容写进去。当然也可以组合它的评论和回复，不组合，通过id关联也是可以的。。（怎么感觉像数据库了0.0）
那这里的action就变了，改为TXST_COUNTER_NEWS，当然，这个action需要传文章的id。这个不麻烦。
reducer这里就根据文章id操作store，如果不组合评论和回复，那么，这个新闻store只需要删减新闻内容。注意新闻删了，对应的评论和回复也要删除。
组合评论和回复呢，那么也是同样，评论和回复的内容留给游客们去添加。
组件里就注意了，因为新闻组合了，那么上面就需要传一个新闻id，智能组件根据id传方法与数据给呆滞组件。。原理是这样。大家可以试着修改一下，自己动手能学到很多东西。
还有就是webpack打包文件太大怎么办。我这个文件3m，本地加载都要143ms，这段时间3张下载完的图片并排，很丑。。
这里的减少体积大小的方法就是关闭source map，devTool也关了。重复的文件打包成common.js，还有就是压缩文件- -，当然这些都是生成环境下了。
这里测试了一下（未传到github），未压缩前可以弄到864k，当然公共库，比如Swiper可以用cdn，压缩完后这样一个数量级的应用就可以用在移动端了。
这里的操作是-删除没用的react-bootstrap，删除重复的style-loader，删除source-map及webpack hot replace及一些webpack常用插件。
还有一点，把文件作为chunk按需加载，这个貌似这个场景下还是不需要的。
需要注意的就这么多，接下来会添加路由功能，使他真正的成为spa的应用。当然，大神的标志之一---会不会写测试也会一并补齐。敬请期待~
最新更新：2016-04-25 单元测试已经补齐哦~ 博文地址：点我~ github地址：点我~
