P19:React高级-生命周期讲解(一)
React
的生命周期是非常重要的知识点,所以关于 React 声明周期的教程可以多看几遍,我也会尽量的把 React 的生命周期讲的细致。生命周期的课程我分成三篇来讲,这样更容易让你理解。
React 生命周期图
这张图看起来有点复杂,但是小伙伴们不要有恐慌心里,我会抽丝剥茧,给你详细讲解。
通过这张图你可以看到 React 声明周期的四个大阶段:
Initialization
:初始化阶段。Mounting
: 挂在阶段。Updation
: 更新阶段。Unmounting
: 销毁阶段
什么是生命周期函数
如果非要用一句话把生命周期函数说明白,我觉的可以用这句话来说明:
生命周期函数指在某一个时刻组件会自动调用执行的函数
举例:写的美女的例子。里边的render()
函数,就是一个生命周期函数,它在 state 发生改变时自动执行。这就是一个标准的自动执行函数。
constructor
不算生命周期函数。
constructor
我们叫构造函数,它是 ES6 的基本语法。虽然它和生命周期函数的性质一样,但不能认为是生命周期函数。
但是你要心里把它当成一个生命周期函数,我个人把它看成 React 的Initialization
阶段,定义属性(props)和状态(state)。
Mounting 阶段
Mounting 阶段叫挂载阶段,伴随着整个虚拟 DOM 的生成,它里边有三个小的生命周期函数,分别是:
componentWillMount
: 在组件即将被挂载到页面的时刻执行。render
: 页面 state 或 props 发生变化时执行。componentDidMount
: 组件挂载完成时被执行。
componentWillMount代码
componentWillMount(){ console.log('componentWillMount----组件将要挂载到页面的时刻') }
componentDidMount代码
componentDidMount(){ console.log('componentDidMount----组件挂载完成的时刻执行') }
render代码
render(){ console.log('render---组件挂载中') }
这时候我们查看一下控制台,会为我们打出如下提示:
componentWillMount----组件将要挂载到页面的时刻执行 render----开始挂载渲染 componentDidMount----组件挂载完成的时刻执行
这也是生命周期的顺序。有小伙伴会问我,这个函数书写有顺序吗?哪个在前?哪个在后?其实是没有顺序的,你可以随便改动他们的顺序。
注意的问题
componentWillMount
和componentDidMount
这两个生命周期函数,只在页面刷新时执行一次,而render
函数是只要有 state 和 props 变化就会执行,这个初学者一定要注意。
总结
本文讲解了 React 的生命周期函数,先是简单了解了一下 React 生命周期函数的四大阶段,然后又详细学习了一下Mounting
挂载阶段中的三个生命周期函数。下节课会学习Updation
阶段的生命周期函数。
码云笔记 » P19:React高级-生命周期讲解(一)