Taro-03-页面生命周期

React：

useEffect(() => {
}, []);

只能监听：

组件挂载
组件卸载

---

但小程序页面有：

进入页面
离开页面
返回页面
切后台
切前台

所以 Taro 提供页面生命周期。

---

useLoad

页面加载

// 跳转：/pages/test/index?id=123&from=home
useLoad((options) => {
  console.log(options.id);    // '123'（字符串）
  console.log(options.from);  // 'home'
});

注意：

1. 路由 query 是平铺在 options 上的，不是 options.query.id（那是 App 级 onShow 的结构）。
2. 值都是字符串（微信规范），用时自己转类型。
3. Taro 会额外注入 $taroTimestamp，用于页面实例标识，一般可忽略。
4. 触发时会同步更新 Current.router，params 来自这些路由参数。

相当于：

页面第一次创建

只执行一次，但「页面实例」可能重建

• navigateTo 返回：同一页面实例还在栈里 → useLoad 不会再执行，只会 useDidShow。
• redirectTo / reLaunch / 出栈后再进：页面销毁重建 → useLoad 会再执行。

所以：「只执行一次」指的是「这个页面实例的生命周期内」。

---

useReady

页面渲染完成

useReady(() => {
});

类似：

componentDidMount

---

useDidShow

重点：这里的 options 是 启动/展示参数，结构更接近 App 的 onShow：

useDidShow((options?: {
  path: string
  query: Record<string, any>  // 注意：这里是 query 对象
  scene: number
  shareTicket: string
  referrerInfo: { appId?, extraData? }
  // 还有 forwardMaterials、chatType、apiCategory 等
}) => {
// there is some code
});

每次进入页面都会触发。

例如：

A
 ↓
B
 ↑
A

回来时：

useDidShow

再次执行。

---

实际开发：

useShow(() => {
  getUserInfo();
});

比：

useEffect(() => {}, [])

更常见。

---

useDidHide

页面隐藏

useDidHide(() => {
});

例如：

A
 ↓
B

A触发：

useDidHide

---

useUnload

页面销毁

useUnload(() => {
});

对应：

页面真正出栈

---

生命周期顺序

第一次进入：

useLoad
 ↓
useReady
 ↓
useShow

---

离开（页面不可见）：

useHide

---

页面出栈销毁（切后台不会触发）：

useUnload

---

其他页面级 Hook（文档里常略过）

Hook	参数	用途	备注
usePullDownRefresh	无	下拉刷新	需在 index.config.ts 开 enablePullDownRefresh
useReachBottom	无	触底加载	可配 onReachBottomDistance
usePageScroll	{ scrollTop }	页面滚动
useResize	尺寸/方向变化	横竖屏等
useShareAppMessage	分享对象	转发给朋友	用了才会注册，影响右上角菜单
useShareTimeline	分享对象	分享到朋友圈	同上
useTabItemTap	{ index, pagePath, text }	Tab 被点击	仅 Tab 页
useAddToFavorites	收藏配置	点「收藏」	主要 weapp
useSaveExitState	返回 { data, expireTimeStamp? }	页面被回收前存状态	主要 weapp

---

App 级 Hook（写在 app.ts，不是页面）

Hook	参数	对应
useLaunch	LaunchOptions	App.onLaunch，冷启动一次
useDidShow	LaunchOptions?	App.onShow，切前台也会触发
useDidHide	无	App.onHide
useError	error: string	脚本错误
useUnhandledRejection	{ reason, promise }	未处理的 Promise
usePageNotFound	{ path, query, isEntryPage }	页面不存在