React: 组件的生命周期

本章将讨论 React 组件的常用生命周期。

生命周期是指描述一个组件从挂载到销毁的“一生”的过程。React 组件完整的生命周期非常多，你可以在这里查看图示。本章将对常用的生命周期方法进行说明。

为了描述直观，我们将先通过类式组件（这可能也是本教程最后一次使用类式组件了）来说明常用的生命周期，然后再通过函数式组件来描述 React 是如何使用 hooks 来让函数式组件拥有近乎生命周期方式的功能。

要明确一点：生命周期方法是由 React 自动调用的，而不是由程序员来手动调用。

常用生命周期

我希望你已经点开了上面说的完整的生命周期图标，并对照以下内容进行阅读。

我希望你已经点开了上面说的完整的生命周期图标，并对照以下内容进行阅读。

日常开发中，常用的生命周期方法有：

• render()：渲染组件时调用。当 state 和 props 发生改变时（当然还有诸如 forceUpdate()等，我们只讲常用的，不常用的不再赘述），会重新调用该方法，以实现组件的重绘。
• componentDidMount()：当组件完成挂载时调用。【应用场景：初始化数据，比如从后端API中获取数据、初始化定时器、初始化订阅等】
• componentWillUnmount()：当组件即将被卸载时调用。【应用场景：清理资源。比如清除定时器、取消订阅等】

import React from 'react';

class App extends React.Component {
  render() {
    console.log('render()：渲染组件');
    return <h1>你好，axum.rs!</h1>;
  }
  componentDidMount() {
    console.log('componentDidMount()：组件已挂载');
  }
  componentWillUnmount() {
    console.log('componentWillUnmount()：组件即将被卸载');
  }
}

export default App;

本节代码：axum-rs-react-lifecycle

让函数式组件拥有“生命周期”

什么是“监听的 state”

当监听的state 的值发生改变时，才会重新调用回调函数。如果没有设置该参数，则监听所有state，如果不想监听任何 state，请将该参数设置为空数组[]。

模拟 componentDidMount()

回调函数的函数体，可以用来模拟 componentDidMount()。

回调函数的返回值也是一个函数，这个返回值可以用来模拟 componentWillUnmount()

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    console.log('我在模拟 componentDidMount()');

    return () => {
      console.log('我在模拟 componentWillUnmount()');
    };
  }, []);
  return <h1>你好，axum中文网 - 来自 react 的问候</h1>;
}

export default App;

本节代码位于axum-rs-react-fn-lifecycle

案例：获取客户端IP

本案例将实现，使用 React 从 https://httpbin.org/ip 获取客户端IP。首先，我们直接使用浏览器打开这个网址，可看到返回以下内容：

{
  "origin": "具体的IP"
}

流程如下：

• 向 https://httpbin.org/ip 发起 GET 请求【componentDidMount()】
• 将请求的数据进行解析，并保存到组件的状态里【componentDidMount()】
• 使用 JSX 显示结果【render()】

HTTP 请求依赖库

使用类式组件实现

import axios from 'axios';
import React from 'react';

class App extends React.Component {
  state = {
    ip: '正在获取',
  };
  render() {
    return <h1>你好，你的IP是：{this.state.ip}</h1>;
  }
  componentDidMount() {
    axios
      .get('https://httpbin.org/ip')
      .then((resp) => resp.data)
      .then((data) => {
        this.setState({ ip: data.origin });
      })
      .catch((err) => {
        console.log(err);
      });
  }
}

export default App;

本节代码：axum-rs-react-lifecycle-get-ip

使用函数式组件实现

import axios from 'axios';
import React, { useEffect, useState } from 'react';

function App() {
  const [ip, setIp] = useState('正在获取');

  useEffect(() => {
    axios
      .get('https://httpbin.org/ip')
      .then((resp) => resp.data)
      .then((data) => {
        setIp(data.origin);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);
  return <h1>你好，你的IP是：{ip}</h1>;
}

export default App;

本节代码：axum-rs-react-fn-lifecycle-get-ip