官方文档 的demo已经很棒了。但我觉得我的描述会让你更容易理解。

1.Context

Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。
有部分小伙伴应该使用props属性进行组件向下传值的操作。当多个组件嵌套时候。你就需要慢慢向上寻找最初的值是什么~(无底洞下往上钻 )

2.API

React.createContext： 创建一个上下文的容器(组件), defaultValue可以设置共享的默认数据

const {Provider, Consumer} = React.createContext(defaultValue);
Provider(生产者): 和他的名字一样。用于生产共享数据的地方。生产什么呢？ 那就看value定义的是什么了。value:放置共享的数据。
 
<Provider value={/*共享的数据*/}>
    /*里面可以渲染对应的内容*/
</Provider>
Consumer(消费者):这个可以理解为消费者。 他是专门消费供应商(Provider 上面提到的)产生数据。Consumer需要嵌套在生产者下面。才能通过回调的方式拿到共享的数据源。当然也可以单独使用，那就只能消费到上文提到的defaultValue
 
<Consumer>
  {value => /*根据上下文  进行渲染相应内容*/}
</Consumer>
3.react脚手架快速搭建
 
命令行按顺序执行以下代码：
 
npm install -g create-react-app
create-react-app demo
yarn start
 
4.demo
 
在上面 脚手架添加 son.js 、grandson.js 并修改App.js内容。项目结构自行调整：
 
import Son from './son';//引入子组件
// 创建一个 theme Context,
export const {Provider,Consumer} = React.createContext("默认名称");
export default class App extends React.Component {
    render() {
        let name ="小人头"
        return (
            //Provider共享容器 接收一个name属性
            <Provider value={name}>
                <div style={{border:'1px solid red',width:'30%',margin:'50px auto',textAlign:'center'}}>
                    <p>父组件定义的值:{name}</p>
                    <Son />
            </Provider>
son.js 子组件
 
//son.js 子类
import React from 'react';
import { Consumer } from "./App.js";//引入父组件的Consumer容器
import Grandson from "./grandson.js";//引入子组件
function Son(props) {
    return (
        //Consumer容器,可以拿到上文传递下来的name属性,并可以展示对应的值
        <Consumer>
            {( name ) =>
                <div style={{ border: '1px solid blue', width: '60%', margin: '20px auto', textAlign: 'center' }}>
                    <p>子组件。获取父组件的值:{name}</p>
                    {/* 孙组件内容 */}
                    <Grandson />
        </Consumer>
export default Son;
grandson.js 孙组件
 
//grandson.js 孙类
import React from 'react';
import { Consumer } from "./App.js";//引入父组件的Consumer容器
function Grandson(props) {
    return (
         //Consumer容器,可以拿到上文传递下来的name属性,并可以展示对应的值
        <Consumer>
            {(name ) =>
                   <div style={{border:'1px solid green',width:'60%',margin:'50px auto',textAlign:'center'}}>
                   <p>孙组件。获取传递下来的值:{name}</p>
        </Consumer>
export default Grandson;
运行上述代码。相信小伙伴对 React context 的作用 以及使用有了一定的了解。当然还有其他场景的使用，可直接看官方context文档 这个文章作为自己学习记录。也希望帮助到需要的小伙伴们。
 有不对的地方 希望小伙伴 及时指正。谢谢
                    官方文档 的demo已经很棒了。但我觉得我的描述会让你更容易理解。1.ContextContext 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。有部分小伙伴应该使用props属性进行组件向下传值的操作。当多个组件嵌套时候。你就需要慢慢向上寻找最初的值是什么~(无底洞下往上钻)2.APIReact.createContext：创建一个上下文的容器(组件), defaultValue可以设置共享的默认数据const {Provider, Co.
				
函数组件和类组件中React.createContext的使用
组成：两个页面文件 app.js 和 Tooltip.js；一个存放context的文件 indexContext.js
// indexContext.js
import React from 'react';
export const windowProp = {
    width: window.innerWidth,
    height: window.innerHeight
export const WindowProps
				
React 源碼解析 - API 系列 - React.createContext前言正文Context 概念Context APIReact.createContextContext.ProviderClass.contextTypeContext.consumerReact.createContext 源碼分析源碼分析context$$typeof_currentValue_threadCountProviderConsumer總結結語
這篇只有一個重點，就是 react 中的 context。個
				
文章目录前言引入@connect是什么呢？？？@connect介绍connect介绍类的装饰基本语法connect的注入定义模块区域 state  数据建立连接获取指定模块区间下的 state 数据关于数据更新操作，你需要知道的分析@connect()页面中不同使用方式引申models文件夹下的js文件的初步了解dva-loading 的引入使用安装依赖dva-loading 引入使用专有名词查阅参考网址
本文章主要对 @connect 做了一个简单介绍分析，和使用注意点，以及其他一些 涉及到 dv
				
文章目录ContextContext 相关用法Context 原理总结
Context
React提供了 Context 上下文模式，为了解决 props 每层都需要传递的问题，即Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。
注意：提供者一定要是消费者的某一层父级
Context 相关用法
v16.3.0后，context api 正式发布
用 createContext 创建出一个 context 上下文对象，context 对象提供两个组件，Provi
				
回答: useCallback的主要作用是用来优化函数的性能，它可以监听到相应状态的变化并返回一个稳定的函数地址。因此，当我们需要在父组件重新渲染时，避免不必要的函数重新创建时，可以使用useCallback。具体的使用场景包括：
1. 将回调函数作为props传递给子组件时，可以使用useCallback来确保子组件只在依赖项变化时才重新渲染。
2. 在使用useEffect时，如果依赖项中包含了一个函数，可以使用useCallback来确保函数的稳定性，避免不必要的重新渲染。
3. 在使用useMemo时，如果需要返回一个函数，可以使用useCallback来确保函数的稳定性。
需要注意的是，滥用useCallback可能会影响性能，因此在使用时需要搭配React.memo进行使用，以避免适得其反的情况发生。[1][2][3]