React组件的生命周期机制及生命周期函数

React组件的生命周期机制

React组件的生命周期函数

React组件本质上是一个状态机,输入确定,则输出一定确定。React组件的生命周期包括初始化阶段、运行中阶段、销毁阶段三个阶段。React框架为组件的不同生命阶段,提供了近十个钩子Hook函数。 例如:

(1)初始化阶段钩子函数

1
2
3
4
5
getDefaultProps()
getInitialState()
componentWillMount()
render //render函数中只能访问this.props和this.state,只能有一个顶层组件,不允许修改状态和DOM输出
componentDidMount

备注:上述五个钩子是按执行顺序排序的。

(2)运行中阶段的钩子函数

此时组件已经渲染好并且用户可以与它进行交互,比如鼠标点击,手指点按,或者其它的一些事件,导致应用状态的改变,将会看到下面的方法依次被调用:

1
2
3
4
5
componentWillReceiveProps()
shouldComponentUpdate() //如果该函数返回false,那么会阻止接下来的render函数调用
componentWillUpdate()
render //和上面的是同一个render函数哦
componentDidUpdate //该函数中可以修改DOM

(3)销毁阶段的钩子函数

1
componentWillUnmount

举例来说,组件可以通过Ajax请求,从服务器获取数据。Ajax请求一般在componentDidMount()方法里面发出,代码如下:

1
2
3
4
5
6
componentDidMount() {
const url = '...';
$.getJSON(url)
.done()
.fail();
}

各钩子函数的说明

(1)getDefaultProps()

对于每个组件实例来讲,这个方法只会调用一次,该组件类的所有后续应用,getDefaultPops将不会再被调用,其返回的对象可以用于设置默认的props(properties的缩写) 值。该函数只在React.createClass({})创建的组件中存在,在class Welcome extends React.Component {}创建的组件中是不存在该函数的。

(2)getInitialState()

对于组件的每个实例来说,这个方法的调用有且只有一次,用来初始化每个实例的state,在这个方法里,可以访问组件的props。每一个React组件都有自己的state,其与props的区别在于state只存在组件的内部,props在所有实例中共享。该函数只在React.createClass({})创建的组件中存在,在class Welcome extends React.Component {}创建的组件中是不存在该函数的。

(3)componentWillMount()

该方法在首次渲染之前调用,也是在render方法调用之前修改state的最后一次机会。

(4)render()

render方法会创建一个虚拟DOM,用来表示组件的输出。对于一个组件来讲,render方法是唯一一个必需的方法。render方法返回的结果并不是真正的DOM元素,而是一个虚拟的表现,类似于一个DOM tree的结构的对象。react之所以效率高,就是这个原因。render()函数执行结果就是页面被重新渲染啦。

(5)componentDidMount()

该方法不会在服务端被渲染的过程中调用。该方法被调用时,已经渲染出真实的DOM,可以在该方法中通过this.getDOMNode()访问到真实的DOM(推荐使用ReactDOM.findDOMNode())。

(6)componentWillReceiveProps()

组件的props属性可以通过父组件来更改,这时componentWillReceiveProps将来被调用。可以在这个方法里更新state,以触发render方法重新渲染组件。

(7)shouldComponentUpdate()

如果你确定组件的props或者state的改变不需要重新渲染,可以通过在这个方法里通过返回false来阻止组件的重新渲染,返回false则不会执行render 以及后面的componentWillUpdate,componentDidUpdate方法。这个函数必须返回值必须是布尔型,若返回false,则不重新渲染页面,若返回true,则会重新渲染页面。

(8)componentWillUpdate()

这个方法和componentWillMount类似,在组件接收到了新的props或者state即将进行重新渲染前,componentWillUpdate(object nextProps, object nextState) 会被调用,注意不要在此方面里再去更新props或者state。

(9)componentDidUpdate()

这个方法和componentDidMount类似,在组件重新被渲染之后,componentDidUpdate(object prevProps, object prevState) 会被调用。可以在这里访问并修改DOM。

(10)componentWillUnmount()

每当React使用完一个组件,这个组件必须从DOM中卸载后被销毁,此时componentWillUnmout会被执行,完成所有的清理和销毁工作,在componentDidMount中添加的任务都需要再该方法中撤销,如创建的定时器或事件监听器。

一点补充说明

(1)当我们在组件中调用setState函数去更新组件的this.state时,就会依次调用shouldComponentUpdate、componentWillUpdate、render以及componentDidUpdate等函数,可能还会去调用其他函数啦。

(2)当我们的组件的属性props变化时,也会调用一些组件的生命周期函数,会依次调用componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render以及componentDidUpdate等函数。也就是说,当React组件的props被修改时,也是会重新渲染该组件的啦。

(3)一般来说,我们很少重写componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate以及componentDidUpdate这四个函数。componentWillUnmount我们一般也很少重写啦。

学习资料参考于:
https://segmentfault.com/a/1190000004168886