课程视频网站建设的必要性色母图片

概念：自定义 hook 是一种将组件逻辑提取到可复用函数中的方式，它允许你在多个组件中共享相同的状态和行为。自定义 hook 的本质上是一个普通的 JavaScript 函数，它可以使用 React 内部的 hook（如 useState、useEffect、useContext 等）来管理组件逻辑。

例子：使用自定义 hook 来处理div的显示隐藏：

• 创建一个hook.js 声明一个use打头的函数,在函数体内封装可复用的逻辑
• 封装好后，把组件中用到的状态或者回调函数已对象的形式return出去

import React, { useState } from "react";const useIsShow = () => {const [show, setShow] = useState(true);const isShow = () => {setShow(!show);};return {show,isShow,};
};export default useIsShow;

• 在哪个组件要用到这个逻辑，引入封装好的hook，解构出来状态或者回调函数进行使用

import React from "react";
import useIsShow from './hooks'function App() {const {show,isShow} = useIsShow()return (<div className="App">{show && <div>div</div>}<button onClick={()=>{isShow()}}>切换</button></div>);
}export default App;

注：本人前端小白 ，如有不对的地方还请多多指教