react 生命周期函数

Posted ly2019

tags:

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

什么是生命周期函数呢?

生命周期函数指的是某一时刻组件会自动调用执行的函数,比如render函数,当props或state发生改变的时候,render函数就会自动被调用重新执行。

技术图片

1)组件初始化(Initialization)阶段

对于react组件来说,它会经历一些过程,Initialization指的是初始化过程,这个时候组件会初始化自己的一些数据,比如在constructor定义state,接收props。

2) 组件挂载(Mounting)阶段

组件初始化之后,会被渲染,再挂载到页面上。从图中我们可以看到,mounting阶段有三个生命周期函数,componentWillMount,render,componentDidMount。组件即将被挂载到页面时,会自动执行componentWillMount函数;组件挂载到页面之后,componentDidMount函数会自动执行,这两个生命周期函数只会执行一次。render函数在state、props发生改变时就会自动执行,可以执行多次。

3) 组件更新(Updation)阶段

在数据发生变化的时候,组件就会被更新。如果是props发生了变化,componentWillReceiveProps生命周期函数会被自动执行。当组件没有props参数时,不会被执行。组件若是要从父组件接收参数,只要父组件的render函数被重新执行了,子组件的componentWillReceiveProps函数就会被执行。注意:react初次渲染时这个函数不会被执行。

shouldComponentUpdate函数,在组件更新之前会被自动执行,它返回的是一个布尔值,判断是否重新渲染组件,默认返回true。作用是有些变化不需要重新渲染组件,可以在该函数内阻止。

componentWillUpdate函数,也是在组件更新之前会被执行,但是在componentShouldUpdate执行并返回true之后才会被执行。

当componentWillUpdate执行之后,render函数会被执行。当render函数执行完成以后,componentDidUpdate会被执行。componentDidUpdate的主要作用是,在组件更新之后操作DOM元素。

4)组件卸载(Unmounting)阶段

componentWillUnmount函数在组件从页面卸载之前被调用。作用是,在该方法中执行必要的清理,比如无效的定时器或者在componentDidMount中创建的DOM元素。

 

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

react 生命周期

react新的生命周期函数getDerivedStateFromProps

React生命周期详解

React组件的生命周期函数

react native 生命周期详解

react生命周期详解