React之组件的生命周期

青旅半醒 2023-01-12 11:39 138阅读 0赞

### 组件生命周期 ###

*  1.创建阶段
 *  2.更新阶段
 *  3.卸载阶段
 *  不常用的钩子函数

*  生命周期： 组件从创建到加载运行再到卸载的整个过程就是生命周期 （创建 --> 加载运行 --> 卸载）
 *  掌握组件生命周期有助于我们理解组件的运行方式，完成更复杂的功能，分析解决错误
 *  生命周期的每个阶段中，都有钩子函数，钩子函数能够实现更多的功能
 *  只有类组件才有生命周期  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]

# 1.创建阶段 #

创建时会顺序执行三个函数： `constructor` —> `render` —> `componentDidMount`

import React from 'react'
    import ReactDOM from 'react-dom'
    
    class Hello extends React.Component { 
      constructor () { 
        super()
    
        console.log('执行了constructor 函数')
      }
    
      render () { 
        console.log('执行了 render 函数')
        return (
          <div id="title">Hello 组件</div>
        )
      }
      componentDidMount () { 
        console.log('执行了 componentDidMount 函数')
        const title = document.querySelector('#title')
        console.log(title)
      }
    }
    
    ReactDOM.render(<Hello />, document.querySelector('#app'))

执行效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]

<table> 
 <thead> 
  <tr> 
   <th>钩子函数</th> 
   <th>触发时机</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>constructor</td> 
   <td>创建组件时</td> 
   <td>初始化 state；使用 bind 修改方法的this指向</td> 
  </tr> 
  <tr> 
   <td>render</td> 
   <td>每次渲染组件时</td> 
   <td>渲染页面 （不能调用 setState 方法）</td> 
  </tr> 
  <tr> 
   <td>componentDidMount</td> 
   <td>渲染完成后</td> 
   <td>发送网络请求；DOM操作</td> 
  </tr> 
 </tbody> 
</table>

# 2.更新阶段 #

*  更新时会顺序执行两个函数： render —> componentDidUpdate
 *  有三种情况会更新组件：
    
     *  forceUpdate()： 调用 forceUpdate() 强制进行更新
     *  setState()： 调用了setState 方法更新数据
     *  new props： props 的值发生改变时

1.  调用 forceUpdate() 强制进行更新
2.  调用了setState 方法更新数据

import React from 'react'
    import ReactDOM from 'react-dom'
    
    class App extends React.Component { 
      constructor () { 
        super()
    
        this.state = { 
          name: '安琪拉',
          level: 1,
          hp: 680,
          mp: 320
        }
    
        console.log('执行了constructor 函数')
      }
    
      handleClick = () => { 
        // 调用 forceUpdate 方法能够强制更新
        // this.forceUpdate()
    
        // 调用 setState 方法更新数据后触发更新
        this.setState({ 
          level: this.state.level + 1,
          hp: this.state.hp + 1,
          mp: this.state.mp + 1
        })
      }
    
      render () { 
        console.log('执行了 render 函数')
        return (
          <div>
            <ul>
              <li>英雄: { this.state.name}</li>
              <li>等级: { this.state.level}</li>
              <li>血量: { this.state.mp}</li>
              <li>蓝量: { this.state.hp}</li>
            </ul>
            <button onClick={ this.handleClick}>升级</button>
          </div>
        )
      }
      componentDidMount () { 
        console.log('执行了 componentDidMount 函数')
      }
      componentDidUpdate () { 
        console.log('执行了 componentDidUpdate 函数')
      }
    }
    
    ReactDOM.render(<App />, document.querySelector('#app'))

1.  props的值发生改变时 (更新父组件的state就是更新子组件的props)

