当前位置：首页 > news >正文

react18自定义hook实现

news 来源：原创 2025/6/10 2:50:17

概念：自定义 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;

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