https://jasonzhouu.github.io/github-loc-rank-online/
做这个网页的起因是我想了解自己收藏的github仓库的代码行数，从中筛选出受欢迎、中等规模的项目，参与开发或者阅读源码，以便学习。但是github没有查看项目总代码行数的功能，所以便参考gloc的方法写了一个npm包用来计算代码行数，并将这个功能用网页的形式呈现。
上周末花2天时间用原生JS实现
这几天用React重构，现学现用，耗时2天8小时。（从16日10点决定用React，到18日18点完成）
用React写页面，感觉不那么头疼了。
原生JS的优缺点
优点：
- 不需要进行复杂的配置
- 思路直观
缺点：
- 每次数据更新，都要手动重新渲染页面;
- 数据的管理用的是全局变量（这是我的问题，有更好的做法）;
- 对DOM的操作太多让代码不易读。
React的优缺点
优点：
- 数据更新时，自动重新渲染页面；
- 单向数据流很清晰，数据统统保存在最顶层组件的state里，使用回调函数接收子组件的用户输入数据，父组件给子组件传新数据；
- 使用component did update生命周期函数，当状态改变时，将其同步到 localStorage；
- CSS modules使得样式代码更容易维护；
- React Developer Tools浏览器插件使得不用打断点调试也能方便的查看运行状态。
缺点：
- 配置麻烦。解决办法：使用脚手架create react app，neutrino
- 需要额外的学习成本，不过并不高。
学习资料
- The Road To Learn React，内容比较浅，适合入门，看完了40%
- 阿里员工编写的《深入React技术栈》，内容比较深，讲了很多原理，看完了20%
使用工具
- create react app：用于创建项目
- gh-pages：用于将打包好的页面发布到github pages
- cogo-toast：用于弹出提醒