react定义了严格的生命周期,生命周期可能会经历下述过程:
- 装载过程(Mount),把组件第一次在DOM中渲染的过程;
- 更新过程(UPDATE),当组件被重新渲染的过程;
- 卸载过程(Unmount),组件从DOM中移除的过程。
首先装载过程:
当组件第一次被渲染时,依次调用如下函数:
- constructor
- componenetWillMount
- render
- ComponentDidMount
构造函数 constructor目的:初始化state和绑定成员函数this的环境。
render函数,React中最重要的函数,该韩式必须要实现,render不做实际的渲染,即该函数不会网DOM树上渲染或加载内容,只是返回一个JSX描述的结构,最终有React进行渲染。render应该是一个纯函数,返回的结果应当完全首this.state与this,props影响。
componentWillMount会在调用render函数之前进行调用,这个函数发生在将要进行装载之前,但是这个时候页面尚未进行渲染,因此这个函数里面大部分需要定义的功能,可以提前到constructor中做,,可以向后抬获取数据
componentDidMount会在render函数调用之后并且DOM树已经完成装载后进行调用,并且该函数只能在浏览器端执行,react可以与其他UI库进行配,例如绘图功能使用到d3.js,这个时候jquery就可以卸载该函数中,也就是等到DOM加载完成,然后呃昂jquery在该DOM上去完善或增强。
其次,更新过程:
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
conponentWillReceiveProps函数,在父组件的render函数调用,无论父组件传递给子组件的props是否变化,子组件的该方法都会出发。this.setState方法更新过程不会触发该函数。
shouldComponentUpdate该函数返回一个bool值,告知react本次更新过程是否继续,合理利用可提高性能
conponenntWillUpdate与componentDidUpdate在render方法一前一后执行
最后,卸载过程;
- componentWillUnmount
componentWillUnmount函数在react组件要从DOM树中删除的时候调用,该函数适合做一些请理性的工作,例如在之前声明的一些飞react方法,可以在该方法中移除,可以避免内存泄漏。