A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

每到关键节点,我们总希望有一些沉思时刻,因为这时候做出的决策会改变人生的走向。
React组件也一样,它会给开发者一些沉思时刻,在这里,开发者可以改变组件的走向。
异步渲染下的生命周期React花了两年时间祭出Fiber渲染机制。
简单来说,React将diff的过程叫做Reconciliation。以前这一过程是一气呵成的,Fiber机制把它改成了异步。异步技能将在接下来的版本中逐步解锁。
明明是一段同步代码,怎么就异步了呢?
原理是Fiber把任务切成很小的片,每执行一片就把控制权交还给主线程,待主线程忙完手头的活再来执行剩下的任务。当然如果某一片的执行时间就很长(比如死循环),那就没主线程什么事了,该崩溃崩溃。
这会给生命周期带来什么影响呢?
影响就是挂载和更新之前的生命周期都变的不可靠了。
为什么这么讲?因为Reconciliation这个过程有可能暂停然后继续执行,所以挂载和更新之前的生命周期钩子就有可能不执行或者多次执行,它的表现是不可预期的。
因此16之后的React生命周期迎来了一波大换血,以下生命周期钩子将被逐渐废弃:
  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate
看出特点了么,都是带有will的钩子。
目前React为这几个生命周期钩子提供了别名,分别是:
  • UNSAFE_componentWillMount
  • UNSAFE_componentWillReceiveProps
  • UNSAFE_componentWillUpdate
React17将只提供别名,彻底废弃这三个大活宝。取这么个别名意思就是让你用着恶心。
constructor()React借用class类的constructor充当初始化钩子。
React几乎没做什么手脚,但是因为我们只允许通过特定的途径给组件传递参数,所以constructor的参数实际上是被React规定好的。
React规定constructor有三个参数,分别是props、context和updater。
  • props是属性,它是不可变的。
  • context是全局上下文。
  • updater是包含一些更新方法的对象,this.setState最终调用的是this.updater.enqueueSetState方法,this.forceUpdate最终调用的是this.updater.enqueueForceUpdate方法,所以这些API更多是React内部使用,暴露出来是以备开发者不时之需。
在React中,因为所有class组件都要继承自Component类或者PureComponent类,因此和原生class写法一样,要在constructor里首先调用super方法,才能获得this。
constructor生命周期钩子的最佳实践是在这里初始化this.state。
当然,你也可以使用属性初始化器来代替,如下:
import React, { Component } from 'react';class App extends Component {    state = {        name: 'biu',    };}export default App;复制代码componentWillMount()

2 个回复

倒序浏览
奈斯
回复 使用道具 举报
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马