Context 通過元件樹提供了一個傳遞資料的方法，從而避免了在每一個層級手動的傳遞 props 屬性。

在一個典型的 React 應用中，資料是通過 props 屬性由上向下（由父及子）的進行傳遞的，但這對於某些型別的屬性而言是極其繁瑣的（例如：地區偏好，UI主題），這是應用程式中許多元件都所需要的。 Context 提供了一種在元件之間共享此類值的方式，而不必通過元件樹的每個層級顯式地傳遞 props 。

老版本的context API

import React, { Component } from 'react';
import './App.css';
import PropTypes from 'prop-types'
 
;

const Topic = (props) => {
  return (
    <div>
      <Comment />
    </div>
  )
}

const Comment = (props, context) => {
  return (
    <div>{ context.color }</div>
  )
}

Comment.contextTypes = {
  color: PropTypes.string
}

class App extends Component {
  getChildContext
 
() {
    return { color: "red" };
  }
  render() {
    return (
      <div className="App">
        <Topic />
      </div>
    );
  }
}

App.childContextTypes = {
  color: PropTypes.string
}

export default App;
複製程式碼

新版本16.3 context

import React, { Component } from 'react';
import './App.css'
 
;

// 第一步，建立 context
const myContext = React.createContext()

// 第二步，建立 Provider Component

class MyProvider extends Component {
  state = {
    name: "rails365",
    age: 27
  }

  render() {
    return (
      <myContext.Provider value={{ state: this.state }}>
        { this.props.children }
      </myContext.Provider>
    )
  }
}

const Family = (props) => {
  return (
    <div>
      <h1>Family</h1>
      <Person />
    </div>
  )
}


class Person extends Component {
  render() {
    return (
      <div>
        <h1>Person</h1>
        <myContext.Consumer>
          { ({ state }) => <p>My age is { state.age }</p> }
        </myContext.Consumer>
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <p>Hello App</p>
        <MyProvider>
          <Family />
        </MyProvider>
      </div>
    );
  }
}

export default App;
複製程式碼

API

React.createContext

const {Provider, Consumer} = React.createContext(defaultValue);
複製程式碼

• 建立一對 { Provider, Consumer }。當 React 渲染 context 元件 Consumer 時，它將從元件樹的上層中最接近的匹配的 Provider 讀取當前的 context 值。

• 如果上層的元件樹沒有一個匹配的 Provider，而此時你需要渲染一個 Consumer 元件，那麼你可以用到 defaultValue 。這有助於在不封裝它們的情況下對元件進行測試。

Provider

<Provider value={/* some value */}>
複製程式碼

• React 元件允許 Consumers 訂閱 context 的改變。

• 接收一個 value 屬性傳遞給 Provider 的後代 Consumers。一個 Provider 可以聯絡到多個 Consumers。Providers 可以被巢狀以覆蓋元件樹內更深層次的值。

Consumer

<Consumer>
  {value => /* render something based on the context value */}
</Consumer>
複製程式碼

• 一個可以訂閱 context 變化的 React 元件。

• 接收一個 函式作為子節點. 函式接收當前 context 的值並返回一個 React 節點。傳遞給函式的 value 將等於元件樹中上層 context 的最近的 Provider 的 value 屬性。如果 context 沒有 Provider ，那麼 value 引數將等於被傳遞給 createContext() 的 defaultValue 。