对收藏的Github仓库的代码行数排行(现学现用React)

#1

https://jasonzhouu.github.io/github-loc-rank-online/

18-17_42_46

做这个网页的起因是我想了解自己收藏的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 appneutrino
  • 需要额外的学习成本,不过并不高。

学习资料

  • The Road To Learn React,内容比较浅,适合入门,看完了40%
  • 阿里员工编写的《深入React技术栈》,内容比较深,讲了很多原理,看完了20%

使用工具

  • create react app:用于创建项目
  • gh-pages:用于将打包好的页面发布到github pages
  • cogo-toast:用于弹出提醒
#2

www.4everland.org最近有个叫4EVERLAND挺火的,支持40G免费空间和无限流量,还支持cdn加速和ssl证书,体验下来挺稳定,建议可以试试