面试题：React中如何使用React Hooks在函数组件间实现简单状态共享

Question

假设你有两个函数组件A和B，描述一下如何使用React Hooks（如useState和useContext）来实现A组件状态的改变能实时反映在B组件上，并简单给出关键代码示例。

Answer 1

1. 使用useState和useContext实现状态共享的步骤：
   • 创建Context：首先创建一个React Context对象，用于在组件树中传递数据。
   • 在A组件中管理状态并通过Context传递：使用useState在A组件中管理状态，并通过Context.Provider将状态传递下去。
   • 在B组件中通过Context消费状态：B组件使用useContext来获取A组件传递过来的状态，这样A组件状态改变时，B组件能实时反映。
2. 关键代码示例：

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

// 创建Context
const MyContext = createContext();

const AComponent = () => {
    const [count, setCount] = useState(0);

    return (
        <MyContext.Provider value={{ count, setCount }}>
            <div>
                <p>A组件的count: {count}</p>
                <button onClick={() => setCount(count + 1)}>增加count</button>
            </div>
        </MyContext.Provider>
    );
};

const BComponent = () => {
    const { count } = useContext(MyContext);
    return (
        <div>
            <p>B组件反映的count: {count}</p>
        </div>
    );
};

const App = () => {
    return (
        <div>
            <AComponent />
            <BComponent />
        </div>
    );
};

export default App;

在上述代码中，AComponent使用useState管理count状态，并通过MyContext.Provider将count和setCount传递下去。BComponent使用useContext获取count状态，从而实现A组件状态改变实时反映在B组件上。