【React】自定义hook函数
1. 概念
本质:函数
2. 例子
- 需求:实现点击按钮的展示与隐藏子组件
2.1 不封装直接实现
import { useState } from 'react'
function Son() {
return <div>子组件</div>
}
function App() {
const [isShow, setIsShow] = useState(true)
function toggle() {
setIsShow(!isShow)
}
return (
<div className="App">
{isShow && <Son />}
<button onClick={toggle}>点击我,隐藏子组件</button>
</div>
);
}
export default App;
2.2 封装自定义hook实现
import { useState } from 'react'
function Son() {
return <div>子组件</div>
}
function useToggle() {
const [isShow, setIsShow] = useState(true)
function toggle() {
setIsShow(!isShow)
}
return {
isShow,
toggle
}
}
function App() {
const { isShow, toggle } = useToggle()
return (
<div className="App">
{isShow && <Son />}
<button onClick={toggle}>点击我,隐藏子组件</button>
</div>
);
}
export default App;
3 总结(封装自定义hook通用思路)
- 声明一个use开头的函数
- 在函数体内封装可复用的逻辑
- 把组件中用到的状态或者回调return出去(以对象或者数组的形式)
- 在哪个组件中要用到这个逻辑,就执行这个函数,解构出状态和回调进行使用
4 参考
黑马程序员react教程
原文地址:https://blog.csdn.net/weixin_44109827/article/details/142585035
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!