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 其他函数中使用

相关推荐
光影少年3 小时前
angular生态及学习路线
前端·学习·angular.js
記億揺晃着的那天5 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
无尽夏_5 小时前
HTML5(前端基础)
前端·html·html5
Jagger_5 小时前
敏捷开发流程-精简版
前端·后端
FIN66686 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing6 小时前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女1276 小时前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿6 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN66686 小时前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能
阳光阴郁大boy6 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript