react基础（五）— 组件定义方式和生命周期

小徐今天学习了吗
93 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

前言

大家好呀，我是L同学。在前面的几篇文章中，我们都是通过手动引入react，react-dom等这些库。接下来的代码我们都会在脚手架中完成。

在这篇文章中，我们将介绍组件的定义方式和各个生命周期函数。

组件的定义方式

组件化是react的核心思想。组件化提供了一种抽象，尽可能地将页面拆分为一个个小的、可复用的组件，使得我们的代码更加方便组织和管理，并且扩展性更强。

根据组件的定义方式，可以把组件分为类组件和函数组件。

类组件

类组件定义的要求：

  • 无论是类组件还是函数组件，组件的名称是大写字母开头
  • 类组件需要继承自React.Component
  • 类组件必须实现render函数

我们使用class关键字定义一个类组件，其中

  • constructor是可选的，我们通常在constructor中初始化一些数据
  • this.state中维护的是我们组件内部的数据
  • render方法是class组件中唯一必须实现的方法
import React, {Component} from 'react'

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

    this.state = {
      message: '你好呀，Q同学'
    }
  }

  render() {
    return (
      <div>
        <span>我是App组件</span>
        <h2>{this.state.message}</h2>
      </div>
    )
  }
}

image.png

函数组件

函数组件与类组件相比最主要的两个区别是

  • 没有this（组件实例）
  • 没有内部状态（state）
export default function App() {
  return (
    <div>
      <span>我是function的组件： App组件</span>
    </div>
  )
}

生命周期

很多事物都有自己的从创建到销毁的整个过程，这个过程就是生命周期。同样，react也有自己的生命周期。我们在谈react生命周期时，主要谈的是类组件的生命周期，因为函数组件是没有生命周期的。

react内部为了告诉我们当前处于哪个阶段，会对我们组件内部实现的某些函数进行回调，这些函数就是生命周期函数。比如

  • 实现componentDidMount函数: 组件已经挂载到DOM上，就会回调。
  • 实现componentDidUpdate函数：组件已经发生了更新，就会回调。
  • 实现componentWillUnmount函数：组件即将被移除，就会回调。

接下来我们通过实际案例来讲解生命周期函数。

import React, { Component } from 'react'

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      counter: 0
    }

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

  render() {
    console.log('执行了组件的render方法');
    return (
      <div>
        我是App组件
        <h2>当前计数: {this.state.counter}</h2>
        <button onClick={() => this.increment()}>+1</button>
      </div>
    )
  }

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

  componentDidMount() {
    console.log('执行了组件的componentDidMount方法');
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('执行了组件的componentDidUpdate方法');
  }
}

我们可以看到刚开始，这些生命周期函数被调用了。

image.png 当我们点击了按钮，count加1，更新数据，重新渲染页面，重新执行render函数，并且执行componentDidUpdate函数。

image.png 这个是react官网上的生命周期图。

image.png

constructor

constructor中通常只做两件事情：

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

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

componentDidMount

compoentDidMount()会在组件挂载后（插入DOM树中）立即调用。在这个生命周期函数中可以进行依赖于DOM的操作，可以发送网络请求，可以添加一些订阅。

componentDidUpdate

componentDidUpdate()会在更新后被立即调用，第一次渲染不会执行这个方法。

当组件更新后，可以在这个生命周期函数内对DOM进行操作。这个生命周期函数接收3个参数。

componentWillUnmount

componentWillUnmount()会在组件卸载及销毁之前直接调用。在这个方法中执行一些必要的清理操作，比如清除timer，在componentDidMount()中创建的订阅等。

以上介绍的是常用的生命周期函数，一些不常用的生命周期函数和过期的声明周期函数，这边不做介绍。

avatar
文章
阅读
粉丝