对react生命周期的介绍

最新推荐文章于 2022-09-23 15:16:32 发布

gercke

最新推荐文章于 2022-09-23 15:16:32 发布

阅读量142

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/gercke/article/details/109106317

版权

react 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

三、生命周期

很多的事物都有从创建到销毁的整个过程，这个过程称之为是生命周期；React组件也有自己的生命周期，了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能；

我们谈React生命周期时，主要谈的类的生命周期，因为函数式组件是没有生命周期函数的

生命周期是一个抽象的概念，在生命周期的整个过程，分成了很多个阶段；

比如装载阶段（Mount），组件第一次在DOM树中被渲染的过程；
比如更新过程（Update），组件状态发生变化，重新更新渲染的过程；
比如卸载过程（Unmount），组件从DOM树中被移除的过程；

在这里插入图片描述

1.mounting

当我们挂载一个组件时，会先执行constructor构造方法来创建组件；
紧接着调用render函数，获取要渲染的DOM结构（jsx），并且开始渲染DOM；
当组件挂载成功（DOM渲染完成），会执行 componentDidMount 生命周期函数；

2.updating

当我们通过修改props，或者调用setState修改内部状态，或者直接调用forceUpdate时会重新调用render函数，进行更新操作；
当更新完成时，会回调 componentDidUpdate生命周期函数

3.unmounting

当我们的组件不再使用，会被从DOM中移除掉（卸载）；
这个时候会回调componentWillUnmount生命周期函数；

四、生命周期函数

1.constructor

constructor(props);

如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。

constructor中通常只做两件事情：

通过给 this.state 赋值对象来初始化内部的state；
为事件绑定实例（this）；

2.componentDidMount

componentDidMount();

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。

依赖于DOM的操作可以在这里进行；
在此处发送网络请求就最好的地方；（官方建议）
可以在此处添加一些订阅（会在componentWillUnmount取消订阅）；

3.componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot);

4.componentDidUpdate()

会在更新后会被立即调用，首次渲染不会执行此方法。

当组件更新后，可以在此处对 DOM 进行操作；
如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求；（例如，当 props 未发生变化时，则不会执行网络请求）。

componentDidUpdate(prevProps) {
  // 典型用法（不要忘记比较 props）：
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

4.componentWillUnmount

componentWillUnmount();

componentWillUnmount() 会在组件卸载及销毁之前直接调用。

在此方法中执行必要的清理操作；
例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等；

import React, { Component } from 'react';

class HYTestCpn extends Component {
  render() {
    return <h2>HYTestCpn</h2>
  }

  componentWillUnmount() {
    console.log("HYTestCpn componentWillUnmount");
  }
}

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0
    }

    console.log("调用constructor方法");
  }

  render() {
    console.log("调用render方法")
    return (
      <div>
        <h2>当前计数: {this.state.counter}</h2>
        {this.state.counter <= 5 && <HYTestCpn/>}
        <button onClick={e => this.increment()}>+1</button>
      </div>
    )
  }

  increment() {
    this.setState({
      counter: this.state.counter + 1
    })
  }

  componentDidMount() {
    console.log("调用componentDidMount方法");
  }

  componentDidUpdate() {
    console.log("调用componentDidUpdate方法");
  }

  componentWillUnmount() {
    console.log("调用componentWillUnmount方法");
  }
}