taroHooks.mdx

title
Taro Hooks

:::warning 警告 taro 3.0.0-rc.5 已经修复了依赖更新问题, 您不必理会以下内容. :::

对 Taro 专有 Hooks 进行包装

taro 3.0.0-rc.4 以下版本专有 hooks 存在依赖更新问题, 一旦依赖更新, 新的回调会被合并到数组中, 下次调用时新旧回调一起调用. 如果不传依赖, 回调函数会停留在第一次传入的值不再更新.

用法

从 @tarojsx/hooks 导入, 只能传入 callback 函数, 没有第二个 deps 参数.

import { useState } from 'react'
import { useReachBottom } from '@tarojsx/hooks'
import { View } from '@tarojs/components'

const Demo = () => {
    const [page, setPage] = useState(0)

    useReachBottom(() => {
        console.log(page)
        setPage((prev) => prev + 1)
    })

    return <View style={{ height: '111vh' }} />
}

// 0
// 1
// 2

import { useState } from 'react'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'

const IssueDemo = () => {
    const [page, setPage] = useState(0)

    Taro.useReachBottom(() => {
        console.log(page)
        setPage((prev) => prev + 1)
    })

    return <View style={{ height: '111vh' }} />
}

// 0
// 0
// 0

import { useState } from 'react'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'

const IssueDemo2 = () => {
    const [page, setPage] = useState(0)

    Taro.useReachBottom(() => {
        console.log(page)
        setPage((prev) => prev + 1)
    }, [page])

    return <View style={{ height: '111vh' }} />
}

// 0
// 0,1
// 0,1,2

参考

• useDidShow — 页面展示时的回调
• useDidHide — 页面隐藏时的回调
• usePullDownRefresh — 监听用户下拉刷新事件
• useReachBottom — 监听用户上拉触底事件
• usePageScroll — 监听用户滑动页面事件
• useResize — 小程序屏幕旋转时触发
• useShareAppMessage — 监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容
• useTabItemTap
• useTitleClick
• useOptionMenuClick
• usePullIntercept
• useReady