日常記錄一下學習到的知識點吧。好記性不如爛筆頭~ 我相信這是對的。
官方文檔 的demo已經很棒了。但我覺得我的描述會讓你更容易理解。

1.Context

Context 通過組件樹提供了一個傳遞數(shù)據(jù)的方法，從而避免了在每一個層級手動的傳遞 props 屬性。
有部分小伙伴應該使用props屬性進行組件向下傳值的操作。當多個組件嵌套時候。你就需要慢慢向上尋找最初的值是什么~(手動微笑,惡心吧 )

2.API (個人大白話理解)

React.createContext：創(chuàng)建一個上下文的容器(組件), defaultValue可以設置共享的默認數(shù)據(jù)

const {Provider, Consumer} = React.createContext(defaultValue);

Provider(生產者): 和他的名字一樣。用于生產共享數(shù)據(jù)的地方。生產什么呢？ 那就看value定義的是什么了。value:放置共享的數(shù)據(jù)。

<Provider value={/*共享的數(shù)據(jù)*/}>
    /*里面可以渲染對應的內容*/
</Provider>

Consumer(消費者):這個可以理解為消費者。 他是專門消費供應商(Provider 上面提到的)產生數(shù)據(jù)。Consumer需要嵌套在生產者下面。才能通過回調的方式拿到共享的數(shù)據(jù)源。當然也可以單獨使用，那就只能消費到上文提到的defaultValue

<Consumer>
  {value => /*根據(jù)上下文  進行渲染相應內容*/}
</Consumer>

3.react腳手架快速搭建

命令行按順序執(zhí)行以下代碼：

npm install -g create-react-app
create-react-app demo
yarn start

4.demo

項目結構.jpg

demo效果圖.png

1. App.js 父組件

//App.js
import React from 'react';
import Son from './son';//引入子組件
// 創(chuàng)建一個 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 />
                </div>
            </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 />
               </div>
            }
        </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>
               </div>
            }
        </Consumer>
    );
}
export default Grandson;

運行上述代碼。相信小伙伴對 React context 的作用 以及使用有了一定的了解。當然還有其他場景的使用，可直接看官方context文檔 這個文章作為自己學習記錄。也希望幫助到需要的小伙伴們。
有不對的地方 希望小伙伴 及時指正。謝謝