React生命周期函数详解：洞悉组件生命周期，掌握组件状态变化

React生命周期函数是React组件在不同生命周期阶段自动执行的函数。这些函数可以帮助您在组件的不同阶段执行特定的操作，如初始化状态、更新状态、销毁组件等。通过理解和使用React生命周期函数，您可以更好地控制组件的行为，并构建出更加健壮和可维护的应用程序。

React类组件生命周期函数

React类组件的生命周期函数分为三个阶段：挂载、更新和卸载。在每个阶段都会有各自的生命周期函数，生命周期函数就是在组件的特定时期，自动执行的函数。

生命周期阶段	生命周期函数	时机
挂载	constructor()	当组件实例被创建时执行。
挂载	getDerivedStateFromProps()	在组件首次挂载或在更新后接收新的 props 时执行。
挂载	render()	当组件首次挂载或在更新后需要重新渲染时执行。
挂载	componentDidMount()	在组件首次挂载后执行。
更新	shouldComponentUpdate()	在组件接收到新的 props 或 state 时执行，决定是否需要重新渲染组件。
更新	getDerivedStateFromProps()	在组件更新后接收新的 props 时执行。
更新	render()	当组件需要重新渲染时执行。
更新	componentDidUpdate()	在组件更新后执行。
卸载	componentWillUnmount()	在组件被卸载前执行。

React函数组件生命周期函数

React函数组件的生命周期函数与类组件有所不同，函数组件只有两个生命周期函数：

生命周期阶段	生命周期函数	时机
挂载	useEffect()	在组件首次挂载或在更新后执行。
卸载	useEffect()	在组件被卸载前执行。

总结

React生命周期函数是React组件在不同生命周期阶段自动执行的函数。通过理解和使用React生命周期函数，您可以更好地控制组件的行为，并构建出更加健壮和可维护的应用程序。

实例

以下是一个使用React生命周期函数的示例：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    console.log('组件已挂载');
  }

  componentDidUpdate() {
    console.log('组件已更新');
  }

  componentWillUnmount() {
    console.log('组件已卸载');
  }

  render() {
    return (
      <div>
        <p>计数：{this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>点击增加计数</button>
      </div>
    );
  }
}

export default MyComponent;

在这个示例中，我们定义了一个名为MyComponent的React类组件。该组件有两个生命周期函数：componentDidMount()和componentDidUpdate()。componentDidMount()函数在组件首次挂载后执行，而componentDidUpdate()函数在组件更新后执行。

在componentDidMount()函数中，我们使用console.log()函数输出“组件已挂载”到控制台。在componentDidUpdate()函数中，我们使用console.log()函数输出“组件已更新”到控制台。

我们还定义了一个render()函数，该函数返回一个包含一个段落和一个按钮的div元素。段落显示当前的计数，而按钮点击后会增加计数。

如果您在浏览器中运行此示例，您将看到“组件已挂载”和“组件已更新”分别在组件首次挂载和每次点击按钮后输出到控制台。