当前位置: 首页 > article >正文

react18自定义hook实现

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

例子:使用自定义 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;

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


http://www.kler.cn/a/561887.html

相关文章:

  • NLP工程师逐步切入机器人和具身智能方向
  • Go语言--语法基础2--下载安装
  • PHP入门基础学习四(PHP基本语法)
  • Linux 之 Centos 安装Consul
  • redis小记
  • 从单片机的启动说起一个单片机到点灯发生了什么下——使用GPIO点一个灯
  • 低延迟,高互动:EasyRTC的全场景实时通信解决方案
  • Imagination通过最新的D系列GPU IP将效率提升至新高度
  • 分享些常用的工具类
  • 面试基础----ReentrantLock vs Synchronized
  • 大语言模型学习路径与开源模型推荐
  • 基于SSM的《计算机网络》题库管理系统(源码+lw+部署文档+讲解),源码可白嫖!
  • mysql逻辑备份 mysqldump和mydumper实践
  • java项目之图书管理系统设计与实现(源码+文档)
  • 为AI聊天工具添加一个知识系统 之122 详细设计之63 实体范畴论和神经元元模型:命名法函子
  • 数据结构系列三:List+顺序表+ArrayList
  • Maven 基础环境搭建与配置(一)
  • JavaEE进阶(1) Spring Web MVC 注解和参数传递
  • Java 大视界 —— Java 大数据在智慧能源微电网能量管理中的关键技术(100)
  • AI赋能软件测试:效率与质量的革命性提升