面试题：React中如何在函数组件中创建和使用Context

Question

请描述在React函数组件中创建Context并传递数据的基本步骤，并给出一个简单的代码示例，示例中需要包含一个父组件传递数据，子组件接收数据并展示。

Answer 1

1. 创建Context对象：使用createContext方法从react库中创建一个Context对象。这个对象包含Provider和Consumer两个属性，Provider用于传递数据，Consumer用于接收数据（在函数组件中更多使用useContext来接收数据）。
2. 在父组件中使用Provider传递数据：在父组件中，通过Provider组件的value属性传递需要共享的数据。所有位于Provider组件内的子组件都可以访问到这个数据。
3. 在子组件中接收并展示数据：在子组件中，使用useContext钩子函数接收Provider传递下来的数据，然后进行展示。

以下是代码示例：

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

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

// 父组件
const ParentComponent = () => {
    const data = 'Hello from parent';
    return (
        <MyContext.Provider value={data}>
            <ChildComponent />
        </MyContext.Provider>
    );
};

// 子组件
const ChildComponent = () => {
    const contextData = useContext(MyContext);
    return <div>{contextData}</div>;
};

export default ParentComponent;