import React from 'react'
    import ReactDOM from 'react-dom'
    
    class App extends React.Component { 
      constructor () { 
        super()
    
        this.state = { 
          name: '安琪拉',
          level: 1,
          hp: 680,
          mp: 320
        }
    
        console.log('App-constructor')
      }
    
      handleClick = () => { 
        // 调用 forceUpdate 方法能够强制更新
        // this.forceUpdate()
    
        // 调用 setState 方法更新数据后出发更新
        this.setState({ 
          level: this.state.level + 1,
          hp: this.state.hp + 1,
          mp: this.state.mp + 1
        })
      }
    
      render () { 
        console.log('App-render')
        return (
          <div>
            <Hero attr={ this.state} />
            <button onClick={ this.handleClick}>升级</button>
          </div>
        )
      }
    
      componentDidMount () { 
        console.log('App-componentDidMount')
      }
    
      componentDidUpdate () { 
        console.log('App-componentDidUpdate')
      }
    }
    
    class Hero extends React.Component { 
      constructor () { 
        super()
        
        console.log('Hero-constructor')
      }
      render () { 
        console.log('Hero-render')
        return (
            <ul>
              <li>英雄: { this.props.attr.name}</li>
              <li>等级: { this.props.attr.level}</li>
              <li>血量: { this.props.attr.mp}</li>
              <li>蓝量: { this.props.attr.hp}</li>
            </ul>
        )
      }
    
      componentDidMount () { 
        console.log('Hero-componentDidMount')
      }
    
      componentDidUpdate () { 
        console.log('Hero-componentDidUpdate')
      }
    }
    
    ReactDOM.render(<App />, document.querySelector('#app'))

<table> 
 <thead> 
  <tr> 
   <th>钩子函数</th> 
   <th>触发时机</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>render</td> 
   <td>每次渲染</td> 
   <td>渲染页面</td> 
  </tr> 
  <tr> 
   <td>componentDidUpdate</td> 
   <td>更新组件完成</td> 
   <td>发送网络请求；DOM操作;注意： 如果要执行 setState(), 必须有结束条件</td> 
  </tr> 
 </tbody> 
</table>

componentDidUpdate () { 
      console.log('执行了 componentDidUpdate 函数')
      if (this.state.id === 10) { 
        return 
      }
    
      this.setState({ 
        id: 10
      })
    }

如果没有if判断，则会陷入死递归中

*  setState 会调用 render 和 componentDidUpdate
 *  componentDidUpdate 又会再次调用 setState

# 3.卸载阶段 #

<table> 
 <thead> 
  <tr> 
   <th>钩子函数</th> 
   <th>触发时机</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>componentWillUnmount</td> 
   <td>卸载组件</td> 
   <td>执行清理工作</td> 
  </tr> 
 </tbody> 
</table>

import React from 'react'
    import ReactDOM from 'react-dom'
    
    // 目标: 点击按钮删除 Show 组件
    class App extends React.Component { 
      state = { 
        flag: true
      }
      
      removeDOM = () => { 
        this.setState({ 
          flag: false
        })
      }
    
      render () { 
        return (
          <div>
            {  
              this.state.flag ? <Show /> : <div>show被删除了</div>
            }
            <button onClick={ this.removeDOM}>删除</button>
          </div>
        )
      }
    }
    
    class Show extends React.Component { 
      constructor () { 
        super()
    
        this.timerId = setInterval(function () { 
          console.log(123)
        }, 500)
      }
    
      render () { 
        return (
          <div>Show 组件</div>
        )
      }
    
      componentWillUnmount = () => { 
        console.log('Show-componentWillUnmount')
        clearInterval(this.timerId)
      }
    }
    
    ReactDOM.render(<App />, document.querySelector('#app'))

# 不常用的钩子函数 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 2]

![在这里插入图片描述][20210128142922341.png_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/1f018cedc303489c90be130b922e0179.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221119/ad62fd55c23d4d37af80f82f6ca94b3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221119/e96de299a38040018c25a26a9d1b4de9.png
[20210128142922341.png_pic_center]: /images/20221119/803c7cea9f4647499fb68b9ebec3a15c.png

React之组件的生命周期

发表评论取消回复

还没有评论，来说两句吧...

相关阅读