React 生命周期 – React 白话运动 10

React10-React-Life-Cycle

序言

上一篇文章详细介绍了 React 语法, React JSX – React 06 学习如何构建 React 组件,并了解组件之间的父子关系。本文将重点介绍组件,并解释组件的生命周期:

  1. 生命周期的三个阶段
  2. 類別物件的生命周期
  3. 函式物件的生命周期

React 生命周期的三个阶段

什么是生命周期?

我们可以想象,组件本身有一些状态,例如:创建、由用户更新、因数据修改而更新,最后在不需要该组件时删除。通常,这些状态是按顺序排列的,这就是生命周期。

生命周期通常用下图表示,该图清楚地说明了生命周期的三个阶段

React Lifecycle - hogantech
React 生命周期

来源:https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

如上图所示,共有三个区块:

  1. Mounting(裝載)
  2. Updating(更新)
  3. Unmounting(卸載)

在 React 组件中,也是围绕这三个阶段来进行组件加载、更新渲染和删除。

类组件的生命周期

类组件有一个生命周期。因为类组件本身就是一个对象,所以它具有对象的特征。

钩子的引入是为了让它们更容易理解,但它们目前是作为函数使用的。

以下是类组件的示例程序代码:

				
					import React, { Component } from 'react' class Test extends Component { constructor(props) { super(props) this.state = { message: '' } this.setMessage = this.setMessage.bind(this) } setMessage() { this.setState({ message: 'Hello World!' }) } render() { return (
            <div>
                <button onclick="{this.setMessage}">Click</button>
                <p>{this.state.message}</p>
            </div>
        )
    }
}

				
			

裝載階段(Mounting)

  • constructor( ) 相当于面向对象编程中构造函数的概念。

  • 可以设置初始值,并在此函数中进行设置和绑定。

  • render( ) 用于将组件渲染到页面上。它通过传回值中的 JSX 将内容呈现到页面上。

更新階段(Updating)

  • setMessage( ) 允许用户在点击按钮时更新信息。
  • render( ) 数据状态更新时会触发一次。

功能组件的生命周期

功能组件通过 React 内置的 Hook(Facebook 团队在 2018 年才发布)拥有生命周期,因此在 2018 年之前,我们主要使用类别组件。

下面是函数组件的示例代码,它要简单得多。

				
					import React, { useState } from &#039;react&#039; function Test() { const [message, setMessage] = useState(&#039;&#039;) return (
        <main>
            <button onclick="{()" > setMessage(&#039;Hello World!&#039;)}&gt; Click
            </button>
            <p>{message}</p>
        </main>
    )
}

				
			

裝載階段(Mounting )

  • useState( ) 是 React 钩子的一个函数,用于初始化数据或状态。

更新階段(Updating)

  • setMessage( ) 允许用户在点击时更新信息,并在 onClick 中使用箭头函数来实现。

这只是显示对象生命周期的一个简单代码,但还有更多的生命周期情况,我们将在后面的钩子文章中介绍。

结论

本文介绍了组件的生命周期,并从简单类和功能组件的角度描述了生命周期。

今后,我们将对主流功能组件的挂钩进行详细介绍。

如果您有任何建议或问题,欢迎留言!

如果您喜欢这一系列文章,请不要犹豫,点击 "喜欢 "并分享,让更多人看到它!

React 白話文運動系列

React Props - React 09

构建 React 项目 - React Vernacular 活动 08

Babel & Webpack & NPM - React 白皮书活动 07

React JSX – React 06

React 如何工作 - React 05

JavaScript 高级函数 - React 04

JavaScript 异步等待 - React 白话运动 03

JavaScript ES6 对象 - React 白皮书活动 02

JavaScript ES6 - React 白皮书活动 01

zh_CN简体中文