摘要：接收一個屬性，這個組件會讓后代組件統(tǒng)一提供這個變量值。因此對于同一個對象而言，一定是后代元素。解決方法就是把內(nèi)聯(lián)函數(shù)提取出來，如下講了這么多，我們還沒有講到其實我們已經(jīng)講完了的工作原理了。

本節(jié)主要講解以下幾個新的特性：

Context

ContextType

lazy

Suspense

錯誤邊界（Error boundaries）

memo

想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！

定義：Context 提供了一種方式，能夠讓數(shù)據(jù)在組件樹中傳遞而不必一級一級手動傳遞。

這定義讀的有點晦澀，來看張圖：

假設(shè)有如上的組件層級關(guān)系，如果最底層的 Item 組件，需要最頂層的 Window 組件中的變量，那我們只能一層一層的傳遞下去。非常的繁瑣，最重要的是中間層可能不需要這些變量。

有了 Context 之后，我們傳遞變量的方式是這樣的：

Item 可以直接從 Window 中獲取變量值。

當(dāng)然這種方式會讓組件失去獨立性，復(fù)用起來更困難。不過存在即合理，一定有 Context 適用場景。那 Context 是如何工作的呢。

首先要有一個 Context 實例對象，這個對象可以派生出兩個 React 組件，分別是 Provier 和 Consumer。

Provider 接收一個 value 屬性，這個組件會讓后代組件統(tǒng)一提供這個變量值。當(dāng)然后代組件不能直接獲取這個變量，因為沒有途徑。所以就衍生出 Consumer 組件，用來接收 Provier 提供的值。

一個 Provider 可以和多個消費組件有對應(yīng)關(guān)系。多個 Consumer 也可以嵌套使用，里層的會覆蓋外層的數(shù)據(jù)。

因此對于同一個 Context 對象而言，Consumer 一定是 Provier 后代元素。

創(chuàng)建 Contect 方式如下：

const MyContext = React.createContext(defaultValue?);

來個實例：

import React, {createContext, Component} from "react";

const BatteryContext = createContext();

class Leaf extends Component {
  render() {
    return (
      
        {
          battery => 
Battery: {battery}
        }
      
    );
  }
}
// 為了體現(xiàn)層級多的關(guān)系，增加一層 Middle 組件
class Middle extends Component {
  render() {
    return 
  }
}

class App extends Component {
  render () {
    return (
      
        
      
    )
  }

}

export default App;

上述，首先創(chuàng)建一個 Context 對象 BatteryContext， 在 BatteryContext.Provider 組件中渲染 Middle 組件，為了說明一開始我們所說的多層組件關(guān)系，所以我們在 Middle 組件內(nèi)不直接使用 BatteryContext.Consumer。而是在 其內(nèi)部在渲染 Leaf 組件，在 Leaf 組件內(nèi)使用 BatteryContext.Consumer 獲取BatteryContext.Provider 傳遞過來的 value 值。

運行結(jié)果：

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

來個實例：

...

class App extends Component {
  state = {
    battery: 60
  }
  render () {
    const {battery} = this.state;
    return (
      
         {this.setState({battery: battery - 1})}}>
          Press
        
        
      
    )
  }
}
...

首先在 App 中的 state 內(nèi)聲明一個 battery 并將其傳遞給 BatteryContext.Provider 組件，通過 button 的點擊事件進(jìn)減少 一 操作。

運行效果 ：

同樣，一個組件可能會消費多個 context，來演示一下：

import React, {createContext, Component} from "react";

const BatteryContext = createContext();
const OnlineContext = createContext();

class Leaf extends Component {
  render() {
    return (
      
        {
          battery => (
            
              {
                online => 
Battery: {battery}, Online: {String(online)}
              }
            
          )
        }
      
    );
  }
}
// 為了體現(xiàn)層級多的關(guān)系，增加一層 Middle 組件
class Middle extends Component {
  render() {
    return 
  }
}

class App extends Component {
  state = {
    online: false,
    battery: 60
  }
  render () {
    const {battery, online} = this.state;
    console.log("render")
    return (
      
        
           {this.setState({battery: battery - 1})}}>
            Press
          
           {this.setState({online: !online})}}>
            Switch
          
          
        
      
    )
  }

}

export default App;

同 BatteryContext 一樣，我們在聲明一個 OnlineContext，并在 App state 中聲明一個 online 變量,在 render 中解析出 online。如果有多個 Context 的話，只要把對應(yīng)的 Provier 嵌套進(jìn)來即可，順序并不重要。同樣也加個 button 來切換 online 的值。

接著就是使用 Consumer，與 Provier 一樣嵌套即可，順序一樣不重要，由于 Consumer 需要聲明函數(shù)，語法稍微復(fù)雜些。

運行結(jié)果：

接下來在 App 中注釋掉

//

在看運行效果：

可以看出，并沒有報錯，只是 battery 取不到值。這時候 createContext() 的默認(rèn)值就派上用場了，用以下方式創(chuàng)建：

const BatteryContext = createContext(90);

這個默認(rèn)值的使用場景就是在 Consumer 找不到 Provier 的時候。當(dāng)然一般業(yè)務(wù)是不會有這種場景的。

 ...
class Leaf extends Component {
  render() {
    return (
      
        {
          battery => 
Battery: {battery}
        }
      
    );
  }
}
...

回到一開始的實例，我們在看下 Consuer 里面的實現(xiàn)。由于 Consumer 特性，里面的 JSX 必須是該 Consumer 的回返值。這樣的代碼就顯得有點復(fù)雜。我們希望在整個 JSX 渲染之前就能獲取 battery 的值。所以 ContextType 就派上用場了。這是一個靜態(tài)變量，如下：

...  
class Leaf extends Component {
  static contextType = BatteryContext;
  render() {
    const battery = this.context;
    return (
      
Battery: {battery}
    );
  }
}
...

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

你只通過該 API 訂閱單一 context。如果你想訂閱多個，就只能用較復(fù)雜的寫法了。

React.lazy 函數(shù)能讓你像渲染常規(guī)組件一樣處理動態(tài)引入（的組件）。

首先聲明一個 About 組件

import React, {Component} from "react"

export default class About extends Component {
  render () {
    return 
About
  }
}

然后在 APP 中使用 lazy 動態(tài)導(dǎo)入 About 組件：

import React, {Component, lazy, Suspense} from "react"

const About = lazy(() => import(/*webpackChunkName: "about" */"./About.jsx"))

class App extends Component {
  render() {
    return (
      

        
      
    );
  }
}

export default App;

運行后會發(fā)現(xiàn)：

因為 App 渲染完成后，包含 About 的模塊還沒有被加載完成，React 不知道當(dāng)前的 About 該顯示什么。我們可以使用加載指示器為此組件做優(yōu)雅降級。這里我們使用 Suspense 組件來解決。
只需將異步組件 About 包裹起來即可。

...
Loading...