React Native 常用 Hook 工具库完整指南

React Native 常用 Hook 工具库完整指南

📚 目录

1. 通用 React Hook 库
2. React Native 专用 Hook 库
3. 特定功能 Hook 库
4. 推荐安装清单
5. 实战示例

---

通用 React Hook 库

这些库在 React 和 React Native 中都可以使用。

1. ahooks ⭐⭐⭐⭐⭐

阿里巴巴开源的高质量 React Hooks 库

• GitHub: alibaba/hooks
• Stars: 14k+
• 特点:
  • 包含 100+ 实用 Hooks
  • TypeScript 编写，类型完善
  • 文档详细，中英文双语
  • 性能优化，经过大规模生产验证

核心 Hooks 分类：

状态管理

• useBoolean - 布尔值管理
• useToggle - 开关切换
• useSet / useMap - 集合/映射管理
• useCookieState / useLocalStorageState - 持久化状态

副作用

• useDebounce / useThrottle - 防抖/节流
• useInterval / useTimeout - 定时器
• useUpdateEffect - 跳过首次渲染的 effect
• useAsyncEffect - 异步 effect

数据请求

• useRequest - 强大的数据请求 Hook
  • 自动管理 loading/error/data
  • 防抖/节流
  • 轮询
  • 缓存
  • 重试
  • 依赖刷新

生命周期

• useMount / useUnmount - 挂载/卸载
• useUpdateLayoutEffect - 跳过首次的 layoutEffect

性能优化

• useMemoizedFn - 持久化函数引用
• useCreation - 强化版 useMemo

安装：

npm install ahooks
# 或
yarn add ahooks

使用示例：

import { useRequest, useDebounce, useToggle } from 'ahooks';

function SearchComponent() {
  const [keyword, setKeyword] = useState('');
  const debouncedKeyword = useDebounce(keyword, { wait: 500 });
  
  const { data, loading, error } = useRequest(
    () => searchAPI(debouncedKeyword),
    {
      refreshDeps: [debouncedKeyword],
      debounceWait: 300,
    }
  );
  
  return (
    <View>
      <TextInput value={keyword} onChangeText={setKeyword} />
      {loading && <Text>搜索中...</Text>}
      {data?.map(item => <Text key={item.id}>{item.name}</Text>)}
    </View>
  );
}

---

2. react-use ⭐⭐⭐⭐⭐

最全面的 React Hooks 集合

• GitHub: streamich/react-use
• Stars: 40k+
• 特点: 包含 100+ Hooks，覆盖几乎所有场景

核心 Hooks（React Native 可用）：

状态管理

• useToggle - 布尔切换
• useCounter - 计数器
• useList - 列表管理
• useMap / useSet - 集合管理
• usePrevious - 获取上一次的值
• useGetSet - 分离 getter/setter

副作用

• useDebounce - 防抖值
• useThrottle - 节流值
• useInterval / useTimeout - 定时器
• useAsync / useAsyncFn - 异步操作
• useAsyncRetry - 带重试的异步

生命周期

• useMount / useUnmount - 挂载/卸载
• useUpdateEffect - 跳过首次的 effect
• useIsMount - 是否首次渲染
• useLifecycles - 生命周期组合

工具类

• useCopyToClipboard - 复制到剪贴板（需要 RN 适配）
• useNetworkState - 网络状态（需要 @react-native-community/netinfo）
• useOrientation - 屏幕方向
• useBattery - 电池状态（需要原生模块）

安装：

npm install react-use
# 或
yarn add react-use

使用示例：

import { useToggle, useDebounce, useAsync } from 'react-use';

function Example() {
  const [isOpen, toggle] = useToggle(false);
  const [text, setText] = useState('');
  const debouncedText = useDebounce(text, 500);
  
  const state = useAsync(async () => {
    const response = await fetch(`/api/search?q=${debouncedText}`);
    return response.json();
  }, [debouncedText]);
  
  return (
    <View>
      <Button onPress={toggle}>
        {isOpen ? '关闭' : '打开'}
      </Button>
      {state.loading && <Text>加载中...</Text>}
      {state.value && <Text>{JSON.stringify(state.value)}</Text>}
    </View>
  );
}

---

3. usehooks-ts ⭐⭐⭐⭐

TypeScript 优先的 Hooks 库

• GitHub: juliencrn/usehooks-ts
• Stars: 6k+
• 特点:
  • 完全用 TypeScript 编写
  • 类型安全
  • 代码简洁易读
  • 适合学习

核心 Hooks：

