ReactJS 漫谈

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

因为并没有实际使用过 AngularVue ,所以不能将它们一起比较。以下只是我在实际开发中使用 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 的语法糖将 jshtml 混写在一起。我认为他们并没有理解数据、显示所代表的意义。这里的数据并不是一个单纯的 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 框架我也是刚用,看了文档,并且社区也是人很多。组件的拆分,特别是函数的单一职责原则,是测试通过最好的方式。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容

  • 参考文章:深度剖析:如何实现一个Virtual DOM 算法 作者:戴嘉华React中一个没人能解释清楚的问题——...
    waka阅读 5,888评论 0 21
  • Gitbook Repo 撰写本文的时候笔者阅读了以下文章,不可避免的会借鉴或者引用其中的一些观点与文字,若有冒犯...
    王下邀月熊阅读 1,049评论 1 9
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,771评论 1 18
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,570评论 25 707
  • 这是一部从编剧到表演都很燃的一部剧。我在想为什么电影的名字叫《战狼》,不叫《战虎》或者《战豹》呢。 我最近看了三本...
    宜爱阅读 541评论 2 6