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

原创 2017年08月03日 23:11:54

最近在为一个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>

渲染的结果如下:









版权声明:本文为博主原创文章,未经博主允许不得转载。

深入浅出React(二):React开发神器Webpack

编者按:自2013年Facebook发布以来,React吸引了越来越多的开发者,基于它的衍生技术,如React Native、React Canvas等也层出不穷。InfoQ精心策划“深入浅出Reac...
  • geqian2010
  • geqian2010
  • 2015年11月04日 18:34
  • 1714

实操《深入浅出React和Redux》第四期--react-redux

入到第四期, 代码大大简化, 但如果没有前面的演化过程, 一定让人蒙圈~~ 三个主要文件: index.js import React from...
  • qq_36510261
  • qq_36510261
  • 2017年12月04日 16:34
  • 214

react知识小结——深入浅出React和Redux

1.React判断一个元素是HTML元素还是React组件的原则就是看第一个字母是否大写,所以React组件必须大写。...
  • pugongyingyangyue
  • pugongyingyangyue
  • 2017年09月18日 09:57
  • 251

深入浅出React之第四章:推荐的Redux目录结构

1.传统的MVC目录结构在MVC中,应用代码分为Controller,Model,View,分别代表三种模块角色,就是把所有的Controller代码放在controller文件夹下,把所有的Mode...
  • qq_26708777
  • qq_26708777
  • 2017年10月09日 00:36
  • 506

实操《深入浅出React和Redux》第二期—Flux

此书讲得蛮详细, 从Flux一步一步过渡到Redux。 写过的代码舍不得扔, 立此存照吧。 我有几张阿里云幸运券分享给你,用券购买或者升级阿里云相应产品会有特惠惊喜哦!把想要买...
  • qq_36510261
  • qq_36510261
  • 2017年12月04日 15:43
  • 72

深入浅出React(一):React的设计哲学 - 简单之美

编者按:自2013年Facebook发布以来,React吸引了越来越多的开发者,基于它的衍生技术,如React Native、React Canvas等也层出不穷。InfoQ精心策划“深入浅出Reac...
  • geqian2010
  • geqian2010
  • 2015年11月04日 18:32
  • 822

深入浅出React+Redux(一:React 组件的数据)

前言 “差劲的程序员操心代码,优秀的程序员操心数据结构和它们之间的关系 。 ” ...
  • u010377383
  • u010377383
  • 2018年01月15日 21:33
  • 46

React概述

ReactJS介绍简介ReactJS是为了解决构建随着时间数据不断变化的大规模应用程序而设计的用来构建用户界面的JavaScript库,是MVC中的V(视图)React设计思想 React设计思想...
  • liangshiquan1
  • liangshiquan1
  • 2016年03月06日 00:50
  • 840

React入门 (一) 基本语法和功能介绍

开个贴,学习React Native现在有各种各样的web-native解决方案,是时候找到一个合适的,facebook发布的React Native ,现在好像被挺多团队推崇的,包括天猫,百度等(小...
  • houwenjie11
  • houwenjie11
  • 2016年01月04日 16:32
  • 1362

PPT-React-native介绍

转自: http://wenku.baidu.com/link?url=-SLitykMKjyZKql2a31LVqnnQSk0yzS8GLMTFYFEiGwNKVbnhed466Z0G5QCXkg3...
  • oiken
  • oiken
  • 2015年12月03日 21:03
  • 1291
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[1]React 深入浅出-----React的介绍
举报原因:
原因补充:

(最多只允许输入30个字)