• useLocalStorage - localStorage 持久化
• useDebounce - 防抖
• useToggle - 开关
• useEventListener - 事件监听
• useIsomorphicLayoutEffect - SSR 兼容的 layoutEffect
• useMediaQuery - 媒体查询（Web）

安装：

npm install usehooks-ts

---

React Native 专用 Hook 库

4. @react-native-community/hooks ⭐⭐⭐⭐⭐

官方社区维护的 React Native Hooks

• GitHub: react-native-community/hooks
• 特点: 将 React Native API 转换为 Hooks

核心 Hooks：

import {
  useAccessibilityInfo,
  useAppState,
  useBackHandler,
  useClipboard,
  useDimensions,
  useKeyboard,
  useInteractionManager,
  useDeviceOrientation,
  useLayout,
} from '@react-native-community/hooks';

详细说明

useAppState - 监听应用前后台状态

const currentAppState = useAppState();
// 'active' | 'background' | 'inactive'

useBackHandler - Android 返回键处理

useBackHandler(() => {
  // 返回 true 阻止默认行为
  if (shouldBlockBack) {
    return true;
  }
  return false;
});

useClipboard - 剪贴板操作

const [data, setString] = useClipboard();

<Button onPress={() => setString('复制的内容')}>
  复制
</Button>

useDimensions - 屏幕尺寸

const { screen, window } = useDimensions();
// screen: 整个屏幕尺寸
// window: 可用窗口尺寸（不含状态栏等）

useKeyboard - 键盘状态

const keyboard = useKeyboard();
// keyboard.keyboardShown: boolean
// keyboard.keyboardHeight: number

useDeviceOrientation - 设备方向

const orientation = useDeviceOrientation();
// 'portrait' | 'landscape'

useLayout - 组件布局信息

const { onLayout, ...layout } = useLayout();

<View onLayout={onLayout}>
  <Text>宽度: {layout.width}</Text>
  <Text>高度: {layout.height}</Text>
</View>

安装：

npm install @react-native-community/hooks
# 或
yarn add @react-native-community/hooks

完整示例：

import React from 'react';
import { View, Text, Button } from 'react-native';
import {
  useAppState,
  useBackHandler,
  useClipboard,
  useDimensions,
  useKeyboard,
} from '@react-native-community/hooks';

function App() {
  const appState = useAppState();
  const [clipboard, setClipboard] = useClipboard();
  const { window } = useDimensions();
  const keyboard = useKeyboard();
  
  useBackHandler(() => {
    console.log('返回键被按下');
    return true; // 阻止默认行为
  });
  
  return (
    <View>
      <Text>应用状态: {appState}</Text>
      <Text>屏幕宽度: {window.width}</Text>
      <Text>键盘高度: {keyboard.keyboardHeight}</Text>
      <Button onPress={() => setClipboard('Hello')}>
        复制 "Hello"
      </Button>
      <Text>剪贴板: {clipboard}</Text>
    </View>
  );
}

---

特定功能 Hook 库

5. react-hook-form ⭐⭐⭐⭐⭐

最强大的表单管理库

• GitHub: react-hook-form/react-hook-form
• Stars: 40k+
• 特点:
  • 性能极佳（减少重渲染）
  • 体积小
  • 支持 React Native
  • 内置验证

安装：

npm install react-hook-form

React Native 示例：

import { useForm, Controller } from 'react-hook-form';
import { TextInput, Button, Text } from 'react-native';

function Form() {
  const { control, handleSubmit, formState: { errors } } = useForm({
    defaultValues: {
      username: '',
      email: '',
    }
  });
  
  const onSubmit = (data) => {
    console.log(data);
  };
  
  return (
    <View>
      <Controller
        control={control}
        name="username"
        rules={{ required: '用户名必填' }}
        render={({ field: { onChange, value } }) => (
          <TextInput
            value={value}
            onChangeText={onChange}
            placeholder="用户名"
          />
        )}
      />
      {errors.username && <Text>{errors.username.message}</Text>}
      
      <Controller
        control={control}
        name="email"
        rules={{
          required: '邮箱必填',
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: '邮箱格式不正确'
          }
        }}
        render={({ field: { onChange, value } }) => (
          <TextInput
            value={value}
            onChangeText={onChange}
            placeholder="邮箱"
          />
        )}
      />
      {errors.email && <Text>{errors.email.message}</Text>}
      
      <Button title="提交" onPress={handleSubmit(onSubmit)} />
    </View>
  );
}

---

6. @tanstack/react-query (原 react-query) ⭐⭐⭐⭐⭐

