自定义 Hook 概述
- 通过自定义 Hook，可以对其它 Hook 的代码进行复用
官方文档地址：https://react.docschina.org/docs/hooks-custom.html
假如现在博主有这么一个需求，就是定义两个组件然后在 App 根组件当中进行使用，使用的时候分别为定义的两个组件添加监听, 移除监听：
import React, {useEffect, useState} from 'react'; function Home() { useEffect(() => { console.log('Home - 组件被挂载或者更新完成 -- 添加监听'); return () => { console.log('Home - 组件即将被卸载 -- 移除监听'); } }); return ( <div>Home</div> ) } function About() { useEffect(() => { console.log('About - 组件被挂载或者更新完成 -- 添加监听'); return () => { console.log('About - 组件即将被卸载 -- 移除监听'); } }); return ( <div>About</div> ) } export default function App() { const [show, setShow] = useState(true); return ( <div> {show && <Home/>} {show && <About/>} <button onClick={() => { setShow(!show) }}>切换 </button> </div> ) }
测试方式就是运行项目，之后，点击切换按钮即可测试，经过如上的代码可以发现出现了冗余的代码，那么就是存在问题的，那么我们是不是就可以将这些冗余的代码进行抽取一下，抽取之后的代码如下：
import React, {useEffect, useState} from 'react'; function addListener(name) { useEffect(() => { console.log(name, ' - 组件被挂载或者更新完成 -- 添加监听'); return () => { console.log(name, ' - 组件即将被卸载 -- 移除监听'); } }); } function Home() { addListener('Home'); return ( <div>Home</div> ) } function About() { addListener('About'); return ( <div>About</div> ) } export default function App() { const [show, setShow] = useState(true); return ( <div> {show && <Home/>} {show && <About/>} <button onClick={() => { setShow(!show) }}>切换 </button> </div> ) }
抽取之后发现运行报错了，这里就需要回顾一下之前的知识点了，也就是 Hook 的注意点，在 React 中只有两个地方可以使用 Hook：
- 函数式组件中
- 自定义 Hook 中
自定义一个 Hooks
只要在函数名称前面加上
use, 那么就表示这个函数是一个自定义 Hook, 就表示可以在这个函数中使用其它的 Hook
好了了解了这些知识点之后，我们接下来就可以解决我们如上示例的报错了，更改代码如下：
import React, {useEffect, useState} from 'react'; function useAddListener(name) { useEffect(() => { console.log(name, ' - 组件被挂载或者更新完成 -- 添加监听'); return () => { console.log(name, ' - 组件即将被卸载 -- 移除监听'); } }); } function Home() { useAddListener('Home'); return ( <div>Home</div> ) } function About() { useAddListener('About'); return ( <div>About</div> ) } export default function App() { const [show, setShow] = useState(true); return ( <div> {show && <Home/>} {show && <About/>} <button onClick={() => { setShow(!show) }}>切换 </button> </div> ) }
如上就是关于自定义 Hook 的内容，到这里我相信如果你跟着的是博主的文档一直看到这里，应该目前是还对自定义 Hook 的印象是不太深的，因为如上的示例我们只是简简单单的打印了文字，不够贴近我们的实际开发，所以博主这里在进行编写一个贴近实际开发的真实案例来巩固一下：
import React, {createContext, useContext} from 'react'; const UserContext = createContext({}); const InfoContext = createContext({}); function Home() { const user = useContext(UserContext); const info = useContext(InfoContext); return ( <div> <p>{user.name}</p> <p>{user.age}</p> <p>{info.gender}</p> <hr/> </div> ) } function About() { const user = useContext(UserContext); const info = useContext(InfoContext); return ( <div> <p>{user.name}</p> <p>{user.age}</p> <p>{info.gender}</p> <hr/> </div> ) } export default function App() { return ( <UserContext.Provider value={{name: 'yangbuyiya', age: 18}} > <InfoContext.Provider value={{gender: 'man'}} > <Home/> <About/> </InfoContext.Provider> </UserContext.Provider> ) }
如上的示例大致就是，通过生产者生产了两个共享变量，然后在其它两个组件当中进行使用都是从 context 当中进行获取数据，这部分的数据其实都是差不多一样的，在企业开发中, 但凡需要抽取代码, 但凡被抽取的代码中用到了其它的 Hook, 那么就必须把这些代码抽取到自定义 Hook 中。
import React, {createContext, useContext} from 'react'; const UserContext = createContext({}); const InfoContext = createContext({}); function useGetContext() { const user = useContext(UserContext); const info = useContext(InfoContext); return [user, info] } function Home() { const [user, info] = useGetContext(); return ( <div> <p>{user.name}</p> <p>{user.age}</p> <p>{info.gender}</p> <hr/> </div> ) } function About() { const [user, info] = useGetContext(); return ( <div> <p>{user.name}</p> <p>{user.age}</p> <p>{info.gender}</p> <hr/> </div> ) } export default function App() { return ( <UserContext.Provider value={{name: 'yangbuyiya', age: 18}} > <InfoContext.Provider value={{gender: 'man'}} > <Home/> <About/> </InfoContext.Provider> </UserContext.Provider> ) }
到此为止，自定义 Hook 的实际使用，与巩固已经完结了，看到这里，后面更多的内容就需要自行探究了，React 这一系列的内容就大致写到这。
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
