React 教程 componentDidMount() componentWillUnmount()

React是一个流行的前端框架，因为它使得构建复杂的用户界面变得更加容易。本文将介绍两个React生命周期函数中的两个: componentDidMount()和componentWillUnmount()。

componentDidMount()

componentDidMount()是在组件被渲染后执行的生命周期函数。它可以用来在组件被添加到DOM之后执行任何需要的操作,例如，访问或者操作DOM元素。这个方法只会在组件渲染的第一次执行一次，你无法阻止它执行。

下面是一个简单的例子，如何使用componentDidMount()从API调用数据，并将其更新到组件状态中：

import React, { Component } from 'react';
import axios from 'axios';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  componentDidMount() {
    axios.get('/api/data')
      .then(res => {
        const data = res.data;
        this.setState({data});
      })
      .catch(err => {
        console.log(err);
      });
  }

  render() {
    return (
      <div>
        {this.state.data.map(item => <div key={item.id}>{item.name}</div>)}
      </div>
    );
  }
}

componentWillUnmount()

componentWillUnmount()是在组件被销毁时执行的生命周期函数。它可以在组件被卸载之前执行任何必要的清理任务，例如取消定时器或删除事件监听器。

下面是一个简单的例子，如何使用componentWillUnmount()清除组件引用：

import React, { Component } from 'react';

class MyComponent extends Component {
  componentWillUnmount() {
    this.props.clearMyComponentRef();
  }

  render() {
    return (
      <div>
        My Component
      </div>
    );
  }
}

总结

componentDidMount()和componentWillUnmount()是在React中非常有用的生命周期函数。它们可以帮助你在需要时执行一些初始或清理任务。对于组件的正确工作很重要，尤其是在处理需要进行I/O操作或与其他组件进行通信时。了解它们如何工作，以及如何在你的代码中使用它们，将使你开发更加快速和高效。