react的生命周期

react定义了严格的生命周期,生命周期可能会经历下述过程:

  1. 装载过程(Mount),把组件第一次在DOM中渲染的过程;
  2. 更新过程(UPDATE),当组件被重新渲染的过程;
  3. 卸载过程(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方法,可以在该方法中移除,可以避免内存泄漏。

posted @ 2019-08-12 16:04  灬灬灬灬灬灬  阅读(162)  评论(0编辑  收藏  举报