最近在为一个Web项目进行前端框架的选型,本人当前的项目,是一个企业内部自己用的系统,所以对界面要求不太高,但是由于管理的数据比较多,对于前端页面渲染的性能要求比较高,比较了一圈之后,感觉React 这个框架比较合适。 引用知乎上的一篇文章(https://www.zhihu.com/question/33471134/answer/56575265),其分析如下,笔者感觉有共鸣。
喜欢React的人很多,但是喜欢它的原因都不太一样
比较现实的优点:
- 能够实现服务器端的渲染,便于搜索引擎优化。这一点要比Backbone,Angular 1.x和Ember早期强
- 能够很好的和现有的代码结合。React只是MVC中的View层,对于其他的部分并没有硬性要求。意味着很多公司在选择用Angular全部重构和用React部分重构的时候,选择了React部分重构
- 因为一切都是component,所以代码更加模块化,重用代码更容易
- 学起来非常容易,几个小时就可以入门
- 因为强调只从this.props和this.state生成HTML,写起来bug比较少
- React 框架,与其它框架相比,react采取了一种特立独行的操作DOM的方式。
它并不直接对DOM进行操作。它引入了一个叫做虚拟DOM的概念,安插在JavaScript逻辑和实际的DOM之间。
这一概念提高了Web性能。在UI渲染过程中,React通过在虚拟DOM中的微操作来实对现实际DOM的局部更新。 - 因为强调只从this.props和this.state生成HTML,所以非常的functional programming
- 并不是一个完整的框架,基本都需要加上ReactRouter和Flux才能写大型应用
而笔者所需要做的项目中,就有很多的table,而且table需要筛选,排序。而React对表格支持非常的好,只需要对数据进行排序,UI自动渲染器排序后的结果,因为排序是在前端做的,所以性能非常好。
说了这么多,那么什么是React呢?React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。
React 的官方网站:https://facebook.github.io/react/
React的环境搭建:
@ 通过NodeJS来安装
安装了NodeJS之后,然后安装bower,然后用bower安装React
bower install react
上面的命令执行后,会在其目录下生成一个bower_components\react的文件夹,里面的内容如下:
@直接在代码里面引用(https://github.com/facebook/react)
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
https://cdn.bootcss.com/react/15.4.2/react-dom.min.jshttps://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js>
本教程以第一种方式来写一个React的Hello World入门程序,作为本篇的结束吧。
<html> <head> <Meta charset="utf-8"> <title>学习React!!</title> </head> <body> <div id="app"></div> <script src="bower_components/react/react.js"></script> <script src="bower_components/react/react-dom.js"></script> <script> ReactDOM.render( React.DOM.h1(null,"hello,world!!!"),document.getElementById('app') ); </script> </body> </html>
渲染的结果如下: