注册账号登录
吴世剑
小度鱼作者,野生设计师,野生程序员。
关注

关于项目优化的思考小记

上周末思考一下如何优化项目(小度鱼Web版),梳理了一下大概的几个方向,并写了一些小demo验证一下可行性。

1、增加单元测试

很早以前版本有单元测试版本,但后来因为自己频繁改动UI、功能、代码重构,

之前的单元测试已无法使用了。

感觉当时的单元测试都没有发挥出作用,然后在后续版本迭代中就gg了,

虽然掌握了单元测试,但其实并没有发挥出作用。

现在感觉项目功能、UI趋近稳定,是时候应该逐步增加单元测试了,周末将jest+enzyme环境调通,

增加了一个登录的单元测试。

https://github.com/54sword/xiaoduyu.com/blob/develop/src/app/components/global/sign-modal/__tests__/index.js

测试用例如果要覆盖比较全面,需要消耗不少的开发时间,逐步进行吧。

2、使用react hook重写当前的组件

react这次增加的hook功能,不影响老代码,因此可以慢慢重写之前的组件。

但redux还不能在hook中使用,需要等react-redux 7.1.0版本。

https://react-redux.js.org/next/introduction/quick-start

react hook也提供了类似redux的功能,但还不敢用来完全替换redux,

因为目前WEB和RN版本的redux部分是(100%)共用的,替换成本有点高。

https://zh-hans.reactjs.org/docs/hooks-reference.html#usereducer

有新组件的时候,会先思考使用hook来写,不行再考虑用react.components。

3、上TypeScript

配置ts环境比我想象中的要简单,配置上 @babel/preset-typescript,就可以写了,

https://babeljs.io/docs/en/babel-preset-typescript#docsNav

尝试简单写了一个demo组件,连接redux、使用css modules都没问题。

但在单元测试里面页使用ts的,以及在ts里使用hook,出现了一些问题,

还没有调通,后面还需要继续探索研究。

https://github.com/54sword/xiaoduyu.com/blob/develop/src/app/pages/tstest/index.tsx

2条评论 / 6条回复

good

回复

提些建议吧。

1,redux没必要用,增加工作量和复杂度,后期维护起来也很烦。

2,等react-apollo v3 发布了再做,v3支持hooks,以及自带更简洁的状态管理功能。

过去使用redux,很多逻辑,包括数据处理等等都是当做全局状态使用redux来处理,但实际上这是错误的,真正需要全局状态的地方其实很少,redux的作用从一开始就被夸大和滥用了。hooks正好解决这个问题,用了react-apollo v3已经完全不需要任何状态管理器了,极致简化。

3,使用react做开发,样式组件化才是未来,推荐使用styled-components,我正在用,非常爽。

4,如果只是想多平台统一,可以用京东的taro跨平台框架,或者react-native-web等等。

回复

cool~

redux 还是历史选择原因,现在切换其他成本有点高,因为需要多方面调研(SSR、单元测试、能否在RN中使用)可行性。不过对于一些不需要全局状态的组件,确实会优先考虑用hook useReducer这类的方案。

react-apollo 还是不错的,可以完美使用 graphql。

styled-components 有了解一点点,还没有机会去尝试。

taro 的跨平台解决方案,我个人可能对它还没有很大的信心,自己开发RN的时候,就已经快搞崩溃了,对其他厂商的方案我还是比较谨慎,怕掉进另一个坑里。因为自己经手的RN项目已经开始复杂,使用了很多第三方组件, react-native-aliyun、react-native-map、react-native-iap、网易云信、微信登录、等等,我很难相信自己可以再taro里面掌控好它们,因此还是比较谨慎选择,目前只是用来开发微信小程序。

5月27日
回复

redux很有必要,因为项目大了对于数据和状态管理必然是一个相当复杂的事情。

react hooks很棒,这个项目 https://github.com/devhubapp/devhub 已经全部使用hooks构建组件了。可以慢慢往hooks上迁移

5月28日
回复

这个项目厉害,好多前端新技术都用上了,收藏学习了!

5月28日
回复

感觉不会TS,完全看不懂。需要学习的还很多啊。换一种写法,就看不懂了。JS,真是博大精深啊。

5月29日
回复

ts和js差不多,前端环境配置稍微折腾一点,目前的develop分支已配置好了ts环境,只是还没有时间去重写...

5月29日
回复

感觉语法上,还有一些属性不一样。得去看一下文档。

5月29日
回复
吴世剑
小度鱼作者,野生设计师,野生程序员。
关注私信
308
关注
107
粉丝
158
帖子