前段时间对于我做的一个基于 React 制作的本地版记账项目进行了技术总结，今天来尝试找出项目中暂存的不足之处和今后的改进目标。
项目不足
1.采用本地缓存
目前来说，这个项目最大的不足就是只支持 localStorage，而不能实现不同用户展示不同数据
2.标签可视化效果较差
目前项目中的标签只是简单地添加了背景颜色和调整了形状，虽然实现了选中的效果，但是并不像市面上流行的记账 App 中的 Icon 一样，设置不同的标签会有不同的图标出现，导致用户体验欠缺。
目前标签效果：
标签选中效果：
期待效果：
3. 缺少单元测试
这点是针对项目本身的，我在实现整个功能的过程中都是依靠页面上实时预览的调试，而没有去创建一个完整的单元测试文件，这导致了我开发、调试效率偏低的问题
期望功能
-
实现远程服务器存储数据。暂定使用 docker 来创建一个 mysql 数据库来存储我的本地数据，当用户提交数据后，应该把数据存到 mysql 的数据库中，并且实现从数据库中读取数据来进行页面的展示和 Echarts 的改动 -
创建用户登陆机制。搭建服务器，实现用户登陆来限制访问权限，主要登录方式应该包括 Token 登陆、微信登录和手机号登陆 -
多元化的标签选择。应该在源代码中增加默认标签的数量，并加上相对应的 Icon，这里可以自己封装 Icon 组件，也可以引用市面上流行的 antDesign 的 Icon 组件 -
增加单元测试。应该使用 jest 等单元测试插件构建单元测试，以提高代码的调试效率 -
创建其他平台版本。如果时间允许的话可以使用微信小程序或者手机 App 等形式创建另外的版本，因为网页版毕竟使用起来体验欠缺，基本功能保持一致，但是需要将语法、标签等换成对应的标准
总结
整个项目实现下来，我有如下的思考：
-
项目过程中遇到没见过的库或框架是非常正常的事，这时如果直接百度或 Google 没有找到正确使用方法的话，应该去查看官方文档或者 gitHub 源码
-
写代码应该尽量避免重复，在项目中我就为了避免重复，经常性将重复超过两次的代码想办法抽离出来，这样既保证了代码整体的美观性，也在很多时候别的组件或函数想调用时更加方便
-
不能急于实现一整个完整的项目，应该把大项目拆分成一个个小的部分，然后每一个部分的功能分别去实现，最后在代码重构的过程中将不同部分的功能联系在一起，就像砌墙一样
-
CSS 会占用大量时间，所以我们在项目一开始敲定的时候，就应该有一个较为完整的设计稿，否则根本没办法进行排版和分析页面结构
-
参考市面上流行的功能类似的项目，可以让我在用户体验和交互方面省心不少，而不用自己去构想交互方式
-
在项目发布的时候应该尽量压缩最终的文件大小，否则将影响页面性能，造成不好的体验，这点可以通过 package.json 不同的生产模式来实现，还可以在 build 的过程中把所用到的库的源代码剔除
