React16—— Context API

背景介绍

   假设有以下组件结构，并且只有D组件会用到A组件内的数据，那么就需要将props传递很多层，这样不仅书写起来很繁琐同时还会为夹在中间的组件引入不必要的 props

<A>
  <B>
    <C>
      <D />
    </C>
  </B>
</A>

  Context API解决这类问题就很好用，很多流行框架（例如redux，mobx等）都在使用它。但是在React16.3.0之前，官方还是不推荐我们使用。这篇文章说明了使用旧版Context会出现的问题以及解决办法

  但是React16.3.0发布了更加高效、稳定的Context API

Context API

  Context API主要由以下几个部分：

• React.createContext：创建一个 Context 对象，包含两个属性名为Provider和Consumer的组件

const MyContext = React.createContext(defaultValue);

• Provider组件：它接受一个value属性，将其传给需要使用context值的子组件，value属性的值可以是任何JS中的数据类型

<MyContext.Provider value={someValue}>