React与Taro框架 - 对比函数式组件和类组件的生命周期

以下是对 Taro 框架与 React 在函数式组件和类组件生命周期的完整总结，包括两者的对应关系、使用方式，以及在小程序中如何映射生命周期。

---

1. React 函数式组件与类组件的生命周期

React 函数式组件生命周期

React 函数式组件的生命周期是通过 Hooks 来实现的，核心是 useEffect 和其他专用的 Hook（如 useState、useContext）。函数式组件没有传统的类组件生命周期方法，但可以通过 useEffect 模拟挂载、更新和卸载过程。

阶段	生命周期	说明
挂载阶段	useEffect(() => {}, [])	模拟 componentDidMount，只在组件挂载时执行一次。
更新阶段	useEffect(() => {})	模拟 componentDidUpdate，依赖项变更时触发。
卸载阶段	useEffect(() => { return () => {}; }, [])	模拟 componentWillUnmount，在组件卸载时清理副作用（如定时器、事件监听）。
依赖更新	useEffect(() => {}, [deps])	依赖项发生变化时触发，类似于依赖特定 state 或 props 的更新逻辑。

---

React 类组件生命周期

React 类组件提供了完整的生命周期方法，涵盖组件的挂载、更新、卸载和错误处理过程。

阶段	生命周期方法	说明
挂载阶段	constructor	初始化组件状态，绑定方法。
	componentDidMount	组件挂载后执行，适合初始化数据（如网络请求）。
更新阶段	shouldComponentUpdate	控制组件是否需要更新，返回布尔值。
	componentDidUpdate	组件更新后触发，可执行 DOM 操作。
卸载阶段	componentWillUnmount	组件卸载前触发，适合清理资源（如定时器、订阅等）。
错误处理阶段	componentDidCatch	捕获子组件错误，避免组件树崩溃。

---

2. Taro 函数式组件与类组件生命周期

Taro 是基于 React 的多端框架，函数式组件和类组件生命周期与 React 类似，但提供了额外的 API 来适配小程序生命周期。

Taro 函数式组件生命周期

Taro 提供了一组 Hooks，使函数式组件可以映射到小程序生命周期，以下是函数式组件生命周期的详细说明：

Taro Hook	小程序生命周期	功能说明
useDidShow	onShow	页面或组件显示时触发。
useDidHide	onHide	页面或组件隐藏时触发。
useReady	onReady	页面初次渲染完成时触发。
usePullDownRefresh	onPullDownRefresh	下拉刷新时触发，需在 page.json 中开启支持。
useReachBottom	onReachBottom	滚动到底部触发，用于加载更多数据。
usePageScroll	onPageScroll	页面滚动时触发，返回滚动位置信息。
useResize	onResize	页面尺寸变化时触发，适用于适配不同屏幕场景。
useShareAppMessage	onShareAppMessage	用户触发分享动作时触发，返回分享内容配置。

示例：函数式组件生命周期

import {
  useDidShow,
  useDidHide,
  usePullDownRefresh,
  usePageScroll
} from '@tarojs/taro';
import { View } from '@tarojs/components';

const MyComponent = () => {
  useDidShow(() => {
    console.log('页面显示');
  });

  useDidHide(() => {
    console.log('页面隐藏');
  });

  usePullDownRefresh(() => {
    console.log('触发下拉刷新');
    Taro.stopPullDownRefresh(); // 停止刷新动画
  });

  usePageScroll((scroll) => {
    console.log('页面滚动信息：', scroll);
  });

  return <View>函数式组件</View>;
};

export default MyComponent;

---

Taro 类组件生命周期

Taro 类组件可以直接使用 React 的生命周期，同时会自动映射到小程序生命周期。

React 生命周期	小程序生命周期	说明
componentDidMount	onReady	页面初次渲染完成时触发。
componentWillUnmount	onUnload	页面卸载时触发，用于清理资源。
——	onShow	页面显示时触发，React 类组件中需要手动监听。
——	onHide	页面隐藏时触发，React 类组件中需要手动监听。

示例：类组件生命周期

import { Component } from 'react';
import { View } from '@tarojs/components';

class MyComponent extends Component {
  componentDidMount() {
    console.log('组件挂载完成');
  }

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

  onShow() {
    console.log('页面显示');
  }

  onHide() {
    console.log('页面隐藏');
  }

  render() {
    return <View>类组件</View>;
  }
}

export default MyComponent;

---

3. React 与 Taro 生命周期对比总结

特性	React	Taro
挂载阶段	componentDidMount / useEffect	componentDidMount / useDidShow
更新阶段	componentDidUpdate / useEffect	componentDidUpdate
卸载阶段	componentWillUnmount / useEffect	componentWillUnmount / useDidHide
页面显示/隐藏	手动实现	useDidShow / useDidHide
下拉刷新	手动实现	usePullDownRefresh
滚动事件	手动监听	usePageScroll

---

4. 使用建议

• 新项目：优先使用函数式组件，搭配 Taro 的 Hooks 和 React 的 Hooks，代码简洁高效。
• 老项目：可以继续使用类组件，Taro 支持完整的 React 类生命周期，便于迁移。
• 复杂业务逻辑：Hooks 足够灵活，推荐在函数式组件中封装逻辑，提高复用性。
• 小程序特性：充分利用 Taro 提供的 Hooks，比如 usePullDownRefresh 和 usePageScroll，能更好地适配小程序场景。

总结来说，Taro 扩展了 React 的生命周期，以适配小程序的特性，同时兼容 React 的开发模式，让开发者可以自由选择函数式组件或类组件来完成多端开发任务。