logo

该视频仅会员有权观看

立即开通课程「React.js 前端应用开发实践」权限。

¥
199
/ 年

对于函数式组件,除了使用内置的hooks,我们还可以定义自定义hooks。举例来说,在一个命名为app hoc的组件内,使用useState创建状态以存储表情符号,并使用useEffect添加效应。这些代码可以剪切出来放入名为useEmogee.ts的新文件内,以定义并导出自定义hook。这个自定义hook函数需要以use为前缀以符合React的命名规范。在定义中导入useStateuseEffect,并使自定义hook返回状态及其更新函数,分别命名为emogeesetEmogee

app hoc组件中可以使用刚才定义的自定义hook。如果遇到类型错误,需要在自定义hook中设置返回值的类型。需要从React中导入useStateuseEffect以及DispatchSetStateAction接口作为类型使用。这样,组件应该不会再显示类型错误。在浏览器中测试,表情符号的显示应该基于useEmogee自定义hook的状态,点击表情符号会更新状态,并执行自定义hook内部的效应。最后,应确保所有的类型导入都正确无误。