ahooks 常用的方法

常用hooks

ahooks 是一个由阿里巴巴团队开发的 React Hooks 库，提供了许多实用的 Hooks 来简化 React 开发。以下是 ahooks 中一些常用的用法和 Hooks：

1. useRequest - 管理异步请求

useRequest 是 ahooks 中最常用的 Hooks 之一，用于处理异步请求及其相关状态（如 loading、error 等）。它支持自动请求、手动请求、轮询、防抖、节流、错误重试等功能。

import { useRequest } from 'ahooks';

function App() {
  const { data, loading, error, run } = useRequest(() => fetch('/api/data'));
  return (
    <div>
      {loading && <div>Loading...</div>}
      {error && <div>Error: {error.message}</div>}
      {data && <div>{JSON.stringify(data)}</div>}
    </div>
  );
}

2. useToggle - 切换布尔值

useToggle 用于在两个值之间切换，常用于控制开关状态。

import { useToggle } from 'ahooks';

function App() {
  const [state, { toggle }] = useToggle('Hello', 'World');
  return (
    <div>
      <p>{state}</p>
      <button onClick={toggle}>Toggle</button>
    </div>
  );
}

3. useDebounce 和 useThrottle - 防抖和节流

useDebounce 和 useThrottle 用于控制频繁触发的操作，例如输入框搜索或滚动事件。

import { useDebounce, useState } from 'ahooks';

function App() {
  const [value, setValue] = useState('');
  const debouncedValue = useDebounce(value, { wait: 500 });
  return (
    <div>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <p>Debounced Value: {debouncedValue}</p>
    </div>
  );
}

4. useLocalStorageState - 持久化状态

useLocalStorageState 将状态存储在 localStorage 中，即使页面刷新也能保留状态。

import { useLocalStorageState } from 'ahooks';

function App() {
  const [message, setMessage] = useLocalStorageState('message', 'Hello~');
  return (
    <div>
      <input value={message} onChange={(e) => setMessage(e.target.value)} />
      <p>{message}</p>
    </div>
  );
}

5. useUnmountedRef - 检测组件卸载

useUnmountedRef 用于检测组件是否已卸载，避免在卸载后执行 setState 导致内存泄漏。

import { useUnmountedRef, useState } from 'ahooks';

function App() {
  const unmountedRef = useUnmountedRef();
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then((data) => {
      if (!unmountedRef.current) {
        setData(data);
      }
    });
  }, []);

  return <div>{data}</div>;
}

6. useWhyDidYouUpdate - 调试组件渲染

useWhyDidYouUpdate 用于调试组件重新渲染的原因，帮助优化性能。

import { useWhyDidYouUpdate } from 'ahooks';

function App(props) {
  useWhyDidYouUpdate('App', { ...props });
  return <div>Hello</div>;
}

7. useVirtualList - 虚拟列表

useVirtualList 用于优化大列表的渲染性能，只渲染可见区域的内容。

import { useVirtualList } from 'ahooks';

function App() {
  const { list, containerProps, wrapperProps } = useVirtualList(Array.from({ length: 10000 }), {
    itemHeight: 50,
  });
  return (
    <div {...containerProps}>
      <div {...wrapperProps}>
        {list.map((item) => (
          <div key={item.index}>{item.data}</div>
        ))}
      </div>
    </div>
  );
}

8. useEventListener - 事件监听

useEventListener 用于简化事件绑定逻辑。

import { useEventListener } from 'ahooks';

function App() {
  useEventListener('click', () => {
    console.log('Clicked!');
  });
  return <div>Click Me</div>;
}

总结

ahooks 提供了丰富的 Hooks 来简化 React 开发，涵盖了状态管理、异步请求、性能优化、事件处理等多个场景。通过使用这些 Hooks，可以显著提升开发效率和代码质量。如果需要更详细的文档和示例，可以参考 ahooks 官方文档。

生命周期监听hooks

ahooks 提供了 useMount、useUnmount 和 useUnmountedRef 这三个 Hooks，用于处理组件的生命周期相关逻辑。以下是它们的详细说明和用法：

1. useMount

useMount 用于在组件挂载后执行某些操作，类似于类组件中的 componentDidMount。

import { useMount } from 'ahooks';

function MyComponent() {
  useMount(() => {
    console.log('Component mounted');
    // 执行初始化操作，如数据请求、事件监听等
  });

  return <div>My Component</div>;
}

• 功能：在组件挂载后执行一次回调函数。
• 实现原理：基于 useEffect，依赖数组为空，确保只在挂载时执行。

---

2. useUnmount

useUnmount 用于在组件卸载前执行某些操作，类似于类组件中的 componentWillUnmount。

import { useUnmount } from 'ahooks';

function MyComponent() {
  useUnmount(() => {
    console.log('Component will unmount');
    // 执行清理操作，如移除事件监听、取消请求等
  });

  return <div>My Component</div>;
}

• 功能：在组件卸载前执行一次回调函数。
• 实现原理：基于 useEffect 的清理函数（return 的函数）。

---

3. useUnmountedRef

useUnmountedRef 用于检测组件是否已卸载，避免在组件卸载后执行某些操作（如 setState）。

import { useUnmountedRef } from 'ahooks';

function MyComponent() {
  const unmountedRef = useUnmountedRef();

  useEffect(() => {
    setTimeout(() => {
      if (!unmountedRef.current) {
        console.log('Component is still mounted');
      }
    }, 3000);
  }, []);

  return <div>My Component</div>;
}

• 功能：返回一个 ref，通过 ref.current 判断组件是否已卸载。
• 实现原理：基于 useEffect 的清理函数，在卸载时将 ref.current 设置为 true。

---

总结

• useMount：用于组件挂载后的初始化操作。
• useUnmount：用于组件卸载前的清理操作。
• useUnmountedRef：用于检测组件是否已卸载，避免内存泄漏。

这些 Hooks 都是基于 useEffect 的封装，简化了生命周期逻辑的处理，同时避免了直接使用 useEffect 时可能出现的闭包问题。