react 生命周期函数

Posted xiaoxinzi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react 生命周期函数相关的知识,希望对你有一定的参考价值。

定义:指在某个时刻组件会自动调用的函数

阶段:

  1 Initialization : 初始化阶段

  2 Mounting : 真实Dom已插入

  3 Updation : 重新渲染

  4 Unmounting : 已移除真实Dom

这里主要讲解后三个阶段

图解如下

 

技术分享图片

一:Mountiong

1、componentWillMount () {};

组件即将被挂载到页面时自动执行,在render之前执行。只会执行一次

2、render(){} 

render 函数执行

3、组件被挂载到页面之后自动执行,在render之后执行。数据在第一次查询将在这里执行(网页初始化数据),只会执行一次

componentDidMount(){}

 

二 : updation

1、组件被跟新之前自动执行,在render跟新之前。可以理解为需要跟新render吗。如果需要返回 true,不需要就返回 false

shouldComponentUpdate () { return true/false };

2、组件跟新之前自动执行,在shouldComponentUpdate函数之后。如果 shouldComponentUpdate 返回 true 才会执行该函数。

componentWillUpdate () {}

3、render(){} 组件跟新

4、组件重新被挂载到页面之后自动执行。上面四个在props和state跟新后都会执行。

componentDidUpdate ( ) {}

5、当一个组件从父组件接受参数(props更改),一般出现在子组件

componentWillReceiveProps ( ) {}

注:

  只要父组件的render函数被跟新时,子组件这个生命周期函数会被执行。

  如果这个组件第一次存在父组件中,不会执行。

  如何这个组件之前已经存在于父组件中,才会执行。

三 : Unmounting

当这个组件即将被删除的时候自动执行

componentWillUnmount () {}

 

以上是关于react 生命周期函数的主要内容,如果未能解决你的问题,请参考以下文章

react 生命周期

react新的生命周期函数getDerivedStateFromProps

React生命周期详解

React组件的生命周期函数

react native 生命周期详解

react生命周期详解