强大的数据获取和缓存库

• GitHub: TanStack/query
• Stars: 40k+
• 特点:
  • 自动缓存
  • 后台自动刷新
  • 乐观更新
  • 分页/无限滚动
  • 支持 React Native

安装：

npm install @tanstack/react-query

示例：

import { useQuery, useMutation, QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <UserList />
    </QueryClientProvider>
  );
}

function UserList() {
  const { data, isLoading, error, refetch } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(res => res.json()),
    staleTime: 5000, // 5秒内不重新请求
  });
  
  const mutation = useMutation({
    mutationFn: (newUser) => fetch('/api/users', {
      method: 'POST',
      body: JSON.stringify(newUser),
    }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['users'] });
    },
  });
  
  if (isLoading) return <Text>加载中...</Text>;
  if (error) return <Text>错误: {error.message}</Text>;
  
  return (
    <View>
      <Button title="刷新" onPress={refetch} />
      {data.map(user => <Text key={user.id}>{user.name}</Text>)}
    </View>
  );
}

---

7. zustand ⭐⭐⭐⭐⭐

轻量级状态管理库（比 Redux 简单）

• GitHub: pmndrs/zustand
• Stars: 45k+
• 特点:
  • 极简 API
  • 无需 Provider
  • TypeScript 友好
  • 支持 React Native

安装：

npm install zustand

示例：

import { create } from 'zustand';

// 创建 store
const useStore = create((set) => ({
  count: 0,
  user: null,
  increment: () => set((state) => ({ count: state.count + 1 })),
  setUser: (user) => set({ user }),
}));

// 使用
function Counter() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);
  
  return (
    <View>
      <Text>{count}</Text>
      <Button title="+1" onPress={increment} />
    </View>
  );
}

---

8. use-debounce ⭐⭐⭐⭐

专注于防抖的轻量库

• GitHub: xnimorz/use-debounce
• Stars: 3k+

安装：

npm install use-debounce

示例：

import { useDebounce } from 'use-debounce';

function SearchInput() {
  const [text, setText] = useState('');
  const [debouncedText] = useDebounce(text, 1000);
  
  useEffect(() => {
    if (debouncedText) {
      searchAPI(debouncedText);
    }
  }, [debouncedText]);
  
  return (
    <TextInput
      value={text}
      onChangeText={setText}
      placeholder="搜索..."
    />
  );
}

---

9. react-native-reanimated ⭐⭐⭐⭐⭐

高性能动画库（包含 Hooks）

• GitHub: software-mansion/react-native-reanimated
• Stars: 8k+

核心 Hooks：

• useSharedValue - 共享值
• useAnimatedStyle - 动画样式
• useAnimatedGestureHandler - 手势处理
• useDerivedValue - 派生值

安装：

npm install react-native-reanimated

示例：

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';

function AnimatedBox() {
  const offset = useSharedValue(0);
  
  const animatedStyles = useAnimatedStyle(() => ({
    transform: [{ translateX: offset.value }],
  }));
  
  return (
    <View>
      <Animated.View style={[styles.box, animatedStyles]} />
      <Button
        title="移动"
        onPress={() => {
          offset.value = withSpring(offset.value + 100);
        }}
      />
    </View>
  );
}

---

10. @react-navigation/native Hooks ⭐⭐⭐⭐⭐

React Navigation 内置 Hooks

核心 Hooks：

• useNavigation - 获取 navigation 对象
• useRoute - 获取当前路由信息
• useFocusEffect - 页面聚焦时执行
• useIsFocused - 页面是否聚焦
• useNavigationState - 导航状态

示例：

import { useNavigation, useRoute, useFocusEffect } from '@react-navigation/native';

function Screen() {
  const navigation = useNavigation();
  const route = useRoute();
  const isFocused = useIsFocused();
  
  useFocusEffect(
    useCallback(() => {
      // 页面聚焦时执行
      console.log('页面聚焦');
      
      return () => {
        // 页面失焦时执行
        console.log('页面失焦');
      };
    }, [])
  );
  
  return (
    <View>
      <Text>当前路由: {route.name}</Text>
      <Text>是否聚焦: {isFocused ? '是' : '否'}</Text>
      <Button
        title="返回"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}

---

推荐安装清单

基础必装（适合你的项目）

# 1. 通用 Hooks 工具库（二选一）
yarn add ahooks          # 推荐：阿里出品，中文文档
# 或
yarn add react-use       # 备选：功能最全

# 2. React Native 专用
yarn add @react-native-community/hooks

# 3. 表单管理
yarn add react-hook-form

# 4. 数据请求和缓存
yarn add @tanstack/react-query

# 5. 状态管理（如果不用 Redux）
yarn add zustand

按需安装

# 防抖/节流（如果 ahooks 不够用）
yarn add use-debounce

# 动画
yarn add react-native-reanimated

---

实战示例：组合使用

示例 1：带搜索的列表页

import React, { useState } from 'react';
import { View, TextInput, FlatList, Text } from 'react-native';
import { useDebounce } from 'ahooks';
import { useQuery } from '@tanstack/react-query';
import { useFocusEffect } from '@react-navigation/native';

function ProductList() {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearchTerm = useDebounce(searchTerm, { wait: 500 });
  
  const { data, isLoading, refetch } = useQuery({
    queryKey: ['products', debouncedSearchTerm],
    queryFn: () => fetchProducts(debouncedSearchTerm),
  });
  
  // 页面聚焦时刷新
  useFocusEffect(
    useCallback(() => {
      refetch();
    }, [refetch])
  );
  
  return (
    <View>
      <TextInput
        value={searchTerm}
        onChangeText={setSearchTerm}
        placeholder="搜索产品..."
      />
      {isLoading ? (
        <Text>加载中...</Text>
      ) : (
        <FlatList
          data={data}
          renderItem={({ item }) => <Text>{item.name}</Text>}
          keyExtractor={item => item.id}
        />
      )}
    </View>
  );
}

示例 2：表单 + 键盘处理

import React from 'react';
import { View, TextInput, Button, ScrollView, KeyboardAvoidingView, Platform } from 'react-native';
import { useForm, Controller } from 'react-hook-form';
import { useKeyboard } from '@react-native-community/hooks';

function RegisterForm() {
  const { control, handleSubmit, formState: { errors } } = useForm();
  const keyboard = useKeyboard();
  
  const onSubmit = (data) => {
    console.log(data);
  };
  
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={{ flex: 1 }}>
      <ScrollView>
        <Controller
          control={control}
          name="email"
          rules={{
            required: '邮箱必填',
            pattern: {
              value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
              message: '邮箱格式不正确'
            }
          }}
          render={({ field: { onChange, value } }) => (
            <TextInput
              value={value}
              onChangeText={onChange}
              placeholder="邮箱"
            />
          )}
        />
        {errors.email && <Text>{errors.email.message}</Text>}
        
        <Button title="提交" onPress={handleSubmit(onSubmit)} />
        
        {keyboard.keyboardShown && (
          <View style={{ height: keyboard.keyboardHeight }} />
        )}
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

示例 3：全局状态 + 持久化

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

// 创建持久化 store
const useUserStore = create(
  persist(
    (set) => ({
      user: null,
      token: null,
      setUser: (user) => set({ user }),
      setToken: (token) => set({ token }),
      logout: () => set({ user: null, token: null }),
    }),
    {
      name: 'user-storage',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

// 使用
function Profile() {
  const user = useUserStore((state) => state.user);
  const logout = useUserStore((state) => state.logout);
  
  return (
    <View>
      <Text>用户: {user?.name}</Text>
      <Button title="退出" onPress={logout} />
    </View>
  );
}

---

学习资源

官方文档

• React Hooks 官方文档
• ahooks 中文文档
• react-use GitHub
• React Native Community Hooks

推荐网站

• usehooks.com - Hook 示例集合
• useHooks.io - 另一个 Hook 示例网站

GitHub 精选

• awesome-react-hooks - Hook 资源大全

---

总结

优先级推荐

必装（⭐⭐⭐⭐⭐）：

1. ahooks - 通用工具库
2. @react-native-community/hooks - RN 专用
3. react-hook-form - 表单管理
4. @tanstack/react-query - 数据请求

推荐（⭐⭐⭐⭐）： 5. zustand - 状态管理 6. react-native-reanimated - 动画

按需（⭐⭐⭐）： 7. react-use - 如果 ahooks 不够用 8. use-debounce - 专注防抖

选择建议

• 如果你的项目已经用了 Redux：继续用 Redux Hooks
• 如果想要轻量级状态管理：用 zustand
• 如果需要复杂的数据请求：用 @tanstack/react-query
• 如果需要大量工具 Hooks：用 ahooks（中文文档）或 react-use（功能最全）

---

作者建议： 先安装 ahooks 和 @react-native-community/hooks，这两个库能覆盖 90% 的日常需求，其他的按需添加。

更新日期： 2026-01-10