使用React全家桶高仿「Eyepetizer」开眼

2019-12-05 11:57:08 浏览数 (1)

本文作者:IMWeb applecatkay 原文出处:IMWeb社区 未经同意,禁止转载

简介

Eyepetizer是个人比较喜欢的美而小的短视频日报应用

原站使用jquery实现, 正好api没有限制, 于是用react高仿了一下. 应用不复杂但是为了展示完整的开发流程, 所以把主流的技术栈都用上了, 适合新手入门

技术栈

  • React-router
  • Redux
  • Redux-saga
  • CSS in JS (styled-components)
  • Immutable.js
  • Flow.js
  • PWA
  • Responsive

预览

pc端

demo地址

手机预览

截图

使用

见README

总结

笔者在生产环境下使用vue比较多, 在以vue先入为主的思想上谈谈对react的看法, 若有错误之处请多多指教

  1. 单向数据流很棒, 不同于vue vuex, 在react reduxactions也是props, 组件也可以只是接收props输出dom的函数, 配合dumb/smart组件的概念, 以及类似saga中拆分effects的做法, 使得react中测试非常清晰. 当然严格遵循这种思想会带来props chain的尴尬, 出现这种问题更好的解决方法是重新选择connect的层级或者思考组件切分粒度
  2. 关于CSS in JS, 也就是尤雨溪前几天live所讲到的Colocation, 个人比较喜欢, 这使得组件的输出更为稳定, 不会出现样式污染, 使组件更组件 , 目前觉得react中各个库的实现方案都没有vuescope style优雅
  3. 框架的选择, 也是被大家说烂了的问题, 在项目没有达到一定量级且没有native需求之前我更推荐vue, 使用vue能让我更好的专注业务而不是挑选眼花缭乱的库, 并思考什么才是最佳实践. 但我觉得每个前端都应该深入了解react社区, 不可否认它们更让我学习更多更前卫的思想, 而不仅限于'精通api的使用'

最后贴上本项目的github地址

0 人点赞