react中對於context的理解

1、context舊版的基本使用
1、context的理解
當不想在組件樹中經過逐層傳遞props或state的方式來傳遞數據時，可以使用context來實現跨層級的組件數據傳遞。
2、context的使用
在使用context時須要用到兩個組件，一個是context生產者Provider，一般是一個父節點，另一個時context的消費者Consumer，一般是一個或多個子節點。因此context的使用基於生產者消費者模式。
對於父組件（即生產者），須要經過一個靜態屬性（static）childContextTypes聲明提供給子組件的context對象的屬性，並實現一個實例getChildContext方法，返回一個表明context的對象。
（1）getChildContext：根組件中聲明，是一個函數，返回一個對象，就是context
（2）childContextTypes：根組件中聲明，指定context的結構類型，若不指定會產生錯誤
（3）contextTypes：子孫組件中聲明，指定要接收的context的結構類型，能夠只是context的一部分結構。若沒有定義，則context將會是一個空對象。
（4）this.context：在子孫組件中經過此來獲取上下文。
3、context在以下的生命週期鉤子中能夠使用
constructor(props, context)
componentWillReceiveProps(nextProps, nextContext)

shouldComponentUpdate(nextProps, nextState, nextContext)
componentWillUpdate(nextProps, nextState, nextContext)

componentDidUpdate(prevProps, prevState, prevContext)
4、context的侷限性
（1）在組件樹中，若是中間某一個組件 ShouldComponentUpdate return false 了，會阻 礙 context 的正常傳值，致使子組件沒法獲取更新。
（2）組件自己 extends React.PureComponent 也會阻礙 context 的更新。
2、context新版的基本使用
1、全局定義context對象：
建立一個globalContext.js文件：
import React from "react";
const GlobalContext = React.createContext();
export default GlobalContext;
2、根組件引入GlobalContext，並使用GlobalContext.Provider（生產者）：
import One from "./components/one";
import GlobalContext from "./globalContext";

<GlobalContext.Provider
    value={{
        name:"zhangsan",
        age:19
        }}
>
    <One/>
</GlobalContext.Provider>
3、組件引入GlobalContext並調用context，使用GlobalContext.Consumer：
<GlobalContext.Consumer>
    {
        context => {
            console.log(context)
            return (
                <div>
                    <h2>{context.name}</h2> 
                    <h2>{context.age}</h2>
                </div>
            )
        }
    }
</GlobalContext.Consumer>