自定义Hook
使用规则
开头必须为use!!!
在使用组件时开投字母一定要大写
使用自定义Hook时,前面一定要加
use
场景
- 只能在组件中或者其他自定义Hook函数中调用
- 只能在组件的顶层调用,不能嵌套在if、for、其他函数中
使用方式
创建useToggle
import { useState } from 'react';
export function useToggle() {
const [value, setValue] = useState(true);
/**
* 取反
* @returns 取反后结果
*/
const toggle = () => setValue(!value);
return { value, toggle };
}
示例
import { useToggle } from '@/utils/useToggle';
import { Container } from 'react-bootstrap';
import Button from 'react-bootstrap/Button';
export default function Demo1() {
const { value, toggle } = useToggle();
return (
<Container>
<Button variant='success' onClick={toggle}>
开关
</Button>
{value && <h1>开启</h1>}
{!value && <h1>关闭</h1>}
</Container>
);
}