React的contextType的使用方法簡介

上一篇介紹了Context的使用方法。可是Context會讓組件變得不純粹，由於依賴了全局變量。因此這決定了Context通常不會大規模的使用。因此通常在一個組件中使用一個Context就好。

因爲Consumer的特性，裏面的代碼必須是這個函數的返回值。這樣就顯得複雜與不優雅了。那該怎麼解決呢？這樣contextType就派上用場了。

 

還拿上一篇的demo來舉例。而且修改它。 上一篇的代碼:

import React, { Component, createContext } from 'react'; const BatteryContext = createContext(); //聲明一個孫組件
class Leaf extends Component { render() { return ( <BatteryContext.Consumer> { battery => <h1>Battery : {battery}</h1>
 } </BatteryContext.Consumer>
 ) } } //聲明一個子組件
class Middle extends Component { render() { return <Leaf /> 
 } } class App extends Component { render(){ return ( <BatteryContext.Provider value={60}>
        <Middle />
      </BatteryContext.Provider>
 ); } } export default App;

 

 接下里咱們修改他，使他更加優雅一些:

咱們只須要修<Leaf/>組件的代碼就能夠。

 

首先咱們用static來聲明contextType:

static contextType = BatteryContext;

 

 

這樣在運行時就能夠獲取到一個新的屬性。咱們來接收他。

const battery = this.context;

 

這樣Consumer就能夠徹底再也不使用了。

 return<h1>Battery : {battery}</h1>

 

 所有代碼:

import React, { Component, createContext } from 'react'; const BatteryContext = createContext(); //聲明一個孫組件
class Leaf extends Component { static contextType = BatteryContext; render() { const battery = this.context; return<h1>Battery : {battery}</h1> } } //聲明一個子組件
class Middle extends Component { render() { return <Leaf />
 } } class App extends Component { state = { battery: 60, } render() { const { battery } = this.state; return ( <BatteryContext.Provider value={battery}>
        <button type="button" onClick={() => this.setState({ battery: battery - 1 })} > 減減 </button>
        <Middle />
      </BatteryContext.Provider>
 ); } } export default App;

 

 

效果圖:

 

效果和使用Consumer沒有什麼區別。可見只有一個Context的時候，使用contextType要比使用Consumer簡單的多。