一文带你搞懂React生命周期

妖狐艹你老母 2022-10-16 07:15 227阅读 0赞

你真的了解React生命周期吗？  
带你了解之前先看个YYDS（永远的神）

![在这里插入图片描述][20210527194704158.png_pic_center]  
看也看完了，那就直接上教程了

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

## 创建时（挂载） ##

*  执行的时机：组件创建的时候（页面加载）
 *  执行的顺序  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 1]  
    **constructor阶段**：我们可以初始化state状态，也可以为事件处理绑定this（否则的话this是undefined）

constructor() {
        super()
    
        this.state = {
          name: 'david_远',
          age: '保密'
        }
    
        this.handClick = this.handClick.bind(this)
      }

**render阶段**：渲染页面UI，但是我们不能在render渲染时调用setState，否则会报错  
错误示范：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 2]

render () {
        this.setState({
          name: 'age'
        })
        return (
          <div>
            <p>姓名：{this.state.name},年龄：{this.state.age}</p>
            <button onClick={this.handClick}>改变</button>
          </div>
        )
      }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 3]

正确写法：

render () {
        return (
          <div>
            <p>姓名：{this.state.name},年龄：{this.state.age}</p>
            <button onClick={this.handClick}>改变</button>
          </div>
        )
      }

**componentDidMount阶段**：就可以做网络请求和操作DOM了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 5]  
完整：

import React from 'react';
    import ReactDOM from 'react-dom';
    
    class App extends React.Component {
      constructor() {
        super()
    
        this.state = {
          name: 'david_远',
          age: '保密'
        }
    
        this.handClick = this.handClick.bind(this)
      }
      render () {
        return (
          <div>
            <p id="app">姓名：{this.state.name},年龄：{this.state.age}</p>
            <button onClick={this.handClick}>改变</button>
          </div>
        )
      }
      componentDidMount () {
        document.querySelector('#app').addEventListener('click', this.handClick)
      }
      handClick () {
        this.setState(() => {
          return {
            name: "david_yuan"
          }
        }, () => {
          this.setState({
            age: '依旧保密'
          })
        })
      }
    }
    
    ReactDOM.render(
      <App />,
      document.getElementById('root')
    );

## 更新时 ##

执行时机：setState、forUpdate、组件接收到新props时  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 6]

## 卸载时 ##

组件从页面消失的时候执行  
![在这里插入图片描述][20210527200436322.png]

## 旧版的生命周期函数 ##

做一下了解就可以了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 7]

[20210527194704158.png_pic_center]: /images/20221014/98abb82c8e5d4f2d826953c10ff5f18c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70]: /images/20221014/4b31c9460bae49fa8349863fab6db759.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 1]: /images/20221014/4e5b3d97ea134edd9fc610cc9a837473.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 2]: /images/20221014/7c3ecf0026994ba7a9ac8aaeeb2754a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 3]: /images/20221014/589c00dc70204951bd22633f2a048981.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 4]: /images/20221014/d3dfafc0741a4d9a81a4cd3a8a6688ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 5]: /images/20221014/a94f2c44a03a40959b84885b74f68342.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 6]: /images/20221014/91fb05578fb94253959bba305bf48c49.png
[20210527200436322.png]: /images/20221014/86f18eaf7c734775a6608be0019448eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 7]: /images/20221014/71e6ec6f4aba44d3866d7fde069b28e4.png