对于函数式组件,除了使用内置的hooks,我们还可以定义自定义hooks。举例来说,在一个命名为app hoc
的组件内,使用useState
创建状态以存储表情符号,并使用useEffect
添加效应。这些代码可以剪切出来放入名为useEmogee.ts
的新文件内,以定义并导出自定义hook。这个自定义hook函数需要以use
为前缀以符合React的命名规范。在定义中导入useState
和useEffect
,并使自定义hook返回状态及其更新函数,分别命名为emogee
和setEmogee
。
在app hoc
组件中可以使用刚才定义的自定义hook。如果遇到类型错误,需要在自定义hook中设置返回值的类型。需要从React中导入useState
和useEffect
以及Dispatch
和SetStateAction
接口作为类型使用。这样,组件应该不会再显示类型错误。在浏览器中测试,表情符号的显示应该基于useEmogee
自定义hook的状态,点击表情符号会更新状态,并执行自定义hook内部的效应。最后,应确保所有的类型导入都正确无误。