学习React第十篇：了解React组件生命周期方法

最孤单的人

于 2020-11-06 16:32:46 发布

阅读量206

点赞数

CC 4.0 BY-SA版权

分类专栏： # Reactjs 入门教程文章标签： React DidMount DidUpdate WillUnmount DidCatch

本文链接：https://blog.youkuaiyun.com/qq_20613731/article/details/109534143

Reactjs 入门教程专栏收录该内容

18 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了React组件的生命周期，包括安装、更新和卸载阶段的关键方法。重点讲解了componentWillMount、render、componentDidMount、componentWillUpdate、componentDidUpdate和componentWillUnmount等生命周期方法的用途，以及不推荐使用的旧版方法。还提到了在错误处理阶段的生命周期方法和React入门学习资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

继编写使用React ref获取对特定组件的引用

### React组件具有生命周期，可以访问该生命周期的特定阶段。本课概述了整个组件的生命周期，并演示了React组件的安装和卸载。

当我们的组件添加到DOM时，这称为“安装”，当我们的组件从DOM中删除时，这称为“卸载”。在此状态的各个阶段，可以使用几种生命周期方法。

先贴一张生命周期图，大概了解一下：

示例文件 Lifecycles.js：

import React from 'react';
import ReactDOM from 'react-dom'

class Lifecycle extends React.Component {
    constructor() {
        super();
        this.state = { val: 0 }
        this.update = this.update.bind(this)
    }

    update() {
        this.setState({ val: this.state.val + 1 })
    }

    compon