【React】: React的生命周期

概述

生命周期的每个阶段总是伴随着一些方法的调用,这些方法就是生命周期的钩子函数
钩子函数的作用:为开发人员在不同操作阶段提供了十几
只有 类组件 才有生命周期
 
生命周期的图片:

 同时有:

1.1 创建时 的生命周期执行顺序

 编写以下代码,从而验证constructor,render,componentDidMount的顺序:

class App5 extends React.Component
{
  constructor(props)
  {
    super(props)

    console.warn("生命周期钩子函数:constructor")
  }

  componentDidMount()
  {
    console.warn("生命周期钩子函数:componentDidMount")
  }

  render()
{
  console.warn("生命周期钩子函数:render")
  return (
<div>
<h3></h3>
<h1>统计豆豆被打的次数:</h1>
<button id='btn'>打豆豆</button>
</div>

  )
}
}

ReactDOM.render(<App5/>,document.getElementById('root9'))

在开发者工具中发现执行顺序为:

当然我们对这三个状态还有以下总结:

 

备注:不能在render里调用setstate的原因是:在render里既能够更新状态,也会更新ui,具体可以参考前面的生命周期图,render里调用setstate,而setstate也会继续调用render,这样就会导致递归调用,从而导致error。

一定要在render里进行调用setstate,我们可以采用箭头函数,同时可以将this从render当中抽离出来,这样相当于在生命周期的“更新时”再继续更新Ui,代码如下:

class AppThree extends React.Component
{

  state={
    count:0
  }

  //组件当中的state,可以通过this.state来进行调用
  //使用setState,来修改数据,直接使用this.state.count+1,来修改是行不通的
  //备注:如果直接使用事件抽离的方法,把render函数当中的逻辑抽离出来,但是在当前class的其他
  //的函数当中,是无法调用到this的。 因此在其他函数中无法调用this.setState是肯定的。

  render(){
    return (
      <div>
        <h1>计数器</h1>

        <button onClick={() => {
          this.setState({
            count:this.state.count+1
          })

        } }>
        +1</button>
        <div>这是一个有状态组件当中的数据count。{this.state.count}</div>
      </div>
    )
  }
 
}

这样就可以保证这里的this不是指的render里的this,而是render外部的this。当然还可以将这个this.setstate的逻辑进行抽离出来:

class AppSix extends React.Component
{


  state={
    count:0
  }

  onIncrement = () => 
  {
    this.setState({
      count:this.state.count+1
    })
  }

  render(){
    return (
      <div>
        <h1>计数器</h1>
        {/*在react当中,onclick方法都需要用花括号括起来,再来表示其中的方法,这里的箭头函数可以直接实现调用,只是没有对这个箭头函数
        进行命名,也就是令 hello = () => this.onIncrement(),是否命名都一样的
        */}
        <button onClick={this.onIncrement}>+1</button>
    )
  }
 
}


ReactDOM.render(<AppSix />, document.getElementById('event_six'))

对于componentDidMount,我们可以在里面进行网络请求和dom操作,因为它是等渲染完成后,才开始进行这个生命进程。

1.2 更新时的生命周期

在更新时,也就是值的初始的渲染都完成了,在渲染完成后,用户如果点击了界面,网页如何使用钩子函数对不同状态下的网页进行检测和更新。有三种情况都会导致组件进行重新渲染,分别是调用:

  1. New props(新参数被调用)
  2. setState() 
  3. forceUpdate() : 也就是强制更新
class App6 extends React.Component{

constructor(props)
{
  super(props)

  this.state={
    count:0
  }
}

handleClick= () =>
{
  this.setState({
    count:this.state.count+1
  })
}


render()
{
  return (
    <div>
      <h3>5.2 更新时的生命周期</h3>
      <Counter2 count={this.state.count }/>
      <button onClick={this.handleClick}>打豆豆</button>
    </div>

  )

}

}

class Counter2 extends React.Component
{
  render()
  {
    return <h3>统计豆豆被打的次数:{this.props.count}</h3>
  }


}


ReactDOM.render(<App6/>,document.getElementById('root10'))

 这里用到了子组件counter2,并且子组件接受到了参数props,因此在接受到了参数props后,确实会对ui进行更新,也就是进行重新渲染,我们点击一次按钮,子组件都会接受到一次参数,这样打豆豆的次数就会发生变化。

我们可以看到ComponentDidUpdate()是在render函数之后,才开始执行的,因此有以下的的图片:

 

 

1.3 卸载时的生命周期

 我们在打完豆豆超过3次后,子组件消失,因此可以使用compomentWillUnmount函数,执行清理工作。代码如下:

class App6 extends React.Component{

constructor(props)
{
  super(props)

  this.state={
    count:0
  }
}

handleClick= () =>
{
  this.setState({
    count:this.state.count+1
  })
}


render()
{
  return (
    <div>
      <h3>5.2 更新时的生命周期</h3>
        {
          this.state.count > 3 ? (
            <p>豆豆被打死了</p>

          ) :(
            <Counter2 count={this.state.count }/>
          )

        }

     
      <button onClick={this.handleClick}>打豆豆</button>
    </div>

  )

}

}

class Counter2 extends React.Component
{
  render()
  {
    console.warn("子组件--更新时--render函数被渲染")
    return <h3>统计豆豆被打的次数:{this.props.count}</h3>
  }

  componentDidUpdate()
  {
    console.warn("子组件--更新时--componentDidUpdate函数被渲染")
    
  }

  componentWillUnmount()
  {
    //我们在父组件当中规定了这个子组件在超过3次之后销毁,因此销毁后应该调用这个函数
    console.warn("子组件--生命周期钩子函数: componentWillUnmount")
  }


}


ReactDOM.render(<App6/>,document.getElementById('root10'))

 

 我们在发现子组件消失后,确实compomentWillUnmount函数被执行了,warning被打印出。

 

 

 

posted @ 2023-06-12 15:06  Geeksongs  阅读(83)  评论(0编辑  收藏  举报

Coded by Geeksongs on Linux

All rights reserved, no one is allowed to pirate or use the document for other purposes.