ReactJs实战感悟

写这篇博文之前，不免先自我介绍一下，作为一个在编码一线搬砖多年，涉猎过C、C++、Java、C#、Javascript等多种语言，从前台到后台，从工程到理论，从Coder到Manager、Director，经历了程序设计师、系统分析师等各种形形色色的考试的超期服役的软件开发者，现在算是彻底放下了，不以编码作为生存方式，可以随心所欲的玩编码了，也开始能把自己的体会和领悟说说了。

虽然平时大家都自嘲是IT民工，但真没几个人认为自己民工，多少带着一些自嘲、自豪的成分，但本人认为软件开发就是个普通的技术活，跟石匠、木匠真没什么太大区别。有人会问：你为什么干这么久？个人觉得主要有几个原因：

一是只会这个，别的干不了；

二是待遇还不错；

三是真的喜欢，说不上激情，却依然觉得有趣。

之前看过一本书《人类简史》，里面有一个很有意思的观点：人类的发展和进步是靠着一个又一个虚幻的故事推动的。看完后，真是与我心有戚戚然。曾经的理论研究经历让我深深的佩服软件人士的聪明智慧，造理论、创新词、讲故事的功底在我所熟知的领域里，估计只有金融人士才能媲美，然而恰恰是这两个行业的人拿着顶级的收入，这背后也许存在着某种必然的联系吧。

闲扯半天，无非是想说在没有出现颠覆性变革之前的各种新技术的吹捧，很大成分是在讲故事，所谓的新技术无非是老的技术和方法的排列组合。全世界都一样，只是中国玩的更溜一些，全世界论文数量第一，却很少有自己的核心、原创技术。

我虽然很早就接触前段技术，却从未深入学习，主要是实用主义，需要什么拿过来就用，没有系统性的学习。这两年前端技术发展变化很大，从HTML，Javascript 到Css都进行了较大的升级。涌现出来AngularJS、ReactJS等多个热门框架，跟随这些基础框架的细分框架就更多。2014年到2015年算是AngularJS最火的时候，2015年到2016年ReactJS算是最火的了，我从2015年接触ReactJS,也了解了一下AngularJS。个人还是比较喜欢ReactJS,当我第一眼看到AngularJS时，我就心生厌恶（个人喜好），大量的Html文件与JS文件让我觉得很乱，没有一点好感。也许是干过多年的软件工程，看见结构复杂，代码不清晰的框架就不想看第二眼了。之后就是用ReactJS做了大半年的项目，整体感觉不错，会让你对Javascript编程方式有一个大的改观，类似于C#、Java等后台代码的编程方式，随着ES6的出现，Javascript更像是结合了面向对象和面向函数两者的优点，大有屌丝逆袭的趋势。

面向对象与面向函数给我的映像是：面向对象更严谨，结构更清晰，高内聚低耦合度更好；面向函数更方便，能省则省。我是不喜欢讨论什么语言好，什么框架好的。如同Java与C#之争，CMM与敏捷之争。遇到什么问题，哪个符合当时场景用哪个，CMM过程通过裁剪还能转换成敏捷呢。

进入ReactJS的官网，我们首先看到的是Component-Based和Learn Once Write Anywhere，这是React V15.1.0的首页，在ReactV0.14.0的首页则显示的是Virtual Dom 和 DataFlow。这并非说ReactJS的特点变了，个人觉得可能是FaceBook在商业口号上定位改变，而这些特点却早已融入到ReactJs的骨头里，每个具体特点在实际项目中的表现只能且听下回分解了，现在只谈谈各自的整体感受。

1.Component-Based（组件化）

组件化在前端可能算是新潮，准确的说在Web前端算是新鲜事物，在桌面运用和后台却是由来已久，尤其是同为前段的WPF技术在多年前推出时就被认为是颠覆UI的技术。如果玩过WPF的人再学习ReactJS,会更容易。组件化、数据双向绑定等在AngularJS,ReactJS热炒的概念早就是SilverLight、WPF的力推，又是一种旧的语言+旧的模式的组合而已。

ReactJs是单页面程序，所有的页面代码最终将转化为一个页面，然而页面中的任何元素都可以封装成一个独立的组件。大到整个页面，小到一个输入框，都可以是一个组件，同时ReactJs为这种组件组合、封装制定了一套完整的规则和方法，使得编程非常方便，如同Java，C#中的类，包以及DDL等。

ReactJs通过props实现父子组件的数据传递，通过state实现组件内部数据传递。当然每个人对组件的看法不一样，写出来的代码也不一样，可能出现型似而神不似，这种情况在面向对象的编程中常常出现。一些新手或者多年面向过程的编程者往往使用了类，写出来的代码却依然是面向过程的思想。我觉得无论是组件化还是对象化，最根本的是达到“高内聚、低耦合”的要求，至于怎么才算是面向对象、面向组件，则需具体代码比较了（下回分解了）。

组件化是我认为ReactJs最受欢迎的特点了。

2.Learn Once Write Anywhere

Learn Once Write Anywhere主要是指React已经成为一种跨平台、跨前后端的语言，ReactJs不仅适用于Web UI ，也适用于Node,以及移动App，并且采用React Native编写的App，只需少量的代码改动就能同时在Android，IOS上运行。这也是我觉得ReactJs前途远大的重要原因。我最早接触C#，觉得非常棒，与Java不相上下，然而由于微软的固步自封，已经远远落后于Java，现在基本上开放性、跨平台是我学习语言的重要考虑因素。

3.Virtual Dom

Virtual Dom是ReactJs宣称它更帅更快的重要原因。开发WebUI的都知道，在页面上进行Dom树查找是非常费时费力的事情，由此在Jquery中还有多种为提高查找效率的写法。ReactJs却提供了虚拟Dom树，在内存中保持实际Dom树的拷贝，如果Dom树发生变化，则先修改内存中数据，然后保存到时间Dom树中。这将比直接操作Dom要快的多。具体为什么？（且听下回分解）。

4. DataFlow

DataFlow是指ReactJs中数据流转方式。在Angular中采用双向绑定，省去了程序员维护数据与展示一致性的大量工作。在ReactJs中则不采用这种方式，而是采用单一方向的数据流方式，通过props从父组件向子组件传递，通过State在组件内数据传递，通过Flux或者Redux实现UI与后台数据的交互。这种数据处理方式，结构简单，条理清楚。在编写ReactJs时，请记住：当你在直接操作Dom的数据时，你可能已经错了。当然这也就增加了相应的代码量。至于如何实现ReactJs的数据传递，且听下回分解了。

5. JSX

JSX是一种在React components中使用的语言，每一个JSX node将对应一个javascript function. JSX相对于javascript function更易读，表意性更好，基本不用花多少时间了解，需要注意的是JSX与javascript的命名相似，但不尽相同，在开始学习阶段很容易由于写法不一样出现Bug，出错最多的大概就是className 与 class等写法了，（JSX中css名为className, Html中css名为class,如果需要，下回分解了）。

除了上述特点，在实际项目开发过程中还会有很多这样或者那样的问题。ReactJs是一种新的UI框架，结合了前后端的编程优点，拥有跨平台的优势，React生态圈在这一年里发展迅猛，几乎每个月都几次有版本更新，背后有FaceBook的支持，值得前端开发者学习和使用的。