image.png
简介
Eyepetizer是个人比较喜欢的美而小的短视频日报应用
原站使用jquery实现, 正好api没有限制, 于是用react高仿了一下. 应用不复杂但是为了展示完整的开发流程, 所以把主流的技术栈都用上了, 适合新手入门
技术栈
- React-router
- Redux
- Redux-saga
- CSS in JS (styled-components)
- Immutable.js
- Flow.js
- PWA
- Responsive
预览
pc端
手机预览
image.png
截图
主页
主页
视频
视频
使用
总结
笔者在生产环境下使用vue比较多, 在以vue先入为主的思想上谈谈对react的看法, 若有错误之处请多多指教
-
单向数据流很棒, 不同于
vue + vuex, 在react + redux中actions也是props, 组件也可以只是接收props输出dom的函数, 配合dumb/smart组件的概念, 以及类似saga中拆分effects的做法, 使得react中测试非常清晰.
当然严格遵循这种思想会带来props chain的尴尬, 出现这种问题更好的解决方法是重新选择connect的层级或者思考组件切分粒度 -
关于
CSS in JS, 也就是尤雨溪前几天live所讲到的Colocation, 个人比较喜欢, 这使得组件的输出更为稳定, 不会出现样式污染, 使组件更组件, 目前觉得react中各个库的实现方案都没有vue中scope style优雅 -
框架的选择, 也是被大家说烂了的问题, 在项目没有达到一定量级且没有
native需求之前我更推荐vue, 使用vue能让我更好的专注业务而不是挑选眼花缭乱的库, 并思考什么才是最佳实践.
但我觉得每个前端都应该深入了解react社区, 不可否认它们更让我学习更多更前卫的思想, 而不仅限于'精通api的使用'
最后贴上本项目的github地址
如果对你有所帮助的话, 可以帮忙点个star
image.png












网友评论