React(7)

hooks

封装自定义hook通用思路

//1.声明一个以use打头的函数

// 2.在函数体内封装可复用的逻辑(只要是可复用的逻辑)

// 3.把组件中用到的状态或者回调return出去(以对象或者数组)

// 4.在哪个组件中要用到这个逻辑,就执行这个函数,解构出来状态和回调进行使用

javascript 复制代码
import {  useState } from "react";
function Son() {
  return <div>son组件</div>;
}
// 自定义hooks 
// 注意函数的写法为匿名函数还是声明函数
function useTaggle() {
  const [Show, setShow] = useState(true);
  function taggle (){setShow(!Show)} 
  return {
    Show,
    taggle,
  };
}
function App() {
  // 在组件中使用需要进行结构
  const { Show, taggle } = useTaggle();
  // const [Show, setShow] = useState(true);
  // const taggle=setShow(!Show)
  return (
    <div className="App">
      {Show && <Son></Son>}
      <button onClick={taggle}>卸载组件</button>
    </div>
  );
}

export default App;

使用规则

只能在组件中或者其他自定义HOOK函数中使用

只能在组件的顶层调用 不能在if for 其他函数中使用

相关推荐
10年前端老司机2 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程7 小时前
2025前端面试题
前端·面试
前端小趴菜058 小时前
React - createPortal
前端·vue.js·react.js
晓13138 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo8 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴9 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78910 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼10 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原10 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf11 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js