摘要：接收一个属性，这个组件会让后代组件统一提供这个变量值。因此对于同一个对象而言，一定是后代元素。解决方法就是把内联函数提取出来，如下讲了这么多，我们还没有讲到其实我们已经讲完了的工作原理了。

本节主要讲解以下几个新的特性：

Context

ContextType

lazy

Suspense

错误边界（Error boundaries）

memo

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

定义：Context 提供了一种方式，能够让数据在组件树中传递而不必一级一级手动传递。

这定义读的有点晦涩，来看张图：

假设有如上的组件层级关系，如果最底层的 Item 组件，需要最顶层的 Window 组件中的变量，那我们只能一层一层的传递下去。非常的繁琐，最重要的是中间层可能不需要这些变量。

有了 Context 之后，我们传递变量的方式是这样的：

Item 可以直接从 Window 中获取变量值。

当然这种方式会让组件失去独立性，复用起来更困难。不过存在即合理，一定有 Context 适用场景。那 Context 是如何工作的呢。

首先要有一个 Context 实例对象，这个对象可以派生出两个 React 组件，分别是 Provier 和 Consumer。

Provider 接收一个 value 属性，这个组件会让后代组件统一提供这个变量值。当然后代组件不能直接获取这个变量，因为没有途径。所以就衍生出 Consumer 组件，用来接收 Provier 提供的值。

一个 Provider 可以和多个消费组件有对应关系。多个 Consumer 也可以嵌套使用，里层的会覆盖外层的数据。

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

创建 Contect 方式如下：

const MyContext = React.createContext(defaultValue?);

来个实例：

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

const BatteryContext = createContext();

class Leaf extends Component {
  render() {
    return (
      
        {
          battery => 
Battery: {battery}
        }
      
    );
  }
}
// 为了体现层级多的关系，增加一层 Middle 组件
class Middle extends Component {
  render() {
    return 
  }
}

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

}

export default App;

上述，首先创建一个 Context 对象 BatteryContext， 在 BatteryContext.Provider 组件中渲染 Middle 组件，为了说明一开始我们所说的多层组件关系，所以我们在 Middle 组件内不直接使用 BatteryContext.Consumer。而是在 其内部在渲染 Leaf 组件，在 Leaf 组件内使用 BatteryContext.Consumer 获取BatteryContext.Provider 传递过来的 value 值。

运行结果：

当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数，因此当 consumer 组件在其祖先组件退出更新的情况下也能更新。

来个实例：

...

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

首先在 App 中的 state 内声明一个 battery 并将其传递给 BatteryContext.Provider 组件，通过 button 的点击事件进减少 一 操作。

运行效果 ：

同样，一个组件可能会消费多个 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)}
              }
            
          )
        }
      
    );
  }
}
// 为了体现层级多的关系，增加一层 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 的话，只要把对应的 Provier 嵌套进来即可，顺序并不重要。同样也加个 button 来切换 online 的值。

接着就是使用 Consumer，与 Provier 一样嵌套即可，顺序一样不重要，由于 Consumer 需要声明函数，语法稍微复杂些。

运行结果：

接下来在 App 中注释掉

//

在看运行效果：

可以看出，并没有报错，只是 battery 取不到值。这时候 createContext() 的默认值就派上用场了，用以下方式创建：

const BatteryContext = createContext(90);

这个默认值的使用场景就是在 Consumer 找不到 Provier 的时候。当然一般业务是不会有这种场景的。

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

回到一开始的实例，我们在看下 Consuer 里面的实现。由于 Consumer 特性，里面的 JSX 必须是该 Consumer 的回返值。这样的代码就显得有点复杂。我们希望在整个 JSX 渲染之前就能获取 battery 的值。所以 ContextType 就派上用场了。这是一个静态变量，如下：

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

挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象。这能让你使用 this.context 来消费最近 Context 上的那个值。你可以在任何生命周期中访问到它，包括 render 函数中。

你只通过该 API 订阅单一 context。如果你想订阅多个，就只能用较复杂的写法了。

React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。

首先声明一个 About 组件

import React, {Component} from "react"

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

然后在 APP 中使用 lazy 动态导入 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;

运行后会发现：

因为 App 渲染完成后，包含 About 的模块还没有被加载完成，React 不知道当前的 About 该显示什么。我们可以使用加载指示器为此组件做优雅降级。这里我们使用 Suspense 组件来解决。
只需将异步组件 About 包裹起来即可。

...
Loading...