在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
标签：至少1个，最多5个
?CoderPad-基于React全家桶写作/新闻一体综合应用的实践总结
大家伙儿们，又见面了?。 自上次Byemess Todo之后，觉得自身不足还是挺多的，期间又萌生了一些将它重构加上更多新特性的想法，之后技术磨炼一阵再来好好改造它。对于Learn by doing这种事情，一次就会上瘾啊有木有?，于是乎本着继续精进练习React技术栈，以及实践更多相关技术的初衷，besides that，自己还想再准备一个小项目来为找工作打底气，于是乎就有了CoderPad。
? WHY IS THIS
在最开始的时候，是想做一个催稿app，又是一个集成的idea:提供分类书单，可以记录阅读情况，然后根据这个情况设定或者后台计算智能推荐：何时去写一篇相关的博客(技术博客)，当然写作也是在这个app里完成，然后自动部署至github page。 名字我都想好了，就叫催乎...（知乎er们懂的)，奈何这是个大工程啊... 我就造出了这么个只有编辑，阅读的阉割版。 另外关于写完markdown直接部署生成静态博客的app我推荐好基友的，很用心的app，向他学习之，他马上又会写出一个UI逆天美的音乐播放器了，你们可以关注他。
? WHAT IT IS
Markdown： 支持本地缓存，保存/删除/查看/下载，追求极简。
NewsFeed： 集成v2ex，HackerNews-Top Stories， Github-Trending
Music: 暂未施工
?Techniques
老朋友React全家桶： 对于这块，值得一提的是react router v4，相对于v3的巨大改动，extremely make sense. 让route与组件化思想更贴切，有种幻觉：定义子route更加随心所欲了。至于为什么... 请君上手感受。
Immutable: 有一些细微的坑，主要体现在数据类型转化上，immutable会将原生JS数据类型进行包装，如Map，List，在对它们进行提取的时候需要注意是否已经转化为原生JS，否则容易出错。 我的建议就是时刻注意提取的数据是什么类型，结合PropTypes进行参数检测，出错时先console看看，一般很快可以解决。 对于多层对象嵌套的时候，为了保险，手动将被嵌套的对象进行指定类型转化，比如{ list: [] } =& { list:Immutable.List([]) }，如果要偷懒的话可以直接使用fromJS，但是这个方法渗透性强，会将所有内嵌结构进行转化，在本项目的后期重构里就遇到了子数组遍历出来全是immutable object的情况，需要手动再次转化，很是恶心。 这些缺点在redux文档里也有表述，在具体实践后才能有更直观的理解。 参照: .但不可否认Immutable.js非常符合react的思想，都在处理大规模数据时彰显优势。
Reselect：它用来替代我们手写的state selector， 它的主要思想： state1 + state2 =& state3， 缓存先决state，它们如果计算结果是相同的，就使用缓存结果不去改变最终state，同样也是immutable思想。 在结合immutable.js的时候，也是坑啊，还是那个老问题，数据类型，state嵌套越深，越麻烦。 所以，现在明白为什么强调Redux State扁平化了吧？
Redux Saga: Oh my.. 无比亲切，至于原因： 我写过这么一篇文章:. Saga致力于解决复杂场景下的异步流程控制，用它来管理action触发，酸爽无比。 毕竟控制异步流程这种成就在JS话题下本身就是爽的不要不要的。 本质是使用generator，对于理解CO库的同学们，掌握saga不在话下。在操作极其频繁的场景下(比如游戏），你会感受到他的威力。 推荐一篇文章： ， 在本项目里我主要用它来控制news数据的拉取，采用axios.
Styled Components: 老朋友，更新了2.0版本，同样配合styled-props，效果拔群。 至于一些宏观上的样式设置，的确不如直接写CSS那么直观。 我采用的方法是，特性按组件写，通性和一些涉及多层级样式都放在wrapper里。 也许单独使用styled-components并不能发挥出色，配合传统CSS写法，应该可以相得益彰。
?Problem and Solution
ref: 对于ref的感觉一直是又爱又恨，毕竟在react之前，dom操作被我们玩的飞起，而react官方的态度一直是不建议使用。 在这次的项目中，markdown editor处的textarea我便采用了Uncontrolled的形式，使用ref保存dom引用。 初衷是为了对频繁的内容变动进行debounce处理，当编辑暂停时才触发一次内容state更新。 随着组件的增加，在一个嵌套达到3层的modal组件里，需要对textarea的value进行重置操作，好了，这下我得从父组件一层层的把这个ref传进去。 那感觉简直不能再糟.... 一刹那感觉官方文档就像和蔼的老司机，句句肺腑之言啊！ 不过在你真的遇到这个坑前，是不会有多深的感受的。 要解决这个恶心的传递，只有采用controlled形式，onChange监听，value直接链接state.
Perf: 作为性能测量的利器，测试结果让我发现styled-components的消耗是可观的，尤其是更新到v2.0版本后。在其他方面，由于本项目里的newsFeed可能会涉及频繁点击切换路径的情况，为了防止无谓的重复渲染，给所有presentational components都设置为PureComponent， 接着在一些只需要更新一次的组件里手写shouldComponentUpdate， 还是强调一点： 必须十分清楚传入的参数，以及其结构，并考虑这个结构是否在生产环境中有变化的可能导致判断失效。 还有个值得注意的问题是react-router-v4里的NavLink检测location渲染当前激活地址的link(activeClassName属性)时，注意组件是否是PureComponent， 如果是，必须在父组件传入location，否则PureComponent的shouldComponentUpdate将会判定参数无变化，从而block掉link的动态渲染。参照:
Server Side: 由于是使用leancloud部署，用node环境，为了解决v2ex api的跨域问题，自己写了一套请求转发，但是问题来了： 单页APP里为保证刷新后不出现cannot get等问题，必须写上一条app.get('*', (req, res) =& {res.sendFile('index.html的路径')} )， 这就很麻烦了，后来经过请教，用正则过滤了请求转发涉及的路径，就避免了路径全局拦截。但是！ 这样刷新后，又会遇到cannot get的问题了。 因为再次刷新时url已经变化，浏览器会去请求这个地址，而后台并没有提供此路径的响应。 最好的办法是使用nginx部署环境。(express难道就没办法？ 还是我服务端知识短浅啊...要恶补） 另外一个问题： 生产环境和部署环境下由于使用了不同的请求地址，返回的数据的结构存在微小差异，以本项目为例，请求v2ex topic在生产环境下数据是res.data，而到了部署环境下由于使用了自己设置的请求地址，返回的数据成了res.data[0]，找了很久才发现问题，值得注意。
Cancellation: 在newsfeed里频繁切换页面时还有一个问题： 也许下一个页面呈现时，上一个页面中触发的fetch操作还没执行完毕。举个例子： 我进入了v2ex的页面，此时组件拉取新闻信息，接着我几乎不等待便切换至github，此时对于v2ex的拉取还在进行。这就是一种浪费了。 为了解决它，起初我尝试用saga结合react-router-redux里提供的LOCATION_CHANGE action来作为判定取消之前未完成fetch的标志。 测试发现就算我点击的是同一个link，依然会触发LOCATION_CHANGE，（真坑啊，完全不符合直觉好么！？）那么有这么一个场景： 当你进入hackerNews等待数据返回，由于时间较久，你不耐烦的再次点击了hackerNews的Link，Boom~~！ LOCATION_CHANGE dispatched. 于是乎你的fetch被取消了...，所以用LOCATION_CHANGE作为判定标志在首次拉取这个场景下是不可行的(论corner case重要性..)， 后来想出来的解决办法是在三块新闻组件的componentDidMount的顶部dispatch一个STOP_FETCH action，然后将判定取消的标志改为:STOP_FETCH，算是解决了，可总感觉有点暴力，因为一旦组件变多，将要手动。接下来将继续思考更优雅的解决方案，如果大神们有答案，请告知。
最大的收获： 主动找上问题，而不是问题找上你。 不折腾，不踩坑，进步颇微。
当container变多时，直接将container component作为单位，单独设立目录，然后放置对应的components/styled-components/reducer/action. 这就是按feature组织目录的方法。 细致的拆分，解耦性更好，以container component为单位进行修改时，大大降低误伤率的同时，隔离无关的信息。
大概总结出一个Learn by doing的心路历程：
被未尝试的技术吸引，并且有了下一个project的idea
尝试拆分所需技能，分成组块(裂墙推荐知乎组块学习论)
漫长的学习过程： 读文档，找样例，写小demo倒腾API。由于组块积累未完全，所以无法对project全面下手，自然会很烦躁，并且踏出了舒适区，接收更多的信息。
组块知识积累完毕，project开始施工： 从最简功能需求开始，不断增加新feature: problem -& google -& resolve.
Project成型，评估，修正，改进，more problem come in.
项目总结。然后享受一下独立完成project的成就感。同时也会深刻理解自己的不足，为自己的技术精进之路指明了方向。
以project为单位，循环以上步骤。
最后的领悟： 我早几年干什么去了... 捶胸泪目ing。
?More Feature?
未来可能会补上的：
白噪音组合播放
音乐部分（哈哈哈偷懒了时间不多了，赶紧找工作。）
作为一名新人，还请大家多多指教。同样无耻的求star，2333。
0 收藏&&|&&2
你可能感兴趣的文章
116 收藏，1.7k
113 收藏，4.3k
5 收藏，652
本作品采用署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
分享到微博？
我要该，理由是：查看: 1288|回复: 3
第一次用coderpads，这东西到底怎么用啊
精华主题学分
中级农民-加分请看右边栏-多参与|分享|记录|反馈, 积分 277, 距离下一级还需 23 积分
在线时间 小时
月)-[]CS硕士+<3个月短暂实习/全职
- 内推| 码农类其他@multiplefresh grad应届毕业生
注册一亩三分地论坛，查看更多干货！
才可以下载或查看，没有帐号？
试了一下coderpad的demo，但是怎么都出错。
举例：进去之后代码是这样的：class Solution {. 鐣欏鐢宠璁哄潧-涓浜╀笁鍒嗗湴
& & public static void main(String[] args) {. more info
& && &&&XXX
}复制代码之后我要是想添加自己的类的话他说要define them inline，是指直接define在solution类里面吗？还是在solution下面另起一个类，因为我平时写都是在static void main函数类下面另起一个类的，如果放在solution里面的话方法岂不是都要定义成static？
精华主题学分
在线时间 小时
你直接在main里面new一个solution啊。然后新new的instance调用你在solution里面写的解题函数。
我举个例子吧
import java.io.*;
class RemoveDup.1point3acres缃
& & private String RemoveDupString(char[] input) {
& && &&&if(input == null || input.length == 0) {
& && && && &
& && &&&}-google 1point3acres
& && &&&int end = 0;
& && &&&for(int index = 0; index & input.
& && && && && & index++) {. Waral 鍗氬鏈夋洿澶氭枃绔,
& && && && &if(index == 0) {
& && && && && & end++;. 1point 3acres 璁哄潧
& && && && &} else if(input[index] != input[index-1]) {
& && && && && & input[end] = input[index];
& && && && && & end++;
& && && && &}
& && &&&}. more info
& && &&&return new String(input, 0, end);. 鐣欏鐢宠璁哄潧-涓浜╀笁鍒嗗湴
& & }. 鐣欏鐢宠璁哄潧-涓浜╀笁鍒嗗湴
& & public static void main (String[] args) throws java.lang.Exception
& & {. /bbs
& && &&&RemoveDup ex = new RemoveDup();
& && &&&String array = &&;
& && &&&System.out.println(ex.RemoveDupString(array.toCharArray()));
& && &&&array = &accvd&;
& && &&&System.out.println(ex.RemoveDupString(array.toCharArray()));
& && &&&array = &avcs&;
& && &&&System.out.println(ex.RemoveDupString(array.toCharArray()));. /bbs
精华主题学分
在线时间 小时
你直接在main里面new一个solution啊。然后新new的instance调用你在solution里面写的解题函数。.
我举个例 ...
现在知道了 我第一次的时候把自己的类写在solution下面 不知道怎么都是报错
精华主题学分
在线时间 小时
.鐣欏璁哄潧-涓浜-涓夊垎鍦
现在知道了 我第一次的时候把自己的类写在solution下面 不知道怎么都是报错
哦哦。另写一个类确实应该也可以~. 鍥磋鎴戜滑@1point 3 acres
你解决了就好~
<form method="post" autocomplete="off" id="fastpostform" action="forum.php?mod=post&action=reply&fid=28&tid=208213&extra=&replysubmit=yes&infloat=yes&handlekey=fastpost"
onSubmit="
// TODO Howard 11/3/2015
var sbtn = $('fastpostsubmit');
sbtn.disabled =
sbtn.innerHTML = ' 回复发表中... ';
sbtn.setAttribute('background', sbtn.style.background);
sbtn.setAttribute('bordercolor', sbtn.style.borderColor);
sbtn.style.background = '#C7C7C7';
sbtn.style.borderColor = '#8B8B8B';
var form =
// --product--
var isValid = fastpostvalidate(form, null, 0);
if(!isValid) reoverBtn();
return isV
// --product--
// --testing--
//setTimeout(function() {
// var isValid = fastpostvalidate(form, null, 0);
// if(!isValid) reoverBtn();
//}, 2000);
// --testing--
您需要登录后才可以回帖
回帖并转播
回帖后跳转到最后一页
一亩三分地推荐 /5
地主Warald亲手做你的申请，针对你的背景和目标，考虑申请、学习、就业、移民等系列问题，制定申请策略。
“offer”指全额奖学金，免学费全免+每月工资，Berkeley, CMU, JHU, UIUC, Gatech, UMich, UCLA, Columbia，欢迎观赏。
电子工程、计算机、统计、金数金工、化工等, Stanford, Berkeley, CMU, Cornell, Yale, Columbia, Chicago, Duke, UPenn, UIUC, Brown, UMich, JHU等
有留学、申请、找工、职业规划上的难题？先上论坛提问！
论坛考古也帮不上忙，发帖得到的回答仍然不够？电话找Warald来解答！
WARALD新书上市啦：《你不知道的美国留学》清华大学出版社，各大电商发售
Powered byCoderPad Status
Afghanistan (+93)
Albania (+355)
Algeria (+213)
American Samoa (+1)
Andorra (+376)
Angola (+244)
Anguilla (+1)
Antigua and Barbuda (+1)
Argentina (+54)
Armenia (+374)
Aruba (+297)
Australia/Cocos/Christmas Island (+61)
Austria (+43)
Azerbaijan (+994)
Bahamas (+1)
Bahrain (+973)
Bangladesh (+880)
Barbados (+1)
Belarus (+375)
Belgium (+32)
Belize (+501)
Benin (+229)
Bermuda (+1)
Bolivia (+591)
Bosnia and Herzegovina (+387)
Botswana (+267)
Brazil (+55)
Brunei (+673)
Bulgaria (+359)
Burkina Faso (+226)
Burundi (+257)
Cambodia (+855)
Cameroon (+237)
Canada (+1)
Cape Verde (+238)
Cayman Islands (+1)
Central Africa (+236)
Chad (+235)
Chile (+56)
China (+86)
Colombia (+57)
Comoros (+269)
Congo (+242)
Congo, Dem Rep (+243)
Costa Rica (+506)
Croatia (+385)
Cyprus (+357)
Czech Republic (+420)
Denmark (+45)
Djibouti (+253)
Dominica (+1)
Dominican Republic (+1)
Egypt (+20)
El Salvador (+503)
Equatorial Guinea (+240)
Estonia (+372)
Ethiopia (+251)
Faroe Islands (+298)
Fiji (+679)
Finland/Aland Islands (+358)
France (+33)
French Guiana (+594)
French Polynesia (+689)
Gabon (+241)
Gambia (+220)
Georgia (+995)
Germany (+49)
Ghana (+233)
Gibraltar (+350)
Greece (+30)
Greenland (+299)
Grenada (+1)
Guadeloupe (+590)
Guatemala (+502)
Guinea (+224)
Guyana (+592)
Haiti (+509)
Honduras (+504)
Hong Kong (+852)
Hungary (+36)
Iceland (+354)
India (+91)
Indonesia (+62)
Iran (+98)
Iraq (+964)
Ireland (+353)
Israel (+972)
Italy (+39)
Jamaica (+1)
Japan (+81)
Jordan (+962)
Kenya (+254)
Korea, Republic of (+82)
Kuwait (+965)
Kyrgyzstan (+996)
Laos (+856)
Latvia (+371)
Lebanon (+961)
Lesotho (+266)
Liberia (+231)
Libya (+218)
Liechtenstein (+423)
Lithuania (+370)
Luxembourg (+352)
Macao (+853)
Macedonia (+389)
Madagascar (+261)
Malawi (+265)
Malaysia (+60)
Maldives (+960)
Mali (+223)
Malta (+356)
Martinique (+596)
Mauritania (+222)
Mauritius (+230)
Mexico (+52)
Monaco (+377)
Mongolia (+976)
Montenegro (+382)
Montserrat (+1)
Morocco/Western Sahara (+212)
Mozambique (+258)
Namibia (+264)
Nepal (+977)
Netherlands (+31)
New Zealand (+64)
Nicaragua (+505)
Niger (+227)
Nigeria (+234)
Norway (+47)
Oman (+968)
Pakistan (+92)
Palestinian Territory (+970)
Panama (+507)
Paraguay (+595)
Peru (+51)
Philippines (+63)
Poland (+48)
Portugal (+351)
Puerto Rico (+1)
Qatar (+974)
Reunion/Mayotte (+262)
Romania (+40)
Russia/Kazakhstan (+7)
Rwanda (+250)
Samoa (+685)
San Marino (+378)
Saudi Arabia (+966)
Senegal (+221)
Serbia (+381)
Seychelles (+248)
Sierra Leone (+232)
Singapore (+65)
Slovakia (+421)
Slovenia (+386)
South Africa (+27)
Spain (+34)
Sri Lanka (+94)
St Kitts and Nevis (+1)
St Lucia (+1)
St Vincent Grenadines (+1)
Sudan (+249)
Suriname (+597)
Swaziland (+268)
Sweden (+46)
Switzerland (+41)
Syria (+963)
Taiwan (+886)
Tajikistan (+992)
Tanzania (+255)
Thailand (+66)
Togo (+228)
Tonga (+676)
Trinidad and Tobago (+1)
Tunisia (+216)
Turkey (+90)
Turks and Caicos Islands (+1)
Uganda (+256)
Ukraine (+380)
United Arab Emirates (+971)
United Kingdom (+44)
United States (+1)
Uruguay (+598)
Uzbekistan (+998)
Venezuela (+58)
Vietnam (+84)
Virgin Islands, British (+1)
Virgin Islands, U.S. (+1)
Yemen (+967)
Zambia (+260)
Zimbabwe (+263)
Message and data rates may apply. Go to /legal/customer-agreement for terms and conditions.
All Systems Operational
About This Site
This is CoderPad's status and uptime tracker. Updates about downtime will appear here in case of an outage. Additionally, you can view some statistics about the health of our systems - like page load times and execution latency.
Operational
Execution Tier
Operational
Operational
Degraded Performance
Partial Outage
Major Outage
Maintenance
C Execution Latency
Ruby Execution Latency
Java Execution Latency
Firebase Connect Latency
Past Incidents
No incidents reported today.
No incidents reported.
No incidents reported.
No incidents reported.
No incidents reported.
No incidents reported.
No incidents reported.
No incidents reported.
No incidents reported.
No incidents reported.
No incidents reported.
No incidents reported.
No incidents reported.
No incidents reported.
No incidents reported.?CoderPad-基于React全家桶写作/新闻一体综合应用的实践总结 - 简书
?CoderPad-基于React全家桶写作/新闻一体综合应用的实践总结
大家伙儿们，又见面了?。 自上次Byemess Todo之后，觉得自身不足还是挺多的，期间又萌生了一些将它重构加上更多新特性的想法，之后技术磨炼一阵再来好好改造它。对于Learn by doing这种事情，一次就会上瘾啊有木有?，于是乎本着继续精进练习React技术栈，以及实践更多相关技术的初衷，besides that，自己还想再准备一个小项目来为找工作打底气，于是乎就有了CoderPad。
? WHY IS THIS
在最开始的时候，是想做一个催稿app，又是一个集成的idea:提供分类书单，可以记录阅读情况，然后根据这个情况设定或者后台计算智能推荐：何时去写一篇相关的博客(技术博客)，当然写作也是在这个app里完成，然后自动部署至github page。 名字我都想好了，就叫催乎...（知乎er们懂的)，奈何这是个大工程啊... 我就造出了这么个只有编辑，阅读的阉割版。 另外关于写完markdown直接部署生成静态博客的app我推荐好基友的，很用心的app，向他学习之，他马上又会写出一个UI逆天美的音乐播放器了，你们可以关注他。
? WHAT IT IS
Markdown： 支持本地缓存，保存/删除/查看/下载，追求极简。
NewsFeed： 集成v2ex，HackerNews-Top Stories， Github-Trending
Music: 暂未施工
?Techniques
老朋友React全家桶： 对于这块，值得一提的是react router v4，相对于v3的巨大改动，extremely make sense. 让route与组件化思想更贴切，有种幻觉：定义子route更加随心所欲了。至于为什么... 请君上手感受。
Immutable: 有一些细微的坑，主要体现在数据类型转化上，immutable会将原生JS数据类型进行包装，如Map，List，在对它们进行提取的时候需要注意是否已经转化为原生JS，否则容易出错。 我的建议就是时刻注意提取的数据是什么类型，结合PropTypes进行参数检测，出错时先console看看，一般很快可以解决。 对于多层对象嵌套的时候，为了保险，手动将被嵌套的对象进行指定类型转化，比如{ list: [] } =& { list:Immutable.List([]) }，如果要偷懒的话可以直接使用fromJS，但是这个方法渗透性强，会将所有内嵌结构进行转化，在本项目的后期重构里就遇到了子数组遍历出来全是immutable object的情况，需要手动再次转化，很是恶心。 这些缺点在redux文档里也有表述，在具体实践后才能有更直观的理解。 参照: .但不可否认Immutable.js非常符合react的思想，都在处理大规模数据时彰显优势。
Reselect：它用来替代我们手写的state selector， 它的主要思想： state1 + state2 =& state3， 缓存先决state，它们如果计算结果是相同的，就使用缓存结果不去改变最终state，同样也是immutable思想。 在结合immutable.js的时候，也是坑啊，还是那个老问题，数据类型，state嵌套越深，越麻烦。 所以，现在明白为什么强调Redux State扁平化了吧？
Redux Saga: Oh my.. 无比亲切，至于原因： 我写过这么一篇文章:. Saga致力于解决复杂场景下的异步流程控制，用它来管理action触发，酸爽无比。 毕竟控制异步流程这种成就在JS话题下本身就是爽的不要不要的。 本质是使用generator，对于理解CO库的同学们，掌握saga不在话下。在操作极其频繁的场景下(比如游戏），你会感受到他的威力。 推荐一篇文章： ， 在本项目里我主要用它来控制news数据的拉取，采用axios.
Styled Components: 老朋友，更新了2.0版本，同样配合styled-props，效果拔群。 至于一些宏观上的样式设置，的确不如直接写CSS那么直观。 我采用的方法是，特性按组件写，通性和一些涉及多层级样式都放在wrapper里。 也许单独使用styled-components并不能发挥出色，配合传统CSS写法，应该可以相得益彰。
?Problem and Solution
ref: 对于ref的感觉一直是又爱又恨，毕竟在react之前，dom操作被我们玩的飞起，而react官方的态度一直是不建议使用。 在这次的项目中，markdown editor处的textarea我便采用了Uncontrolled的形式，使用ref保存dom引用。 初衷是为了对频繁的内容变动进行debounce处理，当编辑暂停时才触发一次内容state更新。 随着组件的增加，在一个嵌套达到3层的modal组件里，需要对textarea的value进行重置操作，好了，这下我得从父组件一层层的把这个ref传进去。 那感觉简直不能再糟.... 一刹那感觉官方文档就像和蔼的老司机，句句肺腑之言啊！ 不过在你真的遇到这个坑前，是不会有多深的感受的。 要解决这个恶心的传递，只有采用controlled形式，onChange监听，value直接链接state.
Perf: 作为性能测量的利器，测试结果让我发现styled-components的消耗是可观的，尤其是更新到v2.0版本后。在其他方面，由于本项目里的newsFeed可能会涉及频繁点击切换路径的情况，为了防止无谓的重复渲染，给所有presentational components都设置为PureComponent， 接着在一些只需要更新一次的组件里手写shouldComponentUpdate， 还是强调一点： 必须十分清楚传入的参数，以及其结构，并考虑这个结构是否在生产环境中有变化的可能导致判断失效。 还有个值得注意的问题是react-router-v4里的NavLink检测location渲染当前激活地址的link(activeClassName属性)时，注意组件是否是PureComponent， 如果是，必须在父组件传入location，否则PureComponent的shouldComponentUpdate将会判定参数无变化，从而block掉link的动态渲染。参照:
Server Side: 由于是使用leancloud部署，用node环境，为了解决v2ex api的跨域问题，自己写了一套请求转发，但是问题来了： 单页APP里为保证刷新后不出现cannot get等问题，必须写上一条app.get('*', (req, res) =& {res.sendFile('index.html的路径')} )， 这就很麻烦了，后来经过请教，用正则过滤了请求转发涉及的路径，就避免了路径全局拦截。但是！ 这样刷新后，又会遇到cannot get的问题了。 因为再次刷新时url已经变化，浏览器会去请求这个地址，而后台并没有提供此路径的响应。 最好的办法是使用nginx部署环境。(express难道就没办法？ 还是我服务端知识短浅啊...要恶补） 另外一个问题： 生产环境和部署环境下由于使用了不同的请求地址，返回的数据的结构存在微小差异，以本项目为例，请求v2ex topic在生产环境下数据是res.data，而到了部署环境下由于使用了自己设置的请求地址，返回的数据成了res.data[0]，找了很久才发现问题，值得注意。
Cancellation: 在newsfeed里频繁切换页面时还有一个问题： 也许下一个页面呈现时，上一个页面中触发的fetch操作还没执行完毕。举个例子： 我进入了v2ex的页面，此时组件拉取新闻信息，接着我几乎不等待便切换至github，此时对于v2ex的拉取还在进行。这就是一种浪费了。 为了解决它，起初我尝试用saga结合react-router-redux里提供的LOCATION_CHANGE action来作为判定取消之前未完成fetch的标志。 测试发现就算我点击的是同一个link，依然会触发LOCATION_CHANGE，（真坑啊，完全不符合直觉好么！？）那么有这么一个场景： 当你进入hackerNews等待数据返回，由于时间较久，你不耐烦的再次点击了hackerNews的Link，Boom~~！ LOCATION_CHANGE dispatched. 于是乎你的fetch被取消了...，所以用LOCATION_CHANGE作为判定标志在首次拉取这个场景下是不可行的(论corner case重要性..)， 后来想出来的解决办法是在三块新闻组件的componentDidMount的顶部dispatch一个STOP_FETCH action，然后将判定取消的标志改为:STOP_FETCH，算是解决了，可总感觉有点暴力，因为一旦组件变多，将要手动。接下来将继续思考更优雅的解决方案，如果大神们有答案，请告知。
最大的收获： 主动找上问题，而不是问题找上你。 不折腾，不踩坑，进步颇微。
当container变多时，直接将container component作为单位，单独设立目录，然后放置对应的components/styled-components/reducer/action. 这就是按feature组织目录的方法。 细致的拆分，解耦性更好，以container component为单位进行修改时，大大降低误伤率的同时，隔离无关的信息。
大概总结出一个Learn by doing的心路历程：
被未尝试的技术吸引，并且有了下一个project的idea
尝试拆分所需技能，分成组块(裂墙推荐知乎组块学习论)
漫长的学习过程： 读文档，找样例，写小demo倒腾API。由于组块积累未完全，所以无法对project全面下手，自然会很烦躁，并且踏出了舒适区，接收更多的信息。
组块知识积累完毕，project开始施工： 从最简功能需求开始，不断增加新feature: problem -& google -& resolve.
Project成型，评估，修正，改进，more problem come in.
项目总结。然后享受一下独立完成project的成就感。同时也会深刻理解自己的不足，为自己的技术精进之路指明了方向。
以project为单位，循环以上步骤。
最后的领悟： 我早几年干什么去了... 捶胸泪目ing。
?More Feature?
未来可能会补上的：
白噪音组合播放
音乐部分（哈哈哈偷懒了时间不多了，赶紧找工作。）
作为一名新人，还请大家多多指教。同样无耻的求star，2333。