React Context用法總結

Context做用

React中，父子組件通訊的機制，父子組件的通訊是經過props進行數據的傳遞。
Context提供了一種方式，可以讓數據跨越組件層級來傳遞，再也不須要一層一層的傳遞

如何使用

React.createContext()

const MyContext = React.createContext(defaultValue)
 defaultValue 默認值，沒有Provider時會生效

Context.Provider

<MyContext.Provider value={/* 某個值 */}>
Provider 接收一個 value 屬性，傳遞給消費組件

Class.contextType

能夠經過Class.contextType直接將Context對象掛載到class的contextType屬性，而後就能夠使用this.context對context對象進行使用

class MyClass extends React.Component {
  render() {
    let value = this.context;
    /* 基於 MyContext 組件的值進行渲染 */
  }
}
MyClass.contextType = MyContext;
或
class MyClass extends React.Component {
  static contextType = MyContext;
  render() {
    let value = this.context;
    /* 基於這個值進行渲染工做 */
  }
}

Context.Consumer

<MyContext.Consumer>
  {value => /* 基於 context 值進行渲染*/}
</MyContext.Consumer>

相信小夥伴對 React context 的做用 以及使用有了必定的瞭解。固然還有其餘場景的使用，可直接看官網（https://react.docschina.org/d...）也但願幫助到須要的小夥伴們。