Taro-hooks 介绍

信息

新版本的Taro-hooks全新升级. 同时支持 React/Vue . 仅需要安装对应的插件即可进行快捷使用. 见安装及使用

简介

Taro-hooks - 一款对标 Taro API 开发的 Hooks Library. 覆盖几乎所有 Taro API 以及方法. 并且结合 ahooks 扩展了多端共用的 hooks 库.

新的版本跟随 Taro 的设计理念, 进行了 runtime + plugin 化. 最大化减少额外依赖的加入. 只需要引入对应框架的插件即可完美使用本库.

特性

基础特性预览

• 全面匹配 Taro API.
• 结合 ahooks 扩展常用 hook (其中 useRequest 已被单独抽离. 可独立安装使用).
• 使用 ts 开发. 更好的类型提示
• 扩展 h5 部分缺失的功能 (但不保证兼容度)

框架支持

在 taro-hooks 中可以使用 React/PReact/Nerv/Vue 开发体验, 具体请参考:

• 基础教程 ———— React/PReact/Nerv
• 基础教程 ———— Vue

React/PReact/Nerv

# npm
$ npm i @taro-hooks/plugin-react
# yarn
$ yarn add @taro-hooks/plugin-react
# pnpm
$ pnpm add @taro-hooks/plugin-react

project/config/index.js

const config = {
  // ....
+ plugins: ['@taro-hooks/plugin-react'],
  // ...
}

project/types/global.d.ts

/// <reference types="@taro-hooks/plugin-react" />
import '@taro-hooks/plugin-react';

project/pages/index/index.tsx

import React from 'react';
import { View } from '@tarojs/components';
import { useEnv } from 'taro-hooks';

export default () => {
  const env = useEnv();
  return <View>{env}<View>
}

Vue

# npm
$ npm i @taro-hooks/plugin-vue
# yarn
$ yarn add @taro-hooks/plugin-vue
# pnpm
$ pnpm add @taro-hooks/plugin-vue

project/config/index.js

const config = {
  // ....
+ plugins: ['@taro-hooks/plugin-vue'],
  // ...
}

project/types/global.d.ts

/// <reference types="@taro-hooks/plugin-vue" />
import '@taro-hooks/plugin-vue';

project/pages/index/index.vue

<template>
  <view class="index">
    <text>{{ env }}</text>
  </view>
</template>

<script>
import { useEnv } from 'taro-hooks'

export default {
  setup() {
    const env = useEnv();
    return {
      env
    }
  },
};
</script>

使用案例

配套的示例项目和一个简单的 Todo 是目前作者提供的完整线上项目.

查看更多的案例, 请点击

若你的项目中也使用了 taro-hooks . 可点击提交指南进行提交. 提交成功后会在首页展示.