返回介绍

Hooks

发布于 2019-12-26 23:51:14 字数 1759 浏览 1614 评论 0 收藏 0

常用 Hooks

Hooks 是 Rax 1.0 新增的特性,它可以让函数组件(Function Component)使用状态和生命周期。Rax 在实现上遵循了 React Hooks 的标准。

Rax 转小程序链路目前支持的 Hooks 有以下几种:

  • useState
  • useEffect
  • useReducer
  • useContext
  • useRef

关于以上 Hooks 的具体使用方式,可以参考这里

示例

import { useState } from 'rax';

export default function Home() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count++);
  }
  return <View onClick={() => handleClick()}>{count}</View>
}

其他 Hooks

  • useHistory
    用于获取 history 对象,其提供路由管理功能,详见路由管理章节。
  • useLocation
    用于获取 history 对象中的 location 属性值,详见路由管理章节。
  • usePageShow
    注册页面出现时的回调函数。
  • usePageHide
    注册页面隐藏时的回调函数。
  • usePageScroll
    注册页面发生滚动行为时的回调函数。
  • useShareAppMessage
    注册小程序页面分享生命周期被触发时的回调函数。
  • usePageReachBottom
    注册页面滑动到底部时的回调函数。
  • usePagePullDownRefresh
    注册页面下拉刷新的时候触发的回调函数。
  • useTabItemTap
    注册当前页面 tabbar 被点击时候触发的回调函数。

示例

import { useHistory } from 'rax-app';

export default function Home() {
  const history = useHistory();
  const handleClick = () => {
    history.push('/profile');
  }
  return <View onClick={() => handleClick()}>Go to profile page</View>
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文