1、什么是React？

　　React是一个用于构建用户界面的JavaScript库。主要用于构建UI，很多人认为Reatc是MVC中的V（视图）。

　　React起源于Facebook的内部项目，用来架构Instrgram的网站（ins，一款图片分享的社交软件），并与2013年5月份开源。

　　React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

2、React的特点？

　　（1）声明式设计

　　（2）高效：通过对DOM的模拟，最大限度的减少与DOM的交互。

　　（3）灵活：可以与已知的框架或库很好的配合。

　　（4）JSX：是js语法的扩展，不一定使用，但建议用。

　　（5）组件：构建组件，使代码更容易得到复用，能够很好地应用在大项目的开发中。

　　（6）单向响应的数据流：React实现了单向响应的数据流，从而减少了重复代码，这也是解释了它为什么比传统数据绑定更简单。

3、React的html的必备模板

　　<!DOCTYPE html>

　　<html>

 　　 <head>

    　　<script src="react.js"></script>

    　　<script src="react-dom.js"></script>

    　　<script src="browser.min.js"></script>

  　　</head>

 　　 <body>

   　　 <div id="example"></div>

    　　<script type="text/babel">

     　　 // ** Our code goes here! **

   　　 </script>

 　　 </body>

　　</html>

　　(1) script 标签的 type 属性为 text/babel 。因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。

　　　　 凡是使用 JSX 的地方，都要加上 type="text/babel" 。

　　(2) 三个库： react.min.js 、react-dom.min.js 和 Browser.min.js ，它们必须首先加载。

　　　　react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，

　　　　 Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

4、React JSX 的优点以及常见用法

　　React使用JSX来代替常规的javascript语法，看起来很像xml的javascript的语法扩展。

　　JSX优点:（1）JSX执行更快，因为它对编译js代码进行了优化（2）它是类型安全的，在编译过程中就能发现错误（3）使用jsx编译模板更加简洁快速。

　　使用JSX：

　（1）代码中嵌套多个html标签，需要使用一个div元素包裹它们，实例中的p标签使用了自定义属性：data-前缀 。

　 ReactDOM.render(

　　　<div>

　　　　　<h1>菜鸟教程</h1>

　　　　　<h2>欢迎学习 React</h2>

　　　　　<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>

　　　</div> ,

　　　document.getElementById('example')

　 )；

（2）JSX表达式  
　ReactDOM.render(
　　　　<h1>{1+1*4}</h1>,
　　　　document.getElementById('example')
　)；

（3）样式
 React 推荐使用内联样式。我们可以使用 camelCase 语法（骆驼命名法，除第一个单词外的其他首字母大写）来设置内联样式. 
 React 会在指定元素数字后自动添加 px 。
 var myStyle = {

	fontSize: 100,

	color: '#F00'

 };

 ReactDOM.render(

	<h1 style = {myStyle}>菜鸟教程</h1>,

	document.getElementById('example')

 );

（4）注释
注释需要写在花括号中:(外加div包裹)
ReactDOM.render(

　　<div>

   　　 <h1>菜鸟教程</h1>

    　　{/*注释...*/}

 　</div>,

   document.getElementById('example')

);

（5）数组
JSX 允许在模板中插入数组，数组会自动展开所有成员：
var arr = [

  <h1>菜鸟教程</h1>,

  <h2>学的不仅是技术，更是梦想！</h2>

];

ReactDOM.render(

  <div>{arr}</div>,

  document.getElementById('example')

);
（6）HTML 标签 vs React 组件
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。
var myDivElement = <div className="foo" />;

ReactDOM.render(myDivElement, document.getElementById('example'));
要渲染 React 组件，只需创建一个大写字母开头的本地变量。
var MyComponent = React.createClass({/*...*/});

var myElement = <MyComponent someProperty={true} />;

ReactDOM.render(myElement, document.getElementById('example'));

React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。
由于JSX 就是JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，ReactDOM使用className和htmlFor来做对应的属性。

5、React State(状态)

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
以下实例中创建了 LikeButton 组件，getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。
当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

参考文献：
　　阮一峰React入门实例教程 　http://www.ruanyifeng.com/blog/2015/03/react.html
　　React解决了前端开发中的哪些痛点？   https://www.zhihu.com/question/39825457?sort=created　
　　React.js 初学者应该知道的9件事   http://www.oschina.net/news/75530/9-things-every-reactjs-beginner-should-know

React之特点及常见用法的更多相关文章

  1. Linux中find常见用法

    Linux中find常见用法示例 ·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \; find命令的参数 ...

  2. php中的curl使用入门教程和常见用法实例

    摘要: [目录] php中的curl使用入门教程和常见用法实例 一.curl的优势 二.curl的简单使用步骤 三.错误处理 四.获取curl请求的具体信息 五.使用curl发送post请求 六.文件 ...

  3. Guava中Predicate的常见用法

    Guava中Predicate的常见用法 1.  Predicate基本用法 guava提供了许多利用Functions和Predicates来操作Collections的工具,一般在 Iterabl ...

  4. find常见用法

    Linux中find常见用法示例 ·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \; find命令的参数 ...

  5. iOS 开发多线程篇—GCD的常见用法

    iOS开发多线程篇—GCD的常见用法 一.延迟执行 1.介绍 iOS常见的延时执行有2种方式 (1)调用NSObject的方法 [self performSelector:@selector(run) ...

  6. iOS开发多线程篇—GCD的常见用法

    iOS开发多线程篇—GCD的常见用法 一.延迟执行 1.介绍 iOS常见的延时执行有2种方式 (1)调用NSObject的方法 [self performSelector:@selector(run) ...

  7. [转]EasyUI——常见用法总结

    原文链接: EasyUI——常见用法总结 1. 使用 data-options 来初始化属性. data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性.通过这个属性,我 ...

  8. NSString常见用法总结

    //====================NSStirng 的常见用法==================== -(void)testString { //创建格式化字符串:占位符(由一个%加一个字 ...

  9. [转]Linux中find常见用法示例

    Linux中find常见用法示例[转]·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \;find命令的参 ...

随机推荐

  1. python-输入

    1. python2版本中 咱们在银行ATM机器前取钱时,肯定需要输入密码,对不? 那么怎样才能让程序知道咱们刚刚输入的是什么呢?? 大家应该知道了,如果要完成ATM机取钱这件事情,需要先从键盘中输入 ...

  2. 洛谷P3356 火星探险问题（费用流）

    传送门 和深海机器人问题差不多……看到有的大佬是用dp过的,强无敌…… 考虑一下,把每一个点拆点,分别是$A_i$和$B_i$,连一条容量为$inf$,费用为$0$的边,表示可以随便走.如果有石头,再 ...

  3. Pycharm关闭后Python.exe还是在后台运行

    pycharm运行程序关闭后会弹出一个对话框: 一定要选择第一个,不然python.exe一直会在后台运行.

  4. Effective Java 3rd.Edition 翻译

    推荐序 前言 致谢 第一章 引言 第二章 创建和销毁对象 第1项:用静态工厂方法代替构造器 第2项:遇到多个构造器参数时要考虑使用构建器 第3项:用私有构造器或者枚举类型强化Singleton属性 第 ...

  5. width:100%以什么为基准的测试

    起初是遇到这样一个问题:当盒模型设为box-sizing:border-box;(移动端上经常这么干).子盒子的width:100%,子盒子的width等于父盒子contend的长度还是condend ...

  6. 网页footer背景(stick footer布局)

    今天遇到了一个有意思的问题,想在网站的foot里面加入一张背景图片,并且在footer的底部写下一些内容于是乎在footer添加了background,并设置了footer的大小 先说一下开始的做法: ...

  7. elasticsearch安装bigdest插件

    bigdest下载地址:https://github.com/hlstudio/bigdesk 对于bigdest插件来说,安装是非常简单的. 只要三个步骤就可以了,下载——解压——进入到_side文 ...

  8. CentOS中源码编译安装Nginx

    1.从官网通过wget命令将Nginx源码包下载到Linux上 ​ Nginx下载页面:http://nginx.org/en/download.html 2.在Linux上安装需要依赖的环境 yum ...

  9. 理解Javascript_02_执行上下文01

    执行上下文又名执行上下文环境 JS中为什么会产生这个概念呢,先来看一下下面的这段代码: 通过执行发现,第一句代码报了ReferenceError,第二句和第三句代码是undefined,由于undef ...

  10. C++ 构造函数与默认构造函数

    构造函数:C++用于构建类的新对象时需要调用的函数,该函数无返回类型!(注意:是“无”! 不是空!(void)). 默认构造函数:未提供显式初始值时,用来穿件对象的构造函数. 以上是二者的定义,但是单 ...