React 状态管理：构建可复用的 Context 工厂函数

// 课程 Context
const CourseContext = createContext();
const CourseProvider = ({ children }) => {
    const [course, setCourse] = useState(null);
    return (
        <CourseContext.Provider value={{ course, setCourse }}>
            {children}
        </CourseContext.Provider>
    );
};

// 销售 Context
const SaleContext = createContext();
const SaleProvider = ({ children }) => {
    const [sale, setSale] = useState({ name: "A great course", price: 25 });
    return (
        <SaleContext.Provider value={{ sale, setSale }}>
            {children}
        </SaleContext.Provider>
    );
};

import React, { createContext, useState } from 'react';

/**
 * 创建一个通用的 Context 和其对应的 Provider。
 *
 * @param {string} name - 状态的名称，例如 'course', 'sale'。
 * @param {any} defaultValue - 状态的初始值。
 * @returns {[React.Context, React.Component]} 一个包含 Context 对象和 Provider 组件的数组。
 */
function makeContext(name, defaultValue) {
    // 动态生成 setState 函数的名称，例如 'setCourse', 'setSale'
    const setName = `set${name[0].toUpperCase()}${name.substring(1)}`;

    // 创建 Context 对象
    const Context = createContext();

    // 创建 Provider 组件
    const Provider = ({ children }) => {
        const [value, setValue] = useState(defaultValue);

        // Provider 的 value 包含动态生成的 state 变量和 setState 函数
        return (
            <Context.Provider value={{ [name]: value, [setName]: setValue }}>
                {children}
            </Context.Provider>
        );
    };

    return [
        Context,
        Provider
    ];
}

// 创建课程 Context 和 Provider
const [CourseContext, CourseProvider] = makeContext('course', null);

// 创建销售 Context 和 Provider
const [SaleContext, SaleProvider] = makeContext('sale', { name: "A great course", price: 25 });

// 示例：如何在组件中使用这些 Context
// App.js
function App() {
    return (
        <CourseProvider>
            <SaleProvider>
                <Dashboard />
            </SaleProvider>
        </CourseProvider>
    );
}

// Dashboard.js
import { useContext } from 'react';

function Dashboard() {
    // 使用 CourseContext
    const { course, setCourse } = useContext(CourseContext);
    // 使用 SaleContext
    const { sale, setSale } = useContext(SaleContext);

    return (
        <div>
            <h1>当前课程: {course ? course.title : '无'}</h1>
            <button onClick={() => setCourse({ id: 1, title: 'React进阶' })}>设置课程</button>

            <h2>当前销售: {sale.name} - ${sale.price}</h2>
            <button onClick={() => setSale(prev => ({ ...prev, price: prev.price + 5 }))}>提高价格</button>
        </div>
    );
}