Fleece重构笔记

九九

3 年前

最后更新：2021-04-03
创建时间：2021-03-05

1.更新日志

update: 2021-03-23

1. 引入`Router`，支持动态生成/路由切换;

2. 组件
重构`Code`组件（早期fleece页面）采用父子传值和传方法保持状态，

`TimeLine`组件引入`redux`保持全局状态和当前组件状态

3. 移植`angular`版本[`totoro`](https://github.com/flyher/totoro)至本页面`timeline`, 为单独样式, 仅使用`jsx`;

4. 为`timeline`新增`navbar`效果;

5. 优化`theme`初始化效果；

update: 2021-03-03

1. 将项目的 `npm run eject` 模式改为 `create-react-app`模式，便于后面升级/(ㄒoㄒ)/~~

https://create-react-app.dev/docs/getting-started

2. axios返回的 res.statusText 在firefox依然返回'OK',而在最新版`Chrome 88.0.4324.190 x64`中返回变为``空字符串, 去掉了这个判断chrome加载数据恢复正常。

3. 删除以下测试生命周期：
componentWillMount -> UNSAFE_componentWillMount
componentWillReceiveProps -> UNSAFE_componentWillReceiveProps

4. 引入`bootstrap`;

5. 移除`org profile`;

update: 2018-05-28

1. 基于`react,typescript,webpack`，仿造`github`风格重构本页面;
2. 支持配置用户名及多用户名;
3. 支持`org profile`,`pin project`, `all projects list`;
4. 初次请求`github api`获取数据并存储到`localstorage`, 24小时内超时重新请求`api`数据;


update: 2017-08-09

1. 初始化本项目
2. `markdown`版本(`strapdown`)

截图：

ver.2021-03-29

ver.2018-05-28

ver.2017-08-09

轮播图就懒得折腾了

2.说明

这篇文章是2021-03-05写的，补上之前挖的坑。

技术栈：React, Typescript 和 Webpack。

Mirror 1

Mirror 2

install

npm install

release

npm run build

debug

npm run start

Fleece是三年前再次看React，对比一下各大框架的生命周期，又想补点typescript，就带上了，不过写起来感觉懒惰，类型没补全(还是ES6方便)，就用cli初始化了一个。

那个时候npm run nject了一下，换成了webpack，折腾。

去年偶然间用Chrome打开Fleece,发现突然打不开了，然后换Firefox，一切正常。

本来不打算维护，毕竟上古了很久，我一般也是一时兴趣，再说可能对以前写的代码过敏，毕竟工具人，没兴趣了就懒了下来。

最近正好在思考目前的职业未来，情绪不佳，索性顺道改一下。

发现了几个问题，

React每次升级总会改点东西，改改生命周期，虽然这几个版本不多，但是也让人难受一阵子。毕竟react-native是这样的。
Chrome浏览器更新有时候也会引入一些奇怪的东西，比如这次加载不出来的问题，其实发现是在请求github数据的时候出了点问题。

当然这个可能是Chrome与axios共同作用的结果，毕竟之前一直是正常的嘛。

这次改是直接用react cli重新初始化了cli版本的，这次没手贱nject，官方说这是为了以后升级。
老版本用的less换成了scss，差别不是多大。
直接把老版本的src代码copy过来，发现typescript类导出的静态变量不用再加public了，否则会报错(这点没细追)。
删除以下测试生命周期：
componentWillMount -> UNSAFE_componentWillMount
componentWillReceiveProps -> UNSAFE_componentWillReceiveProps