React的生命周期

React16版本

1. 初始化阶段
- 钩子函数个数： 4
- 主线程执行结束之后钩子函数才会执行
钩子函数：
constructor(){}
1.任务
-通过super来将绑定在组件身上的props赋值与this.props = props
-定义组件状态this.state={} ,不在这里定义的话，外面就不要写this
-普通函数定义是可以绑定this，这样调用普通函数的时候，可以直接写this.函数名
componentWillMount(){}
1.表示组件即将挂载，用于初始化事件和生命周期
2.react内部完成任务，不干预
3.下一版本弃用
4.数据可以拿到 数据请求 修改数据
5.真实dom无法拿到，虚拟dom也无法拿到
render(){}
任务
1.底层 React.createElement
2.解析 this.props和this.state
3.将jsx元素渲染为vdom对象模型，生成了虚拟dom
注意：
在这各钩子函数中不可以使用setState
1.因为js是单线程的，当前已经有任务了，将jsx元素渲染为虚拟dom
2.如果在render函数解析state和props的同时，还去改变数据，会造成栈溢出
componentDidMount(){}
1.表示组件挂载结束
2.任务
-数据可以拿到 数据请求 数据修改
-真实dom可以拿到 真实dom操作/第三方库实例化

2. 更新阶段
- 钩子函数个数： 5
- React更新阶段分为两种更新： props属性更新/state状态更新
- 触发条件：setState/foreUpdate，后面这个可以渲染类的实例
- props更新走5个，state更新走4个
- 父组件状态改变，子组件是会渲染的，但是子组件状态改变，父组件不收影响
钩子函数
componentWillReceiveProps(nextProps){}
-注意：这个就是和state改变的差别，state更新没有该钩子函数
-接受最新的属性值，nextProps，而this.props是上一次的值
-监听属性是否发生改变
-应用场景：
-路由的改变，头部.底部发生对应的变化,可以操作真实dom
-将来的17版本也会变禁用
shouldComponentUpdate(nextProps,nextState){}
-作用：决定组件是否要更新
-它的返回值是布尔值，true为更新，false为不更新
-性能优化
-可以决定组件是否要渲染，如果没有变化就不必进行渲染
-这里进行的是浅对比，只能比较非引用类型，引用类型要自己去写，调用递归，但是一般不会用深比较，因为这样做的话，效率比每次都加载还低
-浅对比是对prop或者state内的值进行对比，而不是nextProps和this.props，因为对象的地址一定不相同
- nextState 和 this.state【新值】 是一样的【值】，所以要自己去设定一个值进行比较，要注意异步的问题
- nextProps 和 this.props【旧值】
componentWillUpdate(nextProps,nextState){}
表示组件更新前的准备工作 与 componentWillMount类似，但是可以操作真实dom
将来17版本会弃用
render(){}
-初始化阶段执行一次
-更新阶段也会执行一次
-解析this.state和this.props
-再次生成vdom
componentDidUpdate(prevProps,prevState){}
-prevProps或者prevState是修改后最新的值
-通过filber算法来对比两次的vdom，生成patch补丁对象
-根据补丁对象生成真实dom，替换原有的节点
-功能和componentDidMount类似
-真实dom操作
-数据修改

3. 卸载阶段
- 钩子函数个数： 1
- 触发方式
- 外部删除 开关
- 内部删除 ReactDOM.unmountComponentAtNode(’#root’)，必须写这个标签，其他标签无效，使用这个方法，所有组件全部卸载，包括定时器，实例之类的
- 任务
- 清除组件无法自动删除的内容
- 实例
- 引用类型
- 计时器、定时器
- 事件
钩子函数
componentWillUnmount(){}
-在这里手动清除自定义实例，比如定时器，事件监听等,当然要触发了这个函数才行，所以这是配合卸载组件的同时去除这些内容
-还有就是删除这个组件的时候会触发该卸载阶段钩子函数
4. 错误捕获阶段
- 钩子函数个数： 1
- 触发条件
- 父组件捕获子组件 throw 出来的错误
- 作用
- 用回退UI来代替错误界面【断网】
钩子函数
componentDidCatch(error,info){}
error错误是什么 info哪里出错了
–当子组件出现错误，渲染写好的div标签的内容，这样就会盖住真实的错误信息
-但是！！！一旦网络过快，一下子之后还是会显示真实的错误页面，所以这就需要将用户此时的网络断开，方法不是我们这边处理