自 v1.3.0-beta.5 起支持 在 Taro 中沒有對 React 15 的 legacy context 進行支持，無法使用 getChildContext() API。

在一個典型的 Taro 應用中，數(shù)據(jù)是通過 props 屬性自上而下（由父及子）進行傳遞的，但這種做法對于某些類型的屬性而言是極其繁瑣的（例如：地區(qū)偏好，UI 主題），這些屬性是應用程序中許多組件都需要的。Context 提供了一種在組件之間共享此類值的方式，而不必顯式地通過組件樹的逐層傳遞 props。

API

Taro.createContext

const MyContext = Taro.createContext(defaultValue)

創(chuàng)建一個 Context 對象。當 Taro 渲染一個訂閱了這個 Context 對象的組件，這個組件會從最先渲染的 Provider 中讀取到 Provider 的 value。

在 Taro 中，即便在框架層面也無法知道組件的樹結構，因此 Taro 無法像 React 一樣往父組件找離自己最近的 Provider。因此創(chuàng)建的 Context 最好只在一個地方使用。

Context.Provider

<MyContext.Provider value={/* 某個值 */}>

每個 Context 對象都會返回一個 Provider Taro 組件，它允許消費組件訂閱 context 的變化。

Provider 接收一個 value 屬性，傳遞給消費組件。一個 Provider 可以和多個消費組件有對應關系。多個 Provider 也可以嵌套使用，里層的會覆蓋外層的數(shù)據(jù)。

當 Provider 的 value 值發(fā)生變化時，它內部的所有消費組件都會重新渲染。Provider 及其內部包含 contextType 或使用 useContext 組件都不受制于 shouldComponentUpdate 函數(shù)，因此當 consumer 組件在其祖先組件退出更新的情況下也能更新。

通過新舊值檢測來確定變化，使用了與 Object.is 相同的算法。

由于現(xiàn)在 Taro 還沒有 render props 的完整支持，所以無法使用 Context.Comsumer API，如果要消費 Context，可以使用 ContextType 或 useContext API。

Class.contextType

class MyClass extends Taro.Component {
  componentDidMount() {
    let value = this.context;
    /* 在組件掛載完成后，使用 MyContext 組件的值來執(zhí)行一些有副作用的操作 */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* 基于 MyContext 組件的值進行渲染 */
  }
}
MyClass.contextType = MyContext;

掛載在 class 上的 contextType 屬性會被重賦值為一個由 Taro.createContext() 創(chuàng)建的 Context 對象。這能讓你使用 this.context 來消費 Context 上的那個值。你可以在任何生命周期中訪問到它，包括 render 函數(shù)中。

注意： 你只通過該 API 訂閱單一 context。如果你想訂閱多個，閱讀使用多個 Context 章節(jié) 如果你正在使用實驗性的 public class fields 語法，你可以使用 static 這個類屬性來初始化你的 contextType。

class MyClass extends React.Component {
  static contextType = MyContext;
  render() {
    let value = this.context;
    /* 基于這個值進行渲染工作 */
  }
}

示例

動態(tài) Context

// counter-context.js
export const CounterContext = Taro.createContext(0);

// index.js
class Index extends Component {
  render () {
    const [ count, setCount ] = useState(0)
    return (
      <CounterContext.Provider value={count}>
        <View className='container'>
          <Test />
          <Button onClick={() => setCount(0)}>Reset</Button>
          <Button onClick={() => setCount(prevCount => prevCount + 1)}>+</Button>
          <Button onClick={() => setCount(prevCount => prevCount - 1)}>-</Button>
        </View>
      </CounterContext.Provider>
    )
  }
}

// child.js
class Child extends Taro.Component {
  shouldComponentUpdate () {
    // 即便返回 false 也不會阻止 CounterContext 更新消費它的組件
    return false
  }

  render () {
    return <Counter />
  }
}

// counter.js
import { CounterContext } from './counter-context.js'
class Counter extends Taro.Component {
  static contextType = CounterContext

  render () {
    const value = this.context
    return (
      <View>
        Count: {value}
      </View>
    )
  }
}

我們在這個例子中把計數(shù)器 count 的值通過 CounterContext.Provider 往下傳遞，Child 組件中雖然禁止了更新，但 Counter 組件在 CounterContext.Provider 的 value 每次變化之后，還是能夠訂閱更新，收到每次 count 的值。

消費多個 Context

const ThemeContext = Taro.createContext('light');

// 用戶登錄 context
const UserContext = Taro.createContext({
  name: 'Guest',
});

class App extends Taro.Component {
  render() {
    const {signedInUser, theme} = this.props;

    // 提供初始 context 值的 App 組件
    return (
      <ThemeContext.Provider value={theme}>
        <UserContext.Provider value={signedInUser}>
          <Layout />
        </UserContext.Provider>
      </ThemeContext.Provider>
    );
  }
}

function Layout() {
  return (
    <div>
      <Sidebar />
      <Content />
    </div>
  );
}

// 一個組件可能會消費多個 context
function Content() {
  const theme = useContext(ThemeContext)
  const user =  useContext(UserContext)
  return (
    <ProfilePage user={user} theme={theme} />
  )
}