在快节奏的 web 开发世界中，保持领先意味着不断发展和采用新的工具和实践。 react 是最流行的 javascript 库之一，它引入了钩子来简化功能组件中的状态管理和副作用。然而，尽管 hooks 很强大，但我们看到了进一步发展它们的机会。
scriptkavi/hooks 是可重用挂钩的集合，您可以将其复制并粘贴到您的应用程序中。
首先使用 create-next-app 创建一个新的 next.js 项目：
npx create-next-app@latest scriptkavi-app --typescript --eslint
现在通过运行进入 scriptkavi-app
cd scriptkavi-app
通过运行安装包依赖项
npm install
运行 scriptkavi-hooks init 命令来设置您的项目：
npx scriptkavi-hooks@latest init
您将被问到几个问题来配置 hooks.json：
would you like to use typescript (recommended)? no/yes which codestyle would you like to use? › react hooks configure the import alias for hooks: › @/hooks configure the import alias for utils: › @/lib/utils
您现在可以开始向您的项目添加挂钩。
npx scriptkavi-hooks@latest add debounce
上面的命令会将 debounce hook 添加到您的项目中。然后你可以像这样导入它：
import { usedebounce } from "@/hooks/debounce"
export default function app() {
const [searchterm, setsearchterm] = react.usestate("js")
const debouncedsearchterm = usedebounce(searchterm, 300)
const handlechange = (e) => {
setsearchterm(e.target.value)
}
react.useeffect(() => {
const callapi = async () => {
if (debouncedsearchterm) {
// call api
}
}
callapi()
}, [debouncedsearchterm])
return (
) }
scriptkavi/hooks 提供了大量可以添加的钩子列表，您可以在此处找到该列表。
同样，您可以添加其他挂钩，例如，
npx scriptkavi-hooks@latest add battery
npx scriptkavi-hooks@latest add click-away
还有更多...
scriptkavi/hooks 支持 nextjs 和 vite
我们的库是开源的，因此您可以通过添加更多挂钩来开始为该项目做出贡献。你可以在这里找到 github 项目。
我们的使命是帮助开发人员轻松高效地构建令人惊叹的应用程序。通过提供一组强大的钩子，我们的目标是改变您使用 react 进行开发的方式。探索我们的文档，为项目做出贡献，并成为 react 开发革命的一部分。