React自定义Hook

自定义Hook

使用规则

开头必须为use！！！

在使用组件时开投字母一定要大写

使用自定义Hook时，前面一定要加use

场景

1. 只能在组件中或者其他自定义Hook函数中调用
2. 只能在组件的顶层调用，不能嵌套在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>
	);
}