React组件生命周期钩子函数

React框架组件的生命周期一般分为三个阶段,分别是挂载阶段、更新阶段、卸载阶段

一、挂载阶段

1、constructor
constructor钩子函数是组件的第一个钩子函数,这个钩子函数里面存放管理自身状态的this.state()函数以及super()函数,super()函数在constructor中必须要写,否则会报错。
super()函数主要是调用父类里面的方法。

constructor(){
    super()
    this.state = {
      nums:[1,2,3],
      sum:0  
    }
  }

这个例子中存放了一个初始化的数组1,2,3和一个初始化的sum值为0。

如果当此组件为子组件,并且父组件通过组件props传值过来的时候,constructor函数的参数要加上props,否则在组件里面使用this.props会报错。具体写法如下:

<SwiperCom nums={this.state.nums}></SwiperCom>
constructor(props){
   super(props)
    this.state = {
        n:props.nums   //此处的n为数组[1,2,3]
    }
}

2、getDerivedStateFromProps()
这个钩子函数的作用简单来讲,就是将父组件给子组件传过去的值变成自己的状态进行管理。react中父组件给子组件传递过去的值,子组件不能直接改变,否则会报错。如果我们将这个值变成子组件自己的状态,子组件就可以进行管理了。
从属性里面获取派生状态 初始化的时候执行,外部传入的props改变的,this.setState()改变,这就是这个函数的作用。
这个函数有两个参数,第一个是nextProps,代表下次传递子组件上的props,prevState代表当前状态(就是this.state)
父组件传值:

<SwiperCom nums={this.state.nums}></SwiperCom>

子组件接收

//子组件的state
constructor(props){
        this.state = {
            a:props.nums,   //这个状态a称之为派生状态 ,将父组件传递来的数据映射为自己的状态
        }
    }

我们判断,如果父组件传递来的值和当前state中的值一致,就不需要更新,否则就更新。

static getDerivedStateFromProps(nextProps, prevState){  
	//从props中解构出来nums
	const {nums} = nextProps;
    // 当传入的nums发生变化的时候,更新子组件的state
    if (nums !== prevState.nums) {
        return {
            nums:nums  
        };
    }
    // 否则,对于nums不进行任何操作
    return null;
}

3、render()
render() 方法是 class 组件中唯一必须实现的方法!!!!!!!!!!
在class组件中,这个函数一定要写。只要state发生改变或者props发生改变,这个钩子函数就会执行。react中的数据更新达到视图也更新的效果,必不可少的就是render()函数的执行。
render()会渲染出虚拟的DOM,也就是html文档结构。当在挂载的时候,这个函数就会执行,将虚拟的DOM节点在页面上生成。

render(){
	return(
		<div id="box">
			我是render()渲染的节点
		</div>
	)
}

render函数必须要写return哦。。。。
4、componentDidMount
这个钩子函数是在产生完真是DOM的时候执行的函数。在这个钩子函数里面可以用来派发ajax、实例化第三方的一些插件、开启一些定时器等操作。

componentDidMount(){
	this.timer = setInterval(()=>{
	    console.log("111111111111111")
	},2000)
	console.log("componentDidMount")
 }
二、更新阶段

只要­props、set­State()、force­Update()任意一个产生变化或者方法的使用,都会执行更新阶段的钩子函数。

1、getDerivedStateFromProps()
2、shouldComponentUpdate(nextProps,nextState)
这个钩子函数字面意思“应该对组件进行更新”,此函数用来对react的性能进行优化。
所谓的性能提升就是说白了,就是在某些场景下可以优化react的render的渲染次数。

  • 在普通组件里面可以使用shouldComponentUpdate钩子函数提升react性能。在内部可以判断组件外部接受的最新属性与之前的属性是否一致,从而约束render刷新的时机。只要结果返回true,render就会立马执行渲染更新,返回false就代表render不会执行。
  • 可以使用PureComponent来优化性能。内部机制是通过浅比较去实现的。
  • 对于无状态组件的话,使用 React.memo(组件) 来进行性能提升

shouldComponentUpdate(nexrProps) {
    if (this.props.nums === nexrProps.nums) {
        return false
    }
    return true;

此方法就是拿当前props中值和下一次props中的值进行对比,数据相等时,返回false,反之返回true。
但是这种比较是浅比较,如果涉及array、object、function的比较,就不行。
如何解决这个bug,需要对传递过去的props进行深拷贝。
3、render()
4、getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate() 在最近一次渲染输出(提交到 DOM 节点)之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息(例如,滚动位置)。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。
5、componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。
比如,我们可以把swiper轮播图的是实例化放在这个钩子函数里面。

componentDidUpdate(){
  //数据改变引发的真实dom结构已经挂载完毕了 
	  if(!this.swiper){
	      this.swiper = new Swiper ('.swiper-container', {  
	          loop: true, // 循环模式选项 
	          // 如果需要分页器
	          pagination: {
	          el: '.swiper-pagination'
	          }
	      })   
	  }
}
三、卸载阶段

卸载阶段只有一个钩子函数:componentWillUnmount()
componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作,例如,清除 timer,取消网络请求或清除在 componentDidMount() 中创建的订阅等。

//组件卸载的时候,可以将componentDidMount绑定的定时器及时的清掉
componentWillUnmount(){
     //需要清除定时器
     clearInterval(this.timer)
 }
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值