9.React Context 上下文

1.Context

在 react 中，我们会遇到这么一个情况，如果爷爷想传东西给孙子，那么就需要这么做：爷爷 传给 父亲，父亲再传给自己的儿子。

如果层级嵌套的特别深，怎么传递呢？这时候就要引出我们今天的知识点 context 上下文，可以通过设置上下文，让参数容易读取，不需要层层传递。

// 在实际项目中。父传子 和 redux 使用比较多，context 的功能间于两者之间，往往被忽略

下面就一个简单的例子来说明:

2.实例解析

这是目录结构:

└─component
        App.js
        Children.js
        Grandson.js

App.js:

import React from "react";
import Children from "./Children";
import PropTypes from "prop-types";

//在APP中定义一个状态 color:"red"  希望将这个状态传给children和grandson
//上下文 context 在当前组件中获取和设置后代组件中的上下文
//1.在父组件定义上下文  先要标明上下文的类型  一般使用属性校验包来校验规定类型:props-type
//2.在父级中获取并设置后代的上下文  是一个固定的方法 export default class App extends React.Component{
//静态属性  这个结构是固定
static childContextTypes= {
    color: PropTypes.string
}
getChildContext(){
  //这里返回什么  上下文的内容就是什么
  return {
      color: this.state.color
  }
}
export default class Children extends React.Component{
  constructor(props){
    super(props);
    this.state={
      color: "red"
    }
  }
  render(){
    return (
      <div>
        <h1>APP</h1>
        <Children color={this.state.color}/>
      </div>
    )
  }
}

Children.js:

import React from "react";
import Grandson from "./Grandson";
import PropTypes from "prop-types";

export default class Children extends React.Component{
  //后代必须验证  不验证就没有 上下文
  static contextTypes={
    color: PropTypes.string
  }

  constructor(props){
    super(props);
  }

  render(){
    console.log(this.context);
    return (
      <div>
        <h1 style={{color:this.context.color}}>儿子</h1>
        <Grandson/>
      </div>
    )
  }
}

Gandson.js:

import React from "react";
import PropTypes from "prop-types";

export default class Grandson extends React.Component {
  //必须校验  才能拿到
  static contextTypes= {
    //只要是后代  都可以通过这样的方式获取上下文
    color:PropTypes.string
  }
  constructor(props, context) {
    super(props);
    //第二个参数是 上下文context 默认传的
    console.log(context);
    //这是映射
    this.state={...context};
    //相当于这个  默认内部执行了这个:this.props=props;
  }

  render() {
    return (
      <div style={{color: this.context.color}}>孙子</div>
    )
  }
}