一.react简介
1.起源于facebook，2013年5月开源
2.特点：
I.声明式设计。（声明式是告诉计算机做什么，不管他怎么做 如map。而命令式式告诉计算机怎么做 如for。）
II.高效
III.灵活
IV.jsx
V.组件
VI.单向数据流
3.虚拟DOM:一个真实的js对象，直接操作DOM会发生回流，成本过高
4.回流与重绘
回流：当render树中的一部分或全部因为大小、边距等问题发生改变而需要重建的过程
重绘：当元素的一部分属性发生变化，如外观和背景，不会引起布局变化而重新渲染的过程
回流一定重绘，重绘不一定回流
5.浏览器如何渲染页面
①HTML解析器，解析html结构，生成DOM树
②CSS解析器，解析css文件及内联样式表，生成样式表
③将DOM树和样式表结合生成render树（每个DOM元素都有一个方法，用来接收样式表信息，返回一个render对象，把这些render对象统一编译生成render树）
④render树渲染完毕后浏览器会根据样式表来决定当前元素在页面的位置
6.专注视图层:专注于提供清晰，简洁的view解决方案
注：vue和react本质是vc框架，配合第三方（如;vuex）才是mvc框架
7.函数化编程（编程范式）结构化编程的一种
主要思想：把问题的解决方案写成一系列嵌套的函数调用
①纯函数 输入什么就输出什么，不依赖外部环境的状态。
如：Array.slice(不改变原数组) 纯函数
Array,splice(改变原数组) 不是纯数组
优点：有效降低系统的复杂性，可缓存性
②科里化函数 传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数
如：对var add=(x,y)=>x+y科里化
var add=(a)+(b)=>a+b add(3)(2) //5
是一种“预加载”函数的方法，通过传递较少的参数，得到一个已经记住了这些函数的新函数，是一种对参数的“缓存”
函数式编程的优点:
a:代码简洁，开发快速
b:接近自然语言，易于理解
c:更方便的代码管理，
d:易于“并发编程”
e:代码的热升级
8.vue和react的区别
相同点：①都是用虚拟DOM
②都提供了响应式和组件化的视图组件
③将注意力集中保持在核心库，而其他功能如路由和全局状态管理交给其他的库
不同点：①优化性能方面 react有自己的一套方法，用来减少一些不必要的虚拟DOM
②react用的是jsx语法，而vue是将html,js,css放到vue文件里
③react的css写在单独的文件里，vue写在vue文件里
④react约束小灵活性大，使用js语法多，适合开发大项目
vue约束大灵活性小，适合快速开发项目
当组件第一次渲染的时候执行哪些生命周期？
constructor--->componentWillMount--->render--->componentDidMount
1.constructor
初始化
当前生命值周期可以定义当前组件所需要的状态
当前生命周期函数必须写super，否则就会报错或者this的指向发生改变
如果在super和constructor中没有传递props这个参数的话是访问不到this.props属性的
2.componentWillMount
组件挂载前
在当前生命周期函数里可以访问到props属性，在这里可以接收外部属性，同时可以将外部属性转变成内部属性
在当前生命周期函数里不需要调用setState,因为当前函数执行完毕后会自动执行render
3.render
a.render函数什么时候会执行？
当this.state,this.props发生改变的时候，会执行render函数
b.this.state/this.props发生改变的时候会执行哪些生命周期函数
this.state:
shouldComponentUpdate--->componentWillUpdate--->render--->componentDidUpdate
this.props
componentWillReveiceProps--->shouldComponentUpdate--->componentWillUpdate--->render--->componentDidUpdate
c.render函数执行的时候会将虚拟DOM和数据相结合，缓存一份虚拟DOM，当数据发生改变的时候会将虚拟DOM与缓存的虚拟DOM作比较（diff算法），比较完毕以后，将需要修改的虚拟DOM进行批量修改，减少不必要的更新。
d.diff算法
新旧两个虚拟DOM的对比就是diff算法
4.componentDidMount
render函数执行后，componentDidMount这个生命周期函数就会执行，在这个生命周期函数里可以进行fatch请求，获取真实DOM
5.componentWillUnMount
组件销毁
6.shouldComponentUpdate
当this.state,this.props发生改变时，会执行render函数
该生命周期函数必须返回一个布尔值，如果返回true,则继续执行下面的生命周期函数；
如果返回false,则下面的生命周期函数不执行。
该生命周期函数是用来判断DOM是否更新的，而不是用来判断数据是否更新的（不管返回值是true还是false，this.state里的数据都会改变，但是DOM值不会改变）
该生命周期函数可以做一些相关操作减少虚拟DOM不必要的更新（利用接收到的两个参数props,state来比较）
7.componentWillUpdate
更新前 虚拟DOM与数据相结合，但没有真正的DOM结构
8.componentDidUpdate
更新后 数据与模板结合可以产生真正的DOM结构，在这里可以获取到数据更新后最新的DOM结构
9.componentWillReceiveProps
当外部属性发生变化的时候就会执行当前生命周期函数，当前生命周期函数会有一个新的参数props
操作DOM的两种方式：
ref="list" this.refs.list
ref={(tagName)=>{this.key=tagName}} this.key
react生命周期函数哪些只执行一次？
constructor
componentWillMount
componentDidMount
componentWillUnMount
react生命周期函数哪些可以执行多次？
render
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillReceiveProps