React项目中展示图表

Posted 2023-04-13

参考技术A 最近React项目中遇到了需要添加图表（折线图）展示的需求。

前端这块可用的图表库真的是非常多的，各种库都有，可以满足各种需求。比如这个 20 个最棒的 javascript 图表库 中就介绍了很多不同的图表库，其中它有提到的就是 chartjs 。基于这篇文章上面提到的，以及自己和项目负责人知道的，我们试验了以下3个图表库。

由于 echarts 是项目负责人之前用过的，并且是百度团队开发的，支持度以及维护性会好些，所以一开始选择的这个库。
这个库做出来的图表也非常不错。只是在部署测试时，就变得非常慢，由于项目打包已经成型，是每个模块打包成一个单独的大文件，所以，打包出来的文件大小有2.7M之大，导致一般不是只需要2、3分钟的时间变成了将近一个小时之久。
后来将项目中只引入需要的折线图 line ，发现打包出来仍然有2.3M这么大。

在部署的时候，导致 gulp 命令占用cpu过高，导致构建很慢。

所以不得不放弃这个库。

同样的理由，我们选择了试用蚂蚁金服开发的 antv 来试验一下，不过打包出来的文件仍然很大，并且部署速度和上一个几乎没区别，也不得不放弃这个库。
虽然这个库做出来的图标也非常好。

但是实际上我打包出来文件的大小为2.1M,也不小，但是部署时间很快，3分钟左右即可完成。

vue中小型项目开发浅谈

组件的本质
　　组件的本质就是一个可以交互的视图模板

controller去哪了
　　在react中存在展示组件与容器组件，其中展示组件展示单纯的展示，而容器组件里面则是react与redux沟通的桥梁，而redux是包含业务逻辑的地方，所以controller存在于react的容器组件中，但是在vue中没有容器组件的概念，然而我们可以编写出一个容器组件，用于存在其他展示组件，这通常是一个页面或者是页面里的某个模块

是否需要model层
　　对于中小型项目，大部分业务逻辑都已经被node中间层给处理了，前端只是单纯的拿到数据 展示数据，并不存在复杂的业务逻辑，但也不是完全没有业务逻辑，单纯开辟一个model层太过于浪费，是否可以将model层放于容器组件之中？

真的需要vuex吗
　　vuex是为了解决组件间数据共享，组件数据深层传递问题，但是并不是只有vuex才可能解决这个问题，组件间数据共享可以用sessionStorage,深层传递可以用provide/inject

mvc在前端
　　mvc的本质是大型项目的解耦，其解决办法是业务逻辑于视图的分离，然而什么是视图层，什么是业务逻辑层，并不是说 放在pages里面就是视图层，放在model里面就是数据层，本质在于你如何分离你的代码，在上面 我将业务逻辑放在容器层里面，而将视图层 分散在组件里面，这是因为中小型项目没有必要单独扩展出一个model层，中小型项目根本不需要mvc，但是mvc的思想依然值得我们借鉴，即代码的抽象分离

混入的重要性
　　一旦我们取消了model层，对于中型项目而言，我们肯定是存在一些共用的业务逻辑的，我们需要将共用的部分抽离到混入中