ReactJS 漫谈

伴随着 react 已经奋斗了两个商业项目，多次迭代。实在是因为很喜欢，所以用 react 写了一个小项目，关注于算法小游戏以及前端动效——Games 目前在 码云 开源，基于 Apache 协议，小伙伴们轻点踩。

因为并没有实际使用过 Angular 与 Vue ，所以不能将它们一起比较。以下只是我在实际开发中使用 react 的一点理解。
React 优化方案

组件化

react 中无处不是组件，但这不是它的首创。其实它还有很多兄弟姐妹：面向接口编程、封装、代码复用、面向测试、单一职责原则等等这些名词，你会觉得它们都有共通点。因为它们的中心思想都离不开高内聚低耦合，我相信学过计算机的人都不会没听过这两个词。如果你非要我解释它们的意思，估计也只能说更高的内聚，更低的耦合。

组件化 我理解就是为了复用。为了这一点，你不得不进行很多测试，无论是用框架测还是鼠标点，键盘敲。复用性决定了你的代码必须要面对更复杂的使用环境。所以不用别人教，你写的代码越多，重构的次数越多，你的组件就会更接近单一职责，一对多的问题总会比多对多解决起来更简单。有幸在工作中遇到很多牛人，我认为他们其中的一个共通点就是对封装、继承玩的很6。

14年实习的时候，当时公司使用的是 jsp ，使用了一段时间之后，我就觉得这是一个非常糟糕的技术，即便作为教学也是如此。它给我的感觉是我的代码会写的乱七八糟，而且会非常多，渐渐地会失去对代码的审美。可能是因为自己当时能力很菜，并没有体会出它的高明之处。其实基于 js 模版引擎 的实现会更优雅。事实上在下一家公司，我们使用了 thymeleaf ，也认识了对我影响非常大的技术大咖，这更加让我感觉 jsp 并不是优雅的实现方式。

当时我们需要做一款网页编辑器，所以封装了很多文本组件，这些组件需要接受文本、图片输入，需要进行跨浏览器的兼容性、自适应，需要互相之间能够嵌套…… 这是我第一次认识到了前端也可以组件化。之前我认为组件这种思想只是在后台的各种数据处理函数：时间组件、字符串组件；而前端都是一个个的页面，最多也就是样式文件、函数抽离成公共文件，但是它们之间都是零散的，相互之间很难有所联系，从没想过能把 html 从显示到动作打个包抽离成组件。

SPA

随着 js 执行引擎性能大幅度提升，单页应用也成为 web 前端重要的变革。无刷新渲染为体验带来质变。为 webapp 带来了性能上的可行性。对于单页，并不是没有刷新，只是它是通过脚本实现的 html 局部替换。这很容易让我想到 Ajax ，其实纯用 Ajax 是可以写出一个 spa 的，我肯定不会这么做。

到底怎样的一个应用才能算是单页应用呢？我认为取决于控制层是否位于前端。

但是无论是 jsp 还是 thymeleaf ，我们的后台都是 java ，都使用了 spring mvc 框架，控制层都是在服务端，事实上我认为 MVC 三层都是在服务端。客户端只是非常单纯的接受数据渲染，当数据变化的时候，重新刷新或者脚本刷新。如果这种架构需要做 spa ，前后端都要维护一套业务逻辑。

那么现在对于我所写的单页应用，情况正好反过来了，我们大量的逻辑代码都在前端，包括控制层，后端基本只剩下了 API。

这就是为什么阮大神说的，react 需要结合上 react-router 才能发挥它真正的威力。

Virtual DOM

这个是 react 非常出名的一个特性，很多人关注的都是 Virtual DOM 的性能，但是我的使用情况告诉我，相比性能，其实 Virtual DOM 带来的最大好处是我可以专注于数据处理，而不需要关心 DOM 的渲染的问题（目前还没遇到渲染性能成为瓶颈的情况，瓶颈基本都是出在数据加载、端到端的通信上）。这点结合上 组件化 的思想就会让世界变得简单，你的组件在任何地方都不需要关注渲染的问题，你只需要处理业务逻辑就好了。

尤其对分页处理的数据集非常棒。比如聊天窗的消息，其实每条消息都是一个组件，如果这些组件需要自己处理渲染，你肯定不能在渲染性能与数据对比之间平衡的很好，毕竟我们不是 facebook 的那些大牛。

有些人说 react 破坏了 数据与显示 分离的原则。他们可能是片面的看到 jsx 的语法糖将 js 与 html 混写在一起。我认为他们并没有理解数据、显示所代表的意义。这里的数据并不是一个单纯的 json 对象，你的整个 react 组件都是数据，包括组件自己的逻辑处理代码。只有组件被渲染的时刻才是显示，只要没有被最终渲染，逻辑代码可以一直处理数据，这里的数据可能随时都在变化。react 认为组件里的数据其实都是组件的一种状态，当数据再次变化后，也就是组件的状态改变 react 又将重新渲染变化后的组件。这里 react 并不是暴力的重新渲染整个 dom 树，而是只会渲染变化的 dom 点。这就是 Diff 的功劳。每个组件只关注自己的渲染，通过这种 �分治 的思想来把 dom 渲染的时间复杂度降低。在 react 之前，我们需要自己处理大量的比对，而这部分的工作很操蛋的。这里的数据就是组件的状态，显示就是 Virtual DOM 负责的渲染，从这点上看，react 完美的将数据与显示分离了，并且还避免了过度渲染。

也正是 Virtual DOM 的存在，我们不需要也不应该自己操作 dom 节点。这在设计上就与另一个大名鼎鼎的前端框架 jQuery 相背，因为 jQuery 里到处都是 dom 操作。个人认为 jQuery 不应该算是一个框架，应该只能算是一个工具集，并且在学校的时候，用过一段时间 jQuery ，当时的感觉就是它的这个功能我应该用原生 js 可以实现，那个功能也可以自己实现。事实上，用了半年的 react 期间一直没碰过 jQuery ， 刚开始不习惯，可是没过几天，也没什么了，过去依赖 jQuery 的地方，现在都自己写，并且还挺有意思。

Mocha(测试)

Mocha 框架我也是刚用，看了文档，并且社区也是人很多。组件的拆分，特别是函数的单一职责原则，是测试通过最好的方式。