生命周期
生命周期:组件从诞生到销毁会经历一系列的过程,该过程就叫做生命周期。React在组件的生命周期中提供了一系列的钩子函数(类似于事件),可以让开发者在函数中注入代码,这些代码会在适当的时候运行。
生命周期仅存在于类组件中,函数组件每次调用都是重新运行函数,旧的组件即刻被销
解释 对于类组件而言 每次render函数使用一次组件 相当于new一个react对象 renact本质上虚拟利用对象标识
生命周期实际上是该对象的生命周期 我们研究单个对象的生命周期 每个对象生命周期互不干扰
旧版生命周期(官方不推荐饿了)
React < 16.0.0
初始化阶段 初始化属性与状态
- constructorshagn
- 同一个组件对象只会创建一次 只会运行一次
- 不能在第一次挂载到页面之前,调用setState,为了避免问题,构造函数中严禁使用setState
- componentWillMount ( 组件即将被挂载到页面上)
- 可以使用setState,但是为了避免bug,不允许使用,因为在某些特殊情况下,该函数可能被调用多次
- 正常情况下,和构造函数一样,它只会运行一次
- render (组件渲染到虚拟dom)
- 返回一个虚拟DOM,会被挂载到虚拟DOM树中,最终渲染到页面的真实DOM中
- render可能不只运行一次,只要需要重新渲染,就会重新运行
- 严禁使用setState,因为可能会导致无限递归渲染
- componentDidMount (虚拟dom已经挂载到了页面中成为了真实的dom) 到此为止挂载阶段完成
- 只会执行一次
- 渲染完成 可以使用setState 进行改变
- 通常情况下,会将网络请求、启动计时器等一开始需要的操作,(类似于initial())书写到该函数中
- 组件进入活跃状态 等待属性或者状态发生改变 来重新渲染页面
- componentWillReceiveProps (nextProps) 状态改变触发 接收到了新的属性值
- 即将接收新的属性值
- 参数为新的属性对象
- 该函数可能会导致一些bug,所以不推荐使用
- shouldComponentUpdate 状态setStatus或者属性props共同改变 是否重新渲染组件性能优化点
- 指示React是否要重新渲染该组件,通过返回true和false来指定
- 默认情况下,会直接返回true
- 必须要有返回值 可以通过判断进行性能优化
- componentWillUpdate
- 组件即将被重新渲染 将会调用render函数 之后又会继续render之后的周期函数
- componentDidUpdate
- 往往在该函数中使用dom操作,改变元素
- 该函数拥有两个参数可以获取改变之前的属性还有状态的值
- componentWillUnmount
- 通常在该函数中销毁一些组件依赖的资源,比如计时器
- 组件撤离dom结构 触发 再次显示时候会重新创建对象
新版生命周期
React >= 16.0.0
1、解析: 第一次渲染时 首先触发constructor函数 初始化阶段完成
2、--> 执行getDerivedStateFromProps
3、--> render 组件渲染到虚拟dom
4、--> componentDidMount (虚拟dom已经挂载到了页面中成为了真实的dom) 到此为止挂载阶段完成 ---> 挂载阶段结束
进入更新阶段 当属性 状态有改变时 会触发 getDerivedStateFromProps函数 从属性中获取子女的状态
5、 ----> shouldComponentUpdate 状态setStatus或者属性props共同改变 是否重新渲染组件性能优化点 依旧是按照改变与否进行返回判定
接着再次进行渲染 render
6、 --- 》 getSnapshotBeforeUpdate (获取更新属性状态的快照 )
7、-----》componentDidUpdate
虚拟dom已经重新挂载到了页面上 成为了真实的dom
8、接着进入销毁阶段 componentWillUnmount
React官方认为,某个数据的来源必须是单一的
- getDerivedStateFromProps 从一个属性中获取状态 状态属性改变都会触发
- 通过参数可以获取新的属性和状态
- 该函数是静态的
- 该函数的返回值会覆盖掉组件状态 返回值为null 或者一个对象
- 该函数几乎是没有什么用
- getSnapshotBeforeUpdate 获取更新前快照
- 真实的DOM构建完成,但还未实际渲染到页面中。
- 在该函数中,通常用于实现一些附加的dom操作
- 该函数的返回值,会作为componentDidUpdate的第三个参数
- 得到之前的属性 和 状态 发生在更新阶段
- react认为某个数据的来源必须是单一的