Reacthooks发布之前，React软件的功能组件比较有限，往往没有办法处理状态、上下文API和一些生命周期方法。但从React16.8开始，用户可以更灵活地使用一些已有的代码。本文将带你学习如何使用不同的Reacthooks来解决你每天遇到的问题。useFilerHookChristopherPatty组合了一组很酷的钩子函数，称为“骗子”。我个人喜欢useFilerHook，因为它在Web浏览器中创建了一个虚拟文件系统，基本上该功能利用浏览器的本地存储来管理文档和文档内容。首先，在应用程序中安装“crooks”安装包：npminstallcrooks--save现在，在crooks中导入useFilerHook：import{useFiler}from'crooks'至此，你就可以初始化hook和管理虚拟文件了系统。下面是一个简单代码片段的示例：constApp=()=>{const[files,{add,remove,update,clear}]=useFiler("localStorageItem")return(
MyProject
)}如以上代码所示，您可以使用add()、remove()、update()和clear()方法。接下来让我们学习如何使用它们。(1)添加文件add()函数接受一个必需的参数。我们需要传递JavaScriptObjectNotation（简称JSON）可序列化数据：update("abc1234","Newcontentofffile.")注意这个函数会自动为每个新文件生成一个ID，但是用户仍然可以传递一个整数或者一个字符串作为设置自定义ID的第二个参数。(2)更新文件update()方法接受两个参数。第一个是文件的ID，而另一个参数用于传递新数据：update("abc1234","Newcontenttofile.")(3)删除文件使用remove()方法传递文件ID删除它：remove("abc1234")(4)清除所有文件调用clear()方法删除所有文件：clear()2。useFetchHooks来源：unsplashStevenPersia（MERNStack的开发者）写了很多Reacthooks并把它们命名为“Captainhook”。它们在处理日常任务时非常有用。接下来的几个钩子示例取自他的收藏。useFetch可以从应用程序编程接口(API)获取数据。请求完成后，它将返回带有错误的响应。在项目中引入useFetch：importuseFetchfrom"hooks/useFetch";发出请求：const{response,errors}=useFetch("https://api.github.com/users/torvalds/repos");3.useHoverHook也属于useHoverHook“船长钩”合集。通常，此函数跟踪屏幕上的鼠标光标以检测它是否在特定元素上。如果是，它将触发悬停事件。引入useHoverHook:importuseHoverfrom"hooks/useHover";初始化它：const[hoverMe,isHovered]=useHover();在这里，hoverMe代表一个特定的HTML元素，isHovered包含可以在条件语句中检查的值布尔值。例如，可以这样使用：