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

相关推荐
江城开朗的豌豆2 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆2 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆3 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆4 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er10 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子11 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆16 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山24 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45333 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^34 分钟前
条件渲染 v-show与v-if
前端