超越梦想,一起飞!!!

宁静致远,淡泊明志!

[1]React 深入浅出-----React的介绍

最近在为一个Web项目进行前端框架的选型,本人当前的项目,是一个企业内部自己用的系统,所以对界面要求不太高,但是由于管理的数据比较多,对于前端页面渲染的性能要求比较高,比较了一圈之后,感觉React 这个框架比较合适。 引用知乎上的一篇文章(https://www.zhihu.com/question/33471134/answer/56575265),其分析如下,笔者感觉有共鸣。

喜欢React的人很多,但是喜欢它的原因都不太一样

比较现实的优点:

  1. 能够实现服务器端的渲染,便于搜索引擎优化。这一点要比Backbone, Angular 1.x和Ember早期强
  2. 能够很好的和现有的代码结合。React只是MVC中的View层,对于其他的部分并没有硬性要求。意味着很多公司在选择用Angular全部重构和用React部分重构的时候,选择了React部分重构
  3. 因为一切都是component,所以代码更加模块化,重用代码更容易
  4. 学起来非常容易,几个小时就可以入门
  5. 因为强调只从this.props和this.state生成HTML,写起来bug比较少
比较高大上的优点,就是大家在大会上会说的优点:
  1. React 框架,与其它框架相比,react采取了一种特立独行的操作DOM的方式。
    它并不直接对DOM进行操作。它引入了一个叫做虚拟DOM的概念,安插在JavaScript逻辑和实际的DOM之间。
    这一概念提高了Web性能。在UI渲染过程中,React通过在虚拟DOM中的微操作来实对现实际DOM的局部更新。
  2. 因为强调只从this.props和this.state生成HTML,所以非常的functional programming
缺点:
  1. 并不是一个完整的框架,基本都需要加上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>

<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>

<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>


本教程以第一种方式来写一个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>

渲染的结果如下:









阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chancein007/article/details/76651496
文章标签: React UI javascript
个人分类: React
想对作者说点什么? 我来说一句

深入浅出React和Redux ,程墨

2018年04月20日 88.02MB 下载

React和Redux

2018年01月09日 36.03MB 下载

react技术深入浅出介绍

2018年04月13日 95.87MB 下载

深入浅出React和Redux 高清完整版 PDF

2017年07月22日 93.37MB 下载

深入浅出React和Redux

2018年05月17日 93.39MB 下载

深入浅出React和Redux.pdf

2017年08月14日 36.04MB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