createContext和useContext的用法

在React中，createContext和useContext是用于实现跨组件间数据传递的两种主要方法。

createContext方法用于创建一个Context对象，当React渲染一个订阅了这个Context对象的组件时，这个组件会从组件树中离自身最近的那个匹配的Provider中读取到当前的context值。只有当组件所处的树中没有匹配到Provider时，其defaultValue才会生效。

以下是一个简单的createContext使用示例：

import React from 'react';  
  
// 创建一个Context对象  
let defaultValue = {};  
const context = React.createContext(defaultValue);  
  
export default context;

在上面的代码中，我们首先导入了React库，然后创建了一个新的Context对象。这个Context对象有一个初始值defaultValue，该值在组件树中没有对应的Provider时将会被使用。

接下来，我们可以在父组件中通过Provider来定义共享的数据：

<Context.Provider value={{ activeKey: 'lx' }}>  
  <Son />  
</Context.Provider>

在上面的代码中，我们将一个对象作为value传递给了Context.Provider组件，其中的activeKey属性将在子组件Son中被访问和使用。

在子组件中，我们可以通过useContext来获取这个共享的数据：

import React, { useContext } from 'react';  
import Context from './parent'; // 引入上面创建的 Context 对象  
  
function Son() {  
  const { activeKey } = useContext(Context); // 获取该Context的当前值，即我们在父组件中定义的对象中的activeKey属性  
  return <p>获取传递下来的值: {activeKey}</p>;  
}

在上面的代码中，我们通过useContext接收到我们在父组件中通过Provider定义的数据，然后在子组件Son中使用这个数据来渲染页面。