面试题：React 中如何结合自定义 Hook 与 Context 实现主题切换功能

Question

假设你正在开发一个 React 应用，需要实现一个主题切换功能（例如亮色主题和暗色主题）。请描述如何创建一个自定义 Hook 来管理主题状态，并结合 Context 使应用的不同组件都能使用和切换主题。要求阐述实现思路，以及关键代码结构。

Answer 1

实现思路

1. 创建自定义 Hook：用于管理主题状态，包括当前主题和切换主题的方法。
2. 创建 Context：将主题相关状态和方法传递给后代组件，避免层层传递 props。
3. 在组件中使用：通过 Context.Consumer 或者 useContext 钩子获取主题状态和切换方法，实现主题切换功能。

关键代码结构

1. 创建自定义 Hook

import { useState } from'react';

const useTheme = () => {
    const [theme, setTheme] = useState('light');

    const toggleTheme = () => {
        setTheme(theme === 'light'? 'dark' : 'light');
    };

    return {
        theme,
        toggleTheme
    };
};

2. 创建 Context

import React from'react';

const ThemeContext = React.createContext();

export default ThemeContext;

3. 在应用顶层设置 Context

import React from'react';
import ThemeContext from './ThemeContext';
import useTheme from './useTheme';

const App = () => {
    const { theme, toggleTheme } = useTheme();

    return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
            {/* 应用的其他组件 */}
        </ThemeContext.Provider>
    );
};

export default App;

4. 在子组件中使用 Context

import React, { useContext } from'react';
import ThemeContext from './ThemeContext';

const ChildComponent = () => {
    const { theme, toggleTheme } = useContext(ThemeContext);

    return (
        <div>
            <p>当前主题: {theme}</p>
            <button onClick={toggleTheme}>切换主题</button>
        </div>
    );
};

export default ChildComponent;