欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React componentWillMount、componentDidMount、componentWillUpdate和componentDidUpdate生命周期函数的详解

程序员文章站 2022-03-26 19:48:11
React应用在初始化和更新的过程中,会经过一系列的逻辑,React在不同的逻辑时期会执行不同的生命周期函数,用来给我们做一些处理。 对于初次挂载来说,也就是整个React应用初始化时会执行componentWillMount和componentDidMount生命周期函数 对于更新应用时,比如父组 ......

react应用在初始化和更新的过程中,会经过一系列的逻辑,react在不同的逻辑时期会执行不同的生命周期函数,用来给我们做一些处理。

  • 对于初次挂载来说,也就是整个react应用初始化时会执行componentwillmount和componentdidmount生命周期函数
  • 对于更新应用时,比如父组件修改了子组件的props、组件执行了setstate()更改了state, 还有组件所在的context环境发生变化时,都会执行更新操作,对于更新来说,会执行componentwillupdate和componentdidupdate生命周期函数

这几个生命周期函数的用法如下:

  • componentwillmount()                ;组件将要挂载时触发的函数
  • componentdidmount()                 ;组件挂载完成时触发的函数
  • componentwillupdate(newprops,newstate,newcontext)    ;组件将要更新数据时触发的函数,参数如下
    • newprops  ;新的props
    • newstate     ;新的state
    • newcontext   ;新的context
  • componentdidupdate(newprops,newstate,snapshot)   ;组件数据更新完成时触发的函数,参数如下:
    • newprops  ;新的props
    • newstate     ;新的state
    • snapshot       ;由componentwillreceiveprops生命周期返回的快照

对于componentwillmount和componentdidmount来说它们是没有参数的,而且一个组件挂载时只会执行一次。

举个栗子,需求:定义了两个组件:app组件和person组件,app组件引用了person组件并且传入了一个名为no的props,另外在app组件和person组件内都定义了一个button按钮,分别用于修改person组件的props和state变化,另外我们在person组件内分别定义了上面讲解到的4个生命周期函数,代码如下:

<div id="root"></div>
<script type="text/babel">
class person extends react.component{         //定义一个子组件person
  constructor(props){
    super(props);
    this.state = {no:props.no+100}
  }
  componentwillmount(){
    console.log('trigger:componentwillmounted');
  }
  componentdidmount(){
   console.log('trigger:componentdidmount'); 
  }

  componentwillupdate(newprops,newstate){        
    console.log('trigger:componentdidmount newprops=',newprops,' newstate=',newstate)
  }
  componentdidupdate(newpros,newstate){
    console.log('trigger:componentdidupdate'); 
  }
  render (){
    return <div>
              <button onclick={e=>this.setstate({no:this.state.no+1})}>子组件按钮(用于修改state)</button>
              <p>props.no:{this.props.no}</p>
              <p>state.no:{this.state.no}</p>
           </div>
  }
}

class app extends react.component{      //定义一个父组件app,它会引用子组件,并且修改子组件的props
  constructor(props){
    super(props)
  }
  state = {no:1}
  render(){
    return  <div>
              <button onclick={e=>this.setstate({no:this.state.no+1})}>父组件按钮(用于修改props)</button>
              <person no={this.state.no} />
            </div>
  }
}
reactdom.render(<app/>,root)
</script>

最终页面渲染如下:

React componentWillMount、componentDidMount、componentWillUpdate和componentDidUpdate生命周期函数的详解

初始化时控制台打印如下:

React componentWillMount、componentDidMount、componentWillUpdate和componentDidUpdate生命周期函数的详解

 表示在person组件加载过程中分别触发了componentwillmount和componentdidmount生命周期函数,因为我们在person组件就打印了这两个信息,然后我们点击第一个按钮,看看输出信息:

React componentWillMount、componentDidMount、componentWillUpdate和componentDidUpdate生命周期函数的详解

 writer by:大沙漠 qq:22969969

父组件的按钮对应的事件是每次点击时传递的no递增1,我们可在person组件内的componentwillupdate内打印了newprops,可以看到no发生了变化,每点击一次,componentwillupdate触发一次,并且person组件的props.no递增了1。

同理,我们点击一下第二个按钮,会触发person组件的事件,会修改person组件的state,并触发重新渲染,如下:

React componentWillMount、componentDidMount、componentWillUpdate和componentDidUpdate生命周期函数的详解

同样的,点击后也触发了person组件内的componentwillupdate生命周期函数,将新的props和state打印了出来,我们可以看到state发生了变化。

componentwillupdate的第三个参数是context发生变化时新的context的值,有兴趣的自己写个demo测试一下就好了,我就不贴了。

对于这四个生命周期函数来说,我们只能在事件触发收做一些与主线无关的操作,什么是主线无关呢,比如componentwillupdate是react将要更新的时候触发的,我可不可以返回false,这样react就不会继续更新,而是停止下来了呢,react也提供了这样的生命周期函数,叫做shouldcomponentupdate生命周期函数,当然react还有其它的一些生命周期函数,我们一个个讲解。

转自:https://www.cnblogs.com/greatdesert/p/12851567.html