在这篇文章中，我们将深入探讨一个简单而有趣的 React Hook：useConfetti。这个 Hook 的主要功能是在特定状态下触发庆祝效果，使用了 canvas-confetti 库来实现五彩纸屑的动画效果。让我们逐步分析这个文件的内容，并了解它是如何工作的。

文件结构

我们来看一下 useConfetti.ts 文件的结构：

import { CONFETTI_DEFAULTS } from '@/constants'
import confetti from 'canvas-confetti'
import { useEffect } from 'react'

export function useConfetti(state: boolean) {
  useEffect(() => {
    let leftConfettiTimer: number | undefined
    let rightConfettiTimer: number | undefined
    if (state) {
      leftConfettiTimer = window.setTimeout(() => {
        confetti({
          ...CONFETTI_DEFAULTS,
          particleCount: 50,
          angle: 60,
          spread: 100,
          origin: { x: 0 },
        })
      }, 250)
      rightConfettiTimer = window.setTimeout(() => {
        confetti({
          ...CONFETTI_DEFAULTS,
          particleCount: 50,
          angle: 120,
          spread: 100,
          origin: { x: 1 },
        })
      }, 400)
    }
    return () => {
      window.clearTimeout(leftConfettiTimer)
      window.clearTimeout(rightConfettiTimer)
    }
  }, [state])
}

代码解析

1. 导入依赖

首先，我们导入了几个必要的模块：

• CONFETTI_DEFAULTS：这是一个常量，包含了五彩纸屑的默认配置。
• canvas-confetti：这是一个用于生成五彩纸屑效果的库。
• useEffect：这是 React 的一个 Hook，用于处理副作用。

2. 定义 useConfetti Hook

useConfetti 是一个接受布尔值 state 的函数。当 state 为 true 时，它会触发五彩纸屑效果。

3. 使用 useEffect

在 useEffect 中，我们设置了两个定时器：

• leftConfettiTimer：在 250 毫秒后，从左侧发射五彩纸屑。
• rightConfettiTimer：在 400 毫秒后，从右侧发射五彩纸屑。

这两个定时器使用 window.setTimeout 来延迟执行 confetti 函数，生成五彩纸屑效果。

4. 清理定时器

在 useEffect 的返回函数中，我们使用 window.clearTimeout 来清理定时器，确保在组件卸载时不会继续执行未完成的定时器。

5. 依赖数组

useEffect 的依赖数组包含 state，这意味着每当 state 发生变化时，useEffect 都会重新执行。

如何使用 useConfetti

要在你的组件中使用 useConfetti，你只需传入一个布尔值来控制庆祝效果的触发。例如：

import React, { useState } from 'react';
import { useConfetti } from './hooks/useConfetti';

const CelebrationComponent = () => {
  const [celebrate, setCelebrate] = useState(false);
  useConfetti(celebrate);

  return (
    <div>
      <button onClick={() => setCelebrate(true)}>庆祝!</button>
    </div>
  );
};

export default CelebrationComponent;

在这个示例中，当用户点击按钮时，celebrate 状态将被设置为 true，从而触发五彩纸屑效果。

总结

useConfetti 是一个简单而有效的 React Hook，可以为你的应用添加一些有趣的视觉效果。通过使用 canvas-confetti 库和 React 的 useEffect Hook，我们能够轻松地实现这一功能。希望这篇文章能帮助你更好地理解 React Hook 的使用，并激发你在项目中实现更多有趣的效果！