react 自定义Hook的实现

// 问题:当前组件耦合在一起的不方便复用
// 解决思路:自定义hook

// 1。封装use打头的函数
// 2.在函数体内封装我们可复用的逻辑(只要是可复用的都行)
// 3.要把组件中用到的状态(变量)或者回调return出去
// 4.在哪个组件中用到这个逻辑,引用这个函数,然后解构出来返回值
import { useEffect, useState } from "react";

// 可复用的逻辑代码
function useTottle(){
  // 可复用的代码
  const [value,setValue]=useState(true);
  const toger=()=> setValue(!value);
  // 那些状态和回调函数需要在其他组件中使用 return  出去
  return { value,toger}
}
function App() {
  const  { value,toger}= useTottle();
  return (
    <div className="App">
        {value&& <div>显示了</div>}
        <button onClick={toger}>显示和隐藏</button>
    </div>
  );

}
export default App;

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
react自定义hook实现非常简单。你只需要将常规的函数和逻辑包装在一个名称以 use 开头的函数里面,就可以将其作为自定义 hook 使用。例如,下面是一个 useEffect 自定义 hook 的示例代码: ``` import React, { useState, useEffect } from 'react'; function useCustomHook(myValue) { const [count, setCount] = useState(0); useEffect(() => { console.log(`my value is: ${myValue}`); console.log(`count is: ${count}`); }, [count, myValue]); function handlePlus() { setCount(count + 1); } function handleMinus() { setCount(count - 1); } return { count, handlePlus, handleMinus, }; } ``` 在这里,我们创建了一个名为 useCustomHook 的函数。该函数接受一个名为 myValue 的参数。我们在 useCustomHook 函数中使用 useState 和 useEffect。我们返回一个对象,该对象包含 count 值以及处理加法和减法的函数。 接下来,您可以将 useCustomHook 导入包含您的 react 程序的文件,并使用对它调用以前定义的函数来调用它。例如: ``` import React from 'react'; import { useCustomHook } from './useCustomHook'; function App() { const { count, handlePlus, handleMinus } = useCustomHook('my value'); return ( <div> <p>Count is: {count}</p> <button onClick={handlePlus}>Plus</button> <button onClick={handleMinus}>Minus</button> </div> ); } export default App; ``` 在这里,我们导入 useCustomHook,然后从调用它的返回对象中提取 count、处理加法和减法的函数。 这就是一个简单的自定义 hook 的范例。你可以创建任意数量的自定义 hook,从而封装 React 组件中的常见逻辑和代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞飞翼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值