React函数式组件的生命周期

生命周期

React 中类组件提供了多个生命周期钩子函数，在组件的整个生命周期会被执行。生命周期函数的主要作用是在组件开始渲染或者组件完成绑定之后执行一些业务处理逻辑，最常见的是为组件初始化一些数据，比如从网络上获取列表数据、卸载时停止 Timer 等。类组件包括一下主要生命周期函数：

挂载阶段（Mounting）

componentDidMount：在组件挂载后调用。常用于执行副作用操作，如数据获取。

更新阶段（Updating）

componentDidUpdate：在组件更新后调用。用于执行副作用操作。

卸载阶段（Unmounting）

componentWillUnmount：在组件卸载前调用。用于清理操作，如取消订阅或清除定时器。

显而易见，函数式组件是没有生命周期钩子的，他本身就是个函数，函数式组件是通过 useEffect 来实现生命周期函数的效果的，useEffect 钩子包括两个参数，setup 和 dependencies，setup 是主要逻辑，dependencies主要用来做依赖监听，有变化就重新执行副作用。以下代码说名了函数式组件的类似生命周期功能是怎么实现的。

import React, { useState, useEffect } from 'react';function MyComponent() {// 使用 useState 钩子初始化状态const [count, setCount] = useState(0);const [text, setText] = useState('');// 模拟 componentDidMount 和 componentDidUpdateuseEffect(() => {// 组件挂载或更新时执行console.log('组件挂载或更新');// 可以在此处进行数据获取或订阅// 清理函数模拟 componentWillUnmountreturn () => {console.log('组件卸载');// 可以在此处进行取消订阅或清理操作};}, [count, text]); // 依赖项数组，只有当 count 或 text 发生变化时才会运行// 模拟 componentDidMountuseEffect(() => {console.log('组件挂载');// 仅在组件首次挂载时运行的代码return () => {console.log('组件卸载');// 组件卸载时运行的代码};}, []); // 空数组作为依赖项，表示该 effect 仅运行一次return (<div><p>计数：{count}</p><button onClick={() => setCount(count + 1)}>增加计数</button><inputtype="text"value={text}onChange={(e) => setText(e.target.value)}placeholder="输入一些文字"/></div>);
}export default MyComponent;