发布
设计9个cube盒子，然后通过css animate让每个盒子跳动的时间不一样，从而达到这种效果。
- 加载动画与swiper
通过调用swiper.js的onSlideNextStart与onSlidePrevStart进行滑动前的初始化，滑动的时候便显示加载动画，直至请求数据完成渲染后，便隐藏该动画。
- axios与反向代理：
通过axios返回一个promise对象，去请求接口的数据，发现会报跨域问题，基于vue项目的经验，我在react的setupproxy.js中设置了反向代理：
```
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use(proxy.createProxyMiddleware('/apis', { target: 'https://i.snssdk.com' }));
}
```
请求数据:
```
axios({
url: '/apis/search/api/study',
method: 'get',
params: {
keyword: this.props.searchword,
offset: 0
}
}).then(res => {})
```
不一样的是对于react的proxy写法需要调用creatProxyMiddleware方法。
- 部署
- nginx服务器部署
由于没有个人的服务器，这里只能简要讲述一下之前开发过的部署流程：
服务器下载nginx，然后将react项目打包后的dist上传到对应的nginx的静态资源放置位置，开启nginx即可。
- node 部署实际上是属于后端接口的部署，由于这个项目不用自己写接口，于是我便通过axios去获取数据，没有用到node koa等老师讲述的相关知识，不过本人已经掌握。
- github-page部署：github新增了一个查看项目静态界面的一个page功能，所以没有服务器的我将界面部署在了githubpage中。
- 页面性能优化
- 节流防抖：对于搜索功能来说，实时监控用户输入的内容并且去请求推荐的关键字是一个必不可少的过程，本项目通过设定一个定时器的方式，去防止用户每次输入一个字符便去请求服务器：
```
//timer是一个定时器
if (this.timer) {
clearTimeout(this.timer)
}
//若定时器还存在，则清除定时器然后重新开始
if (e.target.value) {
this.timer = setTimeout(() => {
this.getKeyWords();
}, 300);
//重新设定定时器，请求完成后清除定时器
this.setState({
listType: 2
})
} else {
this.setState({
listType: 1
})
}
```
- FCP与LCP：
FCP（白屏时间）:1772.3ms
LCP(最大快内容时间):2987.9ms
对于这个没有图片的项目来说，这两个指标其实不会太大，更多的是github-page的DNS解析时间，获取github-page的静态资源的时间。
- 如果从一个自己部署的服务器来说，那么我们可以在打包的时候将chunk分成多个小部分从而提高加载速度；将图片懒加载（这个项目没有图片。。只有一个标题栏的小图标），也可以通过预加载的方式将首页需要的数据先提前请求过来。
三、个人感想
- 一方面由于之前有过一些企业的项目经验，但是对于那些企业级开发来说，他们更注重的是需求，而不是性能方面的优化，于是对于性能优化的方面其实很少涉及到。
- 另一方面对于nodejs的了解其实很浅，一开始我觉得nodejs写后端服务器不如java（之前在学校学的都是java），所以就比较忽略了node这个方面的知识点，这次学习node之后，发现实际上node不比其他语言差，node其实在慢慢的改进和发展，对于一个前端攻城狮来说，学会node是一件必备的技能，于是后面的学习计划就添加了这一项。
- 此外，对于这个小项目来说其实还是有很多瑕疵的，对比上线的今日头条app，我发现还是存在着很多的差异，后期还要不断去思考，去改进。
**在此感谢字节跳动的老师们的辛苦教学，着实学到了很多东西！谢谢！**
ps:项目新增了很多的空文件和路由，是为了继续react的学习和深造以及项目的优化，请老师谅解。