React库

一、React概述

React是一个是一个开源的js库，用来为数据渲染视图的，由facebook，Instagram社区维护的。（例如美团、阿里、airbnb都在使用React开发）

为什么会出现React：

频繁的数据操作-->① 大量的DOM操作（自动操作DOM）；②逻辑会比较复杂（状态与内容对应起来）

React发展历史：

2011年 react受php当中xhp框架的影响，部署在facebook的newsfeed；

2012年 Instagram；

2013年 React宣布在JSConf开源；

2014年 成为一个github（托管开源项目网站）旗舰级的项目；

2015年 在jsConf，ReactNative技术实现原生开发当中的ui的展现；

React的特点：

①声明式的设计：轻松的描述应用；②高效：虚拟DOM结合算法保证最大限度减少与DOM的交互；③灵活：不是框架，而是一个非常小的库可以搭配ui库、js框架等去使用；④组件：React构建视图的基本单位；⑤单项数据流；⑥状态： 内容与状态对应起来；⑦JSX：js语法的扩展 允许在js中写HTML

React的相关网址：
reactjs.com  --> facebook.github.io/react
https://www.gitbook.com/book/hulufei/react-tutorial/details

问题：

①React 不支持IE8以下的浏览器
②如果你的应用或者站点 不需要频繁的更新页面 -->使用React 实现很小的功能，需要编写很多代码
③React 年轻的库，需要开发者去造轮子
④极大的减慢你的速度 react state props

二、React的核心思想和概念

React的核心思想：封装组件->好处：提高代码的复用率，降低代码的复杂度，提高开发速度，提高代码的质量。各个组件，维护自己的状态和UI，当状态改变，自动更新组件

React的概念：①组件；②JSX js的扩展：javaScriptXml并不是新的语言。React必须使用jsx的语法，建议我们使用。特点：支持在js中编写html，在使用组件时管理组件本身的数据和视图；③Virtual DOM：大面积操作DOM，性能会有问题，react实现虚拟DOM，组件真实DOM结构映射到虚拟DOM，在虚拟DOM上实现一个DOM算法，当需要更新组件时，会通过diff算法找到需要变更的DOM节点，然后再去更新。真实DOM节点--》元素；虚拟DOM节点--》组件；④数据流：单项数据流，状态与内容；

三、搭建React的开发环境、使用React

①方式一：引入react.js react-dom.js browser.js 三个js文件

ReactDOM.render(渲染的内容，渲染的元素)；是React最基础方法，用于将模板转为html语言，插入到指定的DOM节点；

②方式二：CLI命令行

JSX基本语法：①遇到HTML标签 (<)，使用HTML来解析；②遇到代码块（{}），使用js来解析；③注释，{/*这是一个注释语句*/}

 组件：

创建组件：

        

注意：①React是根据组件的名称的首字母是否大写，判断是组件还是普通的html标签；

　　　②组件类 在render返回的时候，只能有一个顶层标签，否则会出问题（顶层标签的元素在return时是不能换行的）

复合组件：通过创建多个组件，来合成一个组件（复合组件），把组件的不同功能进行分离。

 props

组件的用法 添加任意属性

<MainComponent userName="Tom"/>

this.props.userName

this.props对象的属性与组件的属性是一一对应的。

this.props.children 表示所有的子节点，返回值有3种（①没有子节点undefined ②一个子节点object ③多个子节点array）;

React.Children.map(this.props.children,function(child){})

ref

虚拟DOM-->组件

组件并不是真实的DOM节点，内存中的数据结构，也就是虚拟DOM。如果从组件获取真实DOM的节点，-->ref属性

<input type='text'  ref='inputTxt'/>
function(){ this.refs.inputTxt-->拿到真实的DOM节点}

    控制台输出--》