从 Vue 到 React —— 第一印象

学习 React 的初衷

之前说过想要学习 React，秉持着边学边记录的想法，我随即开启了这篇帖子。

从 Vue 说起

我是一个 Vue 的忠实粉丝，虽然没有全部读过 Vue 的源码，但是对它的基本实现原理和大体的使用方法还是比较熟悉的。我自己思考过，我觉得我喜欢 Vue 大概率是因为我最早接触的前端开发框架就是 Vue。记得是 2018 年参加一项 SRT 的时候，为了开发一款简单的后台管理系统，我开始学习 javascript 以及 Vue。

当时我还是第一次接触脚本语言，对没错，我接触 javascript 比接触 python 更早一些。熟悉了 C/C++ 的继承机制之后，突然要接受 javascript 的原型链继承一时间有点缓不过来。但是后来还是被磨平了棱角，被迫接受了原型这一设计。为了开发 Web 应用通过一位学长的介绍接触到了 Vue 这个框架。我直接惊为天人，还能这样写？因为根据我更早之前的一些浅显的印象，Web 开发是分别要编写 HTML，javascript 和 CSS 三种文件的。现在用 Vue 一个文件就可以生成一个完好的页面，着实非常酷炫。也是在 Vue 这里，我了解到了组件、生命周期、全局状态管理、前端路由等等一些重要的概念，所以先入为主地对 Vue 有强烈好感也正常吧。

Vue 的好处就不说了，这里主要想说以下我遇到的问题：

1. 在写 Nuxt 项目写到功能比较重的组件时，一个组件 Vue 文件代码可能会到 800 ~ 900 行，写完 template 后滑滚轮滑到 script 部分找到 methods 里对应的地方写函数，如果模板部分出问题了还得滑回去。文件行数一旦长了，这个上下滑动找代码块的过程真的有点难受，一旦思考过程中出现一小段的空挡，那么就有可能导致思绪完全断掉。
2. 另外，Vue 的代码复用方案我觉得不是特别好：模板方面的槽和脚本方面的混入这两个我觉得不是特别优雅，尤其是混入。混入的文件一旦多了可能会造成组件难以维护的问题，例如不知道模板中使用的某个属性到底是 mixin 中来的还是从 data 或者 props 中来的，如果出现覆盖那么覆盖规则、覆盖后的值又是什么。
3. 插件支持我觉得也没有做得特别好，虽然 Vetur 已经做到相当好了，但有一些情况仍旧是解决不了的，比如上面说的 mixin，其中的属性或者方法就没有办法在调用的页面当中提供补全提醒。
4. 最后，因为总是遇到一些不可名状的 Bug，我打算以后项目的开发要用 typescript，但是 Vue 对 typescript 的支持不是特别好（听说 Vue 3.x 版本有所改善，但是看了一下 Vue3 的文档觉得 composition API 和 React 实在是太像了，不是特别感冒），所以有些打退堂鼓。

总的来说，Vue 的问题不是特别大，我也没有在做很大型很复杂的项目，上面说的小瑕疵不是本质问题（有问题应该也是我自己能力还没到位）。但是总让我觉得有可以更好的地方。

React 哪里吸引我

React 是 Facebook 推出的用于构建用户界面的 Javascript 库，应该是目前最热门的“前端框架”，加上引号是因为我觉得它其实不算是一个框架，只是一个“库”，扩展了 js/ts 的语法特性，使它们可以更方便地写 Web 应用。

它很火，看着也很酷，更原汁原味，更轻量化，更自由，有更多的可能性，这应该就是我想了解它的原因吧。

对 React 的第一印象

读了一下官方的入门教程，React 给我印象最深的有下面几个方面：

1. 完全使用 js/ts 编写，没有增加新的文件类型，在 vscode 中编码体验良好（jsx/tsx 不太算新类型吧）；
2. state 与普通属性区别开来，如果需要更新需要显式的调用 setState 方法，虽然牺牲了一定的灵活性，但是也一定程度上促进了数据的安全访问；同时，这样近于“严苛”的 state 更改方法会鼓励开发者将组件拆分成更小的部分；
3. 提供函数组件和类组件两种写法，函数组件的写法可以省很多空间；
4. React Hooks 看起来像是 Vue Composition API 的原型，函数组件用起来会比较“优雅”；
5. JSX 渲染函数的写法可以将实现某功能项的代码尽可能的收缩到同一个空间区域，拥有更好的空间“局部性”，免于在 template 和 script 之间来回切换打断思路的困扰；
6. 阿里的 Ant Design 为 React 前端开发提供了一个很好的组件库和设计规范，不得不说，阿里对优化用户体验真的有很深入的研究。

之后探索的方向

但是其实前端框架归根结底做的事情都是一样的，是让开发者能够较为轻松地开发出易于测试、易于维护、方便拓展、体验良好的跨平台的 Web 应用。不管是之前写 Vue 代码还是之后要写的 React 的代码，都是为了这样一个同样的目的。然而如果仅仅光想着实现功能而不去思考更多，很容易陷入为写代码而写代码的陷阱当中。

因为我在实验室课题组里负责了几个项目，几乎每个项目都是不超过3人的小团队。如果开发周期稍微变长一些，项目的功能就会变得异常复杂，而作为开发者，在测试的时候很容易就会局限在正常（或者说正确的）业务逻辑当中，不会发现一些匪夷所思的问题。（感觉真的很难让一个要写正确逻辑业务代码的开发者去做一些极不符合预期的事情。）测试很重要。只要不是自己小打小闹的学习性质地写着玩儿，测试就是极其重要的。测试保障的是软件的质量，在任何有甲方的项目当中，没有进行详尽测试都是不负责的。在写后端代码的时候，测试起来比较容易，因为提供的 API 是可预期的，传入什么样的参数，返回什么样的响应，都是清清楚楚的。至少对于开发者自己来说，后端代码都是白盒，将单元测试覆盖率提高就可以显著地提高代码的可靠程度。那么前端测试呢？

前端测试中主要有单元测试、组件测试和端到端测试。单元测试其实并不区分写的是前端还是后端的代码，都是追求更高的代码覆盖率。而组件测试和端到端测试可能对于前端应用来说更重要吧，因为前端应用给用户操作的组合是无限的，用户可以选择以任何路径，触发页面任何元素可能的动作，想要详尽地测试属实比较困难，但是组件测试和端到端测试应该都是比较成熟的测试方案，能够在一定程度上提高应用的可靠程度。

之后除了继续接触 React 之外，我还会去了解一些组件测试和端到端测试的最佳实践，扩充一下自己的前端知识储备。