React.js
一、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节点}
控制台输出--》
以上是 React.js 的全部内容， 来源链接： utcz.com/z/382828.html
