了解react的运行机制,生命周期是一个绕不过去的话题,那么react的生命周期会经历哪些阶段呢?在我看来应该是会经历四个阶段:
一、初始化阶段
在我们编写类组件的时候,我们常常会有这样的代码:
import React, { Component } from 'react'
class App extends Component {
contructor (props) {
super(props)
}
}
export default App
这也是组件的初始化阶段,首先会继承自react的Component,然后执行上面App组件的构造函数。正因为此,在组件中才能使用一些使用生命周期函数等,而在函数组件中不能使用生命周期函数。super(props)
用来调用基类的构造方法( constructor() ), 也将父组件的props注入给子组件,供子组件读取(组件中props只读不可变,state可变)。而constructor()
用来做一些组件的初始化工作,如定义this.state的初始内容。
二、组件的挂载阶段
在组件的挂在阶段,首先会执行的生命周期函数是componentWillMount,从字面意思就可以看出,willMount,也就是组件挂在到DOM之前调用,而且此函数只会被调用一次,所以,也可以做一些初始化的操作。但是一般都会会提前到contractor中,所以此函数用的比较少。
第二个就是render函数。根据组件的props或者是state的变化,return一个react的元素,不负责组件实际渲染工作,之后由React自身根据此元素去渲染出页面DOM。render是纯函数(Pure function:函数的返回结果只依赖于它的参数;函数执行过程里面没有副作用),不能在里面执行this.setState,会有改变组件状态的副作用。
最后直接的就是componentDidMount函数,此函数是在组件挂在完成之后执行,也只会被调用一次。
三、组件的更新阶段
当父组件发生变化,需要重新更新,那么子组件也会一起被重新渲染,此时,在子组件中即可调用shouldComponentUpdate函数对子组件是否需要重新渲染作出手动优化。
当父组件重新render的时候,意味着会对子组件重新传入props,此时可以调用componentWillReceiveProps函数,对props进行操作,可以将传入的props转化成自生组件的state。在此函数中调用setState并不会引起第二次渲染。是因为componentWillReceiveProps中判断props是否变化了,若变化了,this.setState将引起state变化,从而引起render,此时就没必要再做第二次因重传props引起的render了,不然重复做一样的渲染了。
然后就是componentWillUpdate,组件在更新之前调用。在这边可执行一些组件更新发生前的工作,一般较少用。
render,开启更新渲染。
componentDidUpdate更新之后。此方法在组件更新后被调用,可以操作组件更新的DOM,prevProps和prevState这两个参数指的是组件更新前的props和state。
四、卸载阶段
卸载阶段,只执行了一个生命周期函数,componentWillUnmount,当组件卸载后需要执行的生命周期函数。