context

context API

在16.3之前，react官方是不推荐使用context API的，但是因为使用的开发者较多，所以在16.3版本推送了一个更加易用的context API供开发者使用，新的API，更加易用。

在新的context API中，React提供了一个createContext的方法，该方法返回一个包含Provider，Consumer对象，

例如：

// content.jsx
import {createContext} from "react";
// createContext:用来创建context，有一个参数是默认值，返回值是Provider和Consumer对象
// Provider：用于提供context组件
// Consumer:用于获取context组件
export const {Provider,Consumer} = createContext({a:1});
// App.jsx
import React,{Component} from "react";
import {Provider} from "./content；
import Parent from "./parent";
class App extends Component {
  state = {a:2};
  render(){
    return (
      <div>
        <Provider value={this.state}>
          <Parent />
        </Provider>
      </div>
    )
  }
}
export default App;
// child.js
// 我们可以在子组件中使用Consumer获取Provider传递下来的数据
import React, {PureComponent} from "react";
import {Consumer} from "./content";
class Child extends PureComponent {
  render(){
    return (
      <Consumer>
        {content=><p>{context.a}</p>}
      </Consumer>
    )
  }
}
export default Child

层级关系为：App -> parent -> child

我们可以通过context直接将数据从App中传递给child，而不需要parent的转递

context的用法

createContext：用于创建context，需要一个defaultValue的参数，并返回一个包含Provider，以及一个Consumer对象

Provider：顶层用于提供context的组件，包含一个value的props，value是实际的context数据

Consumer：底层用于获取context的组件，需要一个

需要注意的是，我们在context.js中初始化context API时加入的参数，是作为当我们没有设置Provider组件的情况下，Consumer组件可以调用那个参数作为初始值。

但是只要Provider组件存在，哪怕没有传值，Consumer也不会使用初始化时传入的值作为初始值。

为什么createContext需要一个defaultValue