react起源和发展
起初facebook在建设instagram（图片分享）的时候嘞，因为牵扯到一个东东叫数据流，那为了处理数据流并且还要考虑好性能方面的问题嘞，Facebook开始对市场上的各种前端MVC框架去进行一个研究，ReactJs在2013年5月宣布开源;
因为react的性能和优点确实很突出，所以国内的很多大公司也都在使用，比如淘宝、京东、腾讯
React的出发点
基于HTML的前端界面开发正变得越来越复杂，其本质问题基本都可以归结于如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上。而来自Facebook的React框架正是完全面向此问题的一个解决方案，按官网描述，其出发点为：用于开发数据不断变化的大型应用程序（Building large applications with data that changes over time）。相比传统型的前端开发，React开辟了一个相当另类的途径，实现了前端界面的 高性能高效率 开发。
React与传统MVC的关系
React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；
React高性能的体现：虚拟DOM
React高性能的原理：
在Web开发中我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因（如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。
React为此引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A-B,B-A，React会认为A变成B，然后又从B变成A UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。
尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，部而对实际DOM进行操作的仅仅是Diff分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。
$(a).show().hide()
虚拟dom diff算法
借用Facebook介绍React的视频中聊天应用的例子：
当一条新的消息过来时，传统开发的思路如上图，你的开发过程需要知道哪条数据过来了，如何将新的DOM结点添加到当前DOM树上；
而基于React的开发思路如上图，你永远只需要关心数据整体，两次数据之间的UI如何变化，则完全交给框架去做。
可以看到，使用React大大降低了逻辑复杂性，意味着开发难度降低，可能产生Bug的机会也更少。
react的特点和优势
1. 虚拟dom
我们以前操作dom的方式是通过document.getElementById()的方式，这样的过程实际上是先去读取html的dom结构，将结构转换成变量，再进行操作
而reactjs定义了一套变量形式的dom模型，一切操作和换算直接在变量中，这样减少了操作真实dom，性能真实相当的高，和主流MVC框架有本质的区别，并不和dom打交道
2. jsx语法 用来方便快速的创建组件dom结构 语法糖
全称javascript xml语法 React.createElement('div',null,'content')
JSX语法不是必须使用的，但是因为使用JSX语法之后会降低我们的开发难度，故而这样的语法又被称为语法糖；
所谓的xml语法指的是:根据结构去自定义一些标签去创建整个结构
只有一个开始节点和结束节点，中间可以任意嵌套的结构;都是闭合标签而且后缀名是xml
<root> <div>eewe</div> <div>er4r4</div> <img src='1.jpg' /> </root>
3. 单向数据流
其实reactjs的核心内容就是数据绑定，所谓数据绑定指的是只要将一些服务端的数据和前端页面绑定好，开发者只关注实现业务就行了
单向数据流：只要服务端数据发生变动，前端数据也变动
4. 组件化开发 高效率
react最核心的思想是将页面中任何一个区域或者元素都可以看做一个组件 component
那么什么是组件呢？
组件指的就是同时包含了html、css、js、image元素的聚合体
使用react开发的核心就是将页面拆分成若干个组件，并且react一个组件中同时耦合了css、js、image，这种模式整个颠覆了过去的传统的方式
React认为一个组件应该具有如下特征：
（1）可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件；
（2）可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景；
（3）可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护
（4）可测试（Testable）：因为每个组件都是独立的，那么对于各个组件分别测试显然要比对于整个UI进行测试容易的多。
快速入手的步骤
1.下载react和项目中导入react包
2.声明react组件;
组件其实就是一个构造器，每次使用组件都是相当于实例化组件
3.通过jsx语法编写react组件
4.将组件渲染到页面中
JSX语法糖
JSX是一种语法，全称：javascript xml
JSX语法不是必须使用的，但是因为使用了JSX语法之后会降低我们的开发难度，故而这样的语法又被成为语法糖
在不使用JSX的时候，需要使用React.createElement来创建组件的dom结构，但是这样的写法虽然不需要编译，但是维护和开发的难度很高，且可读性很差
```
var world = React.createElement('h1',{className:'abc',id:'haha'},[
React.createElement('span',null,'Hello'),
React.createElement('mark',null,'React')
])
//利用ReactDOM对象的render方法将组件渲染到某个节点里
ReactDOM.render(world,document.getElementById("app1"))
```
及时使用了JSX语法了之后，也是需要将其编译成原生的createElement的
```
var div=React.createElement("div",{className:'div1'},"aaaa")
ReactDOM.render(div,document.getElementById('app'))
```
JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。
``` var names = ['Alice', 'Emily', 'Kate']; ReactDOM.render( <div> { names.map(function (name) { return <div>Hello, {name}!</div> }) } </div>, document.getElementById('example') ); ```
组件dom添加样式
1. 直接在style里给该标签添加样式 p{ color:red;}
2. 大多数情况下还是大量的在为元素添加类名、id以使用某些样式，但是需要注意的是，class需要写成className（因为毕竟是在写类js代码，会收到js规则的现在，而class是关键字）
``` <p className="bg-p" id="myp" style = { this.style }>Hello world</p> ```
3. 在react里表达式的符号是 "{ }",作用和vue的表达式作用是一样的
想给虚拟dom添加行内样式，需要使用表达式传入样式对象的方式来实现：
``` <p style = { {color:'red',fontSize:2+'em'} }>Hello world</p> ```
4. 行内样式需要写入一个样式对象，而这个样式对象的位置可以放在很多地方，例如React.createClass的配置项中、render函数里、组件原型上、外链js文件中
React推荐我们使用行内样式，因为react觉得每一个组件都是一个独立的整体
``` var style1 = {color:'red'，fontSize：‘18px’} Hello.prototype.style = {fontSize:2+'em'} ``` var style1 = {color:'red'，fontSize：‘18px’} return (<div style={style1}>my first react componet</div>)
有个小的注意的地方，就是样式变量要定义在render和return之间
创建第一个组件
HTML模板
`
`` <script src="../../baseJs/react.min.js"></script> //核心的js文件,帮助创建组件 <script src="../../baseJs/react-dom.min.js"></script> //操作dom的模块 <script src="../../baseJs/browser.min.js"></script> //将jsx转化为js(实际中不用，相当于less.js对于less一样) <script type="text/babel"></script> ```
react开发需要引入多个依赖文件：react.js、react-dom.js，分别又有开发版本和生成版本
react-dom.js中有ReactDOM对象，渲染组件的虚拟dom为真实dom的爆发功能
在编写react代码的时候会大量的使用到jsx代码，但是需要编译：
1. 浏览器端编译，通过引入browser、babel等对引入的script内的代码做编译
2. 利用webpack等开发
``` //1.创建react 组件 相当于document.createElement var HelloReact=React.createClass({ render : function(){//渲染虚拟dom return (//jsx语法 <div>this is my first react componet</div> ) } }) //利用ReactDOM对象的render方法将组件渲染到某个节点里 ReactDOM.render(<HelloReact/>,document.getElementById("app")); ``` //render函数和Vue组件里的render完全一样，在vue组件中可以不用编写render函数，这个时候可以使用template模板来编写组件的虚拟dom结构，然后vue组件会自动讲模板compile成虚拟dom结构放入到render中执行，但是react需要编写render函数
注意：组件名，首字母必须大写 严格区分大小写，大驼峰最棒
组件是通过React.createClass创建的（ES5），在es6中直接通过class关键字来创建
react event
在react中，我们想要给组件的dom添加事件的化，也是
首先react的事件是小驼峰写法
onClick onTouchEnd
事件可以写成组件对象的方法
``` Click:function(){ alert(1); }, Chang:function(ev){ console.log(ev.target.value) }, render:( <button onClick={this.Click}>aaa</button>//事件不加() <button onClick=>{alert(1)}aaa</button> //表达式形式 ) ```
那么也可以挂在原型链上，也可以写在全局变量上和设置的样式一样；
注意，在没有渲染的时候，页面中没有真实的dom，会报undefined;
组件嵌套
将一个组件渲染到某一个节点里的时候，会将这个节点里原有内容覆盖
组件嵌套的方式就是将子组件写入到父组件的模板中去，且react没有Vue中的内容分发机制（slot），所以我们在一个组件的模板中只能看到父子关系
``` var Hello = React.createClass({ render(){ return ( <h1> Hello <World></World> //还可以嵌套其他组件 </h1> ) } }) var World = React.createClass({ render(){ return ( <mark> World-<Person/> </mark> ) } }) //无状态组件 var Person =function(){ return (
<mark>lilei</mark>) } ReactDOM.render(<Hello/>,app) ```
>注意，react中jsx里的注释要写成{/* */}的方式
使用react编写组件的特点：
总结使用react实现组件化页面构建的特点：
1.任何一个页面的内容都可以看成一个react组件
2.使用react实现页面的时候，通过组件嵌套的方式进行实现
3.包括页面的布局、页面的头部、内容部分、页脚，都可以作为组件存在
4.组件只在页面加载的时候渲染到页面中，实际开发开需要一套另外的js逻辑去控制组件的载入
注意，react的注释方式可不一样哟
{/* 你好世界*/}
最好，不要在创建组件的return里去写注释
React中的数据承载-Props/State：
React也是基于数据驱动的框架，组件中必然需要承载一些数据，在react中起到这个作用的是属性和状态（props & state）
1. 属性（props） 在组件外部传入，或者内部设置，组件内部通过this.props获得
2. 状态（state） 在组件内部设置或者更改，组件内部通过this.state获得
属性(props)：
属性一般是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改
属性是描述性质、特点的，组件自己不能随意更改
使组件拥有属性的方式：
1. 在装载（mount）组件的时候给组件传入
传入数据的时候，除了字符串类型，其他的都应该包上表达式，但是为了规整，所有的数据传递，最好都包上{}
``` var Gouzi = React.createClass({ render(){ console.log(this) return ( <div> <p>我的名字：{this.props.name}</p> <p>我的性别：{this.props.sex}</p> <p>我的年龄：{this.props.age}</p> <p>我的父亲是：{this.props.father}</p> </div> ) } }) let info = { sex:'male', father:'狗爸' } ReactDOM.render(<Gouzi {...info} name={"大狗子"} age={26}/>,app) ```
2. 父组件给子组件传入
父组件在嵌套子组件的时候为子组件传入，传入的方式和上面的方式一样
``` //父组件的render函数 render(){ return ( <div> <p>父组件：</p> <hr/> <Son name={'大狗子'}/> <Son name={'二狗子'}/> </div> ) } var Son = React.createClass({ render(){ return ( <div> <p>子组件：</p> <p>我叫{this.props.name}</p> </div> ) } }) ```
3. 子组件自己设置
子组件可以通过getDefaultProps来设置默认的属性
getDefaultProps的值是函数，这个函数会返回一个对象，我们在这里对象里为组件设置默认属性
这种方式设置的属性优先级低，会被外部传入的属性值所覆盖
``` getDefaultProps:function () { console.log('getDefaultProps') return { name:'狗爸', sonname:'二狗子' } }, //render <p>我是{this.props.sonname}的父亲-{this.props.name}</p> ```