构建你自己的 React Hooks。

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

钩子

Hooks 是 React 16.8 中的新增功能。它允许你在不编写类的情况下使用 state 和其他 React 特性。

React 有各种内置钩子，

• 使用状态
• 使用效果
• useContext
• 使用 Reducer
• 使用回调
• 使用备忘录
• 使用引用
• 使用命令句柄
• 使用布局效果
• 使用调试值

定制挂钩

当我们需要在 React 组件之间共享状态逻辑时，可以使用自定义 Hook。自定义 Hook 就是一个 JavaScript 函数，其名称以 `.hook` 开头use，并且可以调用其他 React Hook。

我们来创建一个useClipboard钩子函数，用于将指定的文本复制到剪贴板。我们将使用剪贴板 API来实现这一点。

遗憾的是，Firefox 并不完全支持剪贴板 API，所以请确保使用 Chrome 或 Safari 浏览器。

您可以在这里查看最终结果：https://7lyrf.csb.app/
点击copy按钮后，代码将被复制到剪贴板，您可以将其粘贴到任何位置。请注意，如果您尝试直接点击链接，copy将会codesandbox收到权限被拒绝的提示，因此请在新标签页中打开输出链接并进行操作。

我们先来看这个Clipboard.js文件。剪贴板 API 可以异步地从系统剪贴板读取和写入数据。因此，我将isCopied状态设置为：true当文本复制成功时，状态变为falsetrue；当出现错误时，状态变为 false。

setClipboard这里定义了复制到剪贴板的逻辑。首先，我会检查是否有clipboard-write权限。如果权限已授予或系统提示用户，我们就可以将navigator.clipboard.writeText文本设置到系统剪贴板。返回值[isCopied, setClipboard]类似于 useState 返回两个变量的方式。当然，你也可以返回任意数量的值。

接下来，我使用 useEffectisCopied在指定的时间间隔后重置状态。最后导出我们的useClipboard钩子函数。

现在我们来看看如何使用自定义钩子。在App.js文件中，我导入了useClipboard钩子并指定了调用时间间隔。正如我们定义的，它会返回isCopied一个布尔值和setClipboard一个函数，我们可以使用该函数将文本写入剪贴板。

我有一个包含文本code的标签和一个按钮，点击该按钮会将文本复制到系统剪贴板。文本复制完成后，我会根据状态更改按钮标签，并在指定时间间隔后将其重置为默认值。 很好。现在我们实现了自己的自定义钩子，可以在组件之间共享。console.log('Hello world')copycodecopiedisCopiedcopy

好了，各位，感谢阅读这篇博文。希望对您有所帮助。欢迎在评论区留言提问或提出建议。

参考

• https://reactjs.org/docs/hooks-custom.html
• https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
• https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard
• https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API