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

发布时间：2020-12-15 06:56:20 所属栏目：百科来源：网络整理

导读：最近在为一个Web项目进行前端框架的选型，本人当前的项目，是一个企业内部自己用的系统，所以对界面要求不太高，但是由于管理的数据比较多，对于前端页面渲染的性能要求比较高，比较了一圈之后，感觉React 这个框架比较合适。引用知乎上的一篇文章（https:/

最近在为一个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_componentsreact的文件夹,里面的内容如下：

@直接在代码里面引用(https://github.com/facebook/react)

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>

渲染的结果如下：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!