本节主要讲解以下几个新的特性：
- Context
- ContextType
- lazy
- Suspense
- 错误边界（Error boundaries）
- memo
想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！
Context
定义：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
)
}
}
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 (
)
}
}
...
首先在 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
)
}
}
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 的时候。当然一般业务是不会有这种场景的。
ContextType
...
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。如果你想订阅多个，就只能用较复杂的写法了。
lazy 和 Supense 的使用
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 (
运行后会发现：
因为 App 渲染完成后，包含 About 的模块还没有被加载完成，React 不知道当前的 About 该显示什么。我们可以使用加载指示器为此组件做优雅降级。这里我们使用 Suspense 组件来解决。
只需将异步组件 About 包裹起来即可。
...
Loading...