react 自定义Hook的实现

本文主要是介绍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;

这篇关于react 自定义Hook的实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---