React
React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式
高性能：复杂或频繁的DOM操作通常是性能瓶颈的原因，为此引入了虚拟DOM
虚拟DOM：每当数据变化时，React会重新构建DOM树
使用React大大降低了逻辑复杂性，意味着开发难度降低，产生bug更少
React衍生品：React native 是React衍生出的一套框架
React的特点和优势
1.虚拟DOM
2.jsx
3.单向数据流
4.组件化开发、高效率
组件：同时包含html、css、js、images元素的聚合体
react.js中有React对象，帮助我们创建组件等功能
react-dom.js中有ReactDOM对象，渲染组件的虚拟dom为真实的dom
jsx编译方法：1.浏览器端编译，通过引入browser、babel对script内的代码编译 2.利用webpack等开发环境进行编译，将编译好的文件引入
render函数和vue组件里的render完全一样，在vue组件中可以不用编写render函数，这个时候可以使用template模板来编写组件的虚拟don结构，然后vue组件会自动将模板compile成虚拟dom结构放入render中执行，但是React中需要编写render函数
组件通过React.createClass创建（es5），在es6中直接通过class关键字创建
组件就是一个构造器，每次使用组件都相当于在实例化组件
React的组件必须使用render函数来创建组件的虚拟dom结构
组件使用ReactDOM.render方法将其挂载在某一个节点
组件的首字母必须大写
jsx是一种语法，全称：javascript xml
即使使用了jsx语法之后，也是需要将其变编译成原生的createElement
组件dom添加样式
在React里的表达式的符号是‘{}’，作用和vue的表达式作用是一样的
想给虚拟dom添加行内样式，需要使用表达式传入样式对象的方式来实现
行内样式需要写入一个样式对象，而这个样式对象的位置可以放在很多地方，例如React.createClass的配置项中、render函数里、组件原型上、外链js文件中
React推荐我们使用行内演示，因为React觉得每一个组件都是一个独立的整体（反正不这么写，是不是傻）
大多数情况下还是为元素添加类名、id以使用某些样式，注意添加class类名时，因为class是关键字，所以写成className
在React中，给组件的dom添加事件的时候，也是在行内添加的方式，事件名字需要写成小驼峰的方式，值利用表达式传入一个函数即可
注意：在没有渲染dom时，页面没有真实dom，获取不到dom
组件嵌套
将一个组件渲染到某一个节点里的时候，会将这个节点里原有内容覆盖
组件嵌套的方式就是将子组件写入到父组件的模板中，且React
注意：React中的注释要写成{/**/}
React中的数据承载（Props/State）
React也是基于数据驱动的框架，组件中必然需要承载一些数据，在React中起到这个作用的是属性和状态（props & state）
1. 属性（props） 在组件外部传入，或者内部设置，组件内部通过this.props获得
2. 状态（state） 在组件内部设置或者更改，组件内部通过this.state获得
属性（props）
属性一般是外部传入的，组件内部也可以通过一些方式初始化的设置，属性不能被组件自己更改
属性时描述性质、特点的、组件自己不能随意更改
使组件拥有属性的方式：
1. 在装载组件的给组件传入
传入数据的时候，除了字符串类型，其他的都该报上表达式，但为了规范，所有的数据传递最好都包上{}
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> ) }
3. 子组件自己设置
子组件通过getDefalutProps来设置默认的属性
getDefaultProps的值是函数，这个函数会返回一个对象，我们在这里对象里为组件设置默认属性
这种方式设置的属性优先级低，会被外部传入的属性值覆盖
getDefaultProps:function () { console.log(‘getDefaultProps‘) return { name:‘狗爸‘, sonname:‘二狗子‘ } }, //render <p>我