react context 學習

在react 數據傳遞中經常使用的是經過props 進行數據傳遞，可是有的內容咱們是須要在整個頁面中全部的組件使用的，這個時候若是還使用props一層一層的去去傳遞的話就比繁瑣，怎麼解決這個問題呢 react提供了一個 context 上下文來解決這個問題。若是使用了react-redux 進行react中組件之間數據傳遞的狀況，基本是不會用到context 的。

React.createContext

const MyContext = React.createContext(defaultValue);
複製代碼

建立一個context對象，當react render一個訂閱了此context的組件的時候，他將從Provider中讀取context中的值

方法的第一個參數是defaultValue 參數只有在組件樹種沒有提供 Provider組件時使用，這可使單獨測試組件變得更方便些，注意：將undefined做爲Provider值傳遞不會致使 consumer 組件使用defaultValue。

Context.Provider

<MyContext.Provider value={/* some value */}>
複製代碼

每個Context對象中都包含一個Provider組件，在Provider 上有一個value 屬性，這個 value 屬性將能被訂閱(訂閱有兩種方式後面會說)了context 的後代組件直接獲取，這樣就能夠避免props向深層級的組件傳遞的問題了，而且訂閱了context的組件，當context的值放生變化的時候組件會自動從新render

Class.contextType

這是一種訂閱context內容的一種方法，在類的static屬性contextType設置爲以前建立好的context對象,在當前組件的各生命週期中使用 this.context 來訪問上下文

class MyClass extends React.Component {
  componentDidMount() {
    let value = this.context;
    /* perform a side-effect at mount using the value of MyContext */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* render something based on the value of MyContext */
  }
}
MyClass.contextType = MyContext;
複製代碼

若是你使用了 public class fields syntax 也可使用

class MyClass extends React.Component {
  static contextType = MyContext;
  render() {
    let value = this.context;
    /* render something based on the value */
  }
}
複製代碼

Context.Consumer

另外一種訂閱context的方式就是使用 Comsumer 組件 ,Comsumer組件的子組件是一個函數，這個函數的第一個參數就是context 的值，函數的返回值必須是一個react 的 element

<MyContext.Consumer>
  {value => /* render something based on the context value */}
</MyContext.Consumer>
複製代碼

官方文檔
本身寫的小demo