基于React+NodeJs+MongoDB的简易留言板(三)

发现从去年年底那会开始,React被提到的次数越来越多了,相关的文章也看到很多,看来大神们的预测还是很准的,React在国内终于真的火了。相信大家都对React有了一定的了解,我也就不多做介绍了,简单来说React是个专注于UI层的库,毕竟官网也是这么介绍的嘛,主要的特点就是虚拟DOM(virtual DOM)和单项数据流(one-way data flow),更多内容可以去看官网React

快速入门

先简单介绍下React的写法,秉着show me code的原则,先上代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello React</title>
<script src="lib/js/react.js"></script>
<script src="lib/js/JSXTransformer.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
React.render(
<p>Hello React</p>,
document.getElementById('container')
);

</script>

</body>
</html>

运行结果:

第一次看到这段代码肯定会觉得很奇怪,既不像JS也不像HTML,到底是什么写法?这就是所谓的JSX啦。那它是怎么跑起来的呢?且仔细看script标签的type属性,值为text/jsx,再看引入的脚本中有个叫JSXTransformer.js的,显而易见,这个js就是查找type="text/jsx"的脚本把其中用JSX写的代码转换成符合JS语法的代码,也就是做了一个“翻译”的工作。

那么问题来了,既然仅仅只是翻译,把这玩意儿搬到线上来做总是不太合适的,增加了连接数不说,单单翻译也是要时间的嘛(不要问我“单单”是谁)。这个必须不能忍啊,但是不用慌,Facebook那帮人早就替我们考虑到了,只要下载个工具就好了,当然需要有npm(不知道npm的前端不是好攻城狮):

1
2
3
4
npm install react-tools -g   

#下载完后,输入命令:
jsx --watch src/ build/

这样就会把src文件夹下的用了JSX语法的js文件哐当哐当翻译成JS语法js文件并保存在build文件夹下,并且实时监听。现在我们就可以把之前的那段代码改成这样:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello React</title>
<script src="lib/js/react.js"></script>
</head>
<body>
<div id="container"></div>
<script src="build/js/helloreact.js"></script>
</body>
</html>

运行结果:

到这里可能有些人可能还会有一个疑问,那就是为什么要用JSX来写,我直接用JS写不行吗?答案是当然可以。但是(当然会有“但是”^_^),在决定这么做之前,先比较下两种写法的区别:

1
2
3
4
5
6
7
8
9
10
11
//JSX
React.render(
<p>Hello React</p>,
document.getElementById('container')
);

//JS
React.render(
React.createElement("p", null, "Hello React"),
document.getElementById('container')
);

JSX可以让你用更贴近HTML的方式来写代码,看起来会比较直观,而且代码量更少,相较之下我个人还是比较喜欢用JSX这种方式,特别是代码量大了以后这个优势会更加明显,再加上学习成本不高,掌握起来也是比较方便的。

接下来就是本次项目的最后一步了,用React完成一个留言板。其实我是基于官方教程来写的,代码跟教程中给出的基本差不多,我只是把服务端也搭了下(怎么搭都写在前两篇文章里了),让整个流程能够完整走完。这篇文章本来是想把官方教程翻译一下再加点自己的理解,因为那时国内相关资源比较少,但是拖到现在发现国内已经有很多相关资源了,这种入门教程我觉得就没什么太大意义了,所以就不继续写下去了(其实就是自己懒o(╯□╰)o),具体代码可以看这里

关于React

最后说说我个人对React的一些想法吧,我是去年10月份那会儿参加D2时听@张克军的分享才对前端组件化有了比较深刻的理解(这里歪一下,D2还真是值得参加,虽然不一定听得懂大牛们分享的内容,但是至少能知道大牛们正在研究的方向,自己能作为借鉴参考,下次有机会再去长长见识),回来后才接触到React这个库,然后才慢慢的写了这个小项目,但是也没有很深入的研究过,只是知道点皮毛。后来工作中用到了Angular,就又去学Angular了,很多人都拿Angular和React来作比较(我个人认为这是不合理的,因为这两个根本就不是同一个层次的东西),网上也有很多这方面的文章,所以关于性能什么的比较我就不说了,就简单说说自己的使用感受吧。

Angular毕竟是一个框架,框架就是一个大而全的东西,包罗万象,你只能按照框架所给出的规则来写代码,基本上无法突破一些限定,所以学习成本比较高,学习曲线也比较陡峭。好处就是一旦掌握之后,使用起来会很方便,开发会很迅速(此时学习曲线就会比较平缓,但是要想精通就又是一条陡峭的曲线,不过这一点所有东西都一样,要想精通都不容易,并不仅仅只是Angular)。缺点也比较明显,就是太“重”,想要在原来的基础上换用别的框架基本不可能,只能推翻重来。

而React是一个库,只是负责UI,与其他环节耦合度不高,比较灵活,要是在此基础上做一次封装,暴露常用接口,如果封装的好,切换库基本上是无痛的。

其实对于我来说,Angular和React给我感受最深的一点就是,Angular是在HTML里写JS,而React是在JS里写HTML,到底哪个好也没个定论,见仁见智吧。我自己是比较偏向于React的方式,在HTML中写JS就像以前在JSP中写JSTL一样,让HTML显得很臃肿,不是很喜欢。

前不久Facebook又推出了React Native,这个真是被惊艳到了,不知道什么时候可以体验下,照这样发展下去JS是要一统江湖的节奏啊2333333…

不知不觉扯了这么多,这次就先到这吧,以后还是要常督促自己,多写写博客,Fighting!

本文为原创文章,如有不足之处欢迎批评指正。
欢迎转载,转载请注明源地址:qianliwei.com/2015/03/01/react-msgboard-3/