react16 生命周期

107 阅读2分钟

初始化阶段:

一、constructor:
1.定义state,可以将props初始化赋值给state。
2.可以给普通函数绑定this。
3.通过super来继承props, super(props) this.props=props

二、componentWillMount(组件即将挂载,没有真实dom):
1.可以进行数据修改,可以进行异步操作。
2.被弃用,还要使用加 UNSAFE_componentWillMount
3.弃用原因:容易照成异步滥用,(数据请求是异步,dom实例化是异步,异步套异步,造成异步滥用)

三、render(不能使用setState,):
1.解析this.props和this.state
2.通过React.cretaElement来将jsx转成vdom对象模型(vdom有了) 3.因为js是单线程,不能再当前任务还没结束时再去执行其他任务

四、compontentDidMont(组件挂载结束,真实dom有了):
1.将vdom生成为真实dom
2.可以进行数据请求,数据修改。
3.可以操作真实dom,第三方库实例化\

更新阶段:

触发更新阶段条件:
1.数据改变(props,state)
触发数据改变的方式:
1.setState
2.forceUpdate:会激活componentWillUpdate,render,componentDidUpdate钩子,强制更新,性能不佳

一、componentWillReceivePropsprops改变触发该钩子函数):表示组件即将接受新属性。(17版本中也被弃用,弃用原因:与shouldComponentUpDate功能冲突) 1.可以获得最新的属性 2.this.props和this.nextProps可以监听属性是否改变

二、shouldComconentUpdata(nextProps,nextState)(表示组件是否更新,state改变触发该钩子函数):返回值是true或者false(true表示更新,false表示不更新) 1.有两个参数: 第一个:nextProps最新的属性props。 第二个:nextState最新的状态state。 2.做性能优化的钩子,通过判读nextProps、nextState和this.props、this.state是否发生变化来决定是否重新渲染,达到优化的目的。(可以进行浅比较) 3.多次渲染问题考虑通过该钩子来处理

三、componentWillUpdate (组件即将更新)
1.为更新阶段做准备 2.17版本总被弃用,弃用原因:容易造成异步滥用

四、render(和初始化阶段功能一致)

五、componentDidUpdate(组件更新结束):
1.再次得到证实dom, 2.这个阶段也经历了diff算法对比(react16版本将diff进行了升级,起名为Fiber算法),得到patch补丁对象,将其渲染到页面 3.也可以再次发起请求

销毁阶段

一、componentWillMont(组件卸载): 1.清除定时器,计时器 2.清除组件无法删除的事件,比如绑定在window或者document身上的事件 3.删除第三方的实例

错误处理阶段

一、componentDidCath: 1.捕获子组件错误 2.显示回退ui