面试题：React中自定义Hook如何实现状态管理

Question

请描述在React中自定义一个用于状态管理的Hook的基本步骤，例如实现一个可以切换布尔值状态的自定义Hook，并说明如何在组件中使用它。

Answer 1

1. 自定义Hook基本步骤：
   • 首先创建一个以use开头的函数，这是自定义Hook的命名规范。
   • 在函数内部，可以使用React的内置Hook，如useState，useEffect等，来实现所需的状态管理逻辑。
   • 返回需要在组件中使用的值和函数。
2. 实现切换布尔值状态的自定义Hook示例：

import { useState } from'react';

// 自定义Hook
const useToggle = () => {
    const [isOn, setIsOn] = useState(false);
    const toggle = () => setIsOn(!isOn);
    return { isOn, toggle };
};

3. 在组件中使用自定义Hook：

import React from'react';
import useToggle from './useToggle'; // 假设自定义Hook在单独文件

const MyComponent = () => {
    const { isOn, toggle } = useToggle();
    return (
        <div>
            <p>开关状态: {isOn? '开' : '关'}</p>
            <button onClick={toggle}>
                {isOn? '关闭' : '打开'}
            </button>
        </div>
    );
};

export default MyComponent;