9.React Context 上下文

1.Context

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

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

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

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

2.实例解析

2.1 jsx 版本：

App 是父组件，创建上下文

Children 和 Grandson 展示了两种获取上下文的方式

这是目录结构:

└─component
        App.jsx
        Children.jsx
        Grandson.jsx

App.js:

import React from "react";

import Children from "./Children";

// 创建一个 theme Context,

export const Context = React.createContext("默认名称");

export default class App extends React.Component {

constructor(props) {

super(props);

this.state = {

color: "red"

}

}

render() {

return (

<div>

<h1>APP</h1>

<Context.Provider value={this.state.color}>

<Children />

</Context.Provider>

</div>

)

}

}

Children.js:

　　第一种获取上下文的方式

import React from "react";

import { Context } from "./App";// 引入父组件的Consumer容器

import Grandson from "./Grandson";

export default class Children extends React.Component {

constructor(props) {

super(props);

this.state = {};

//不写在这里的话初始化的时候不会获取到传递的context

Children.contextType = Context;

}

render() {

return (

<div>

<h2 style={{ color: this.context }}>儿子</h2>

<Grandson />

</div>

)

}

}

Gandson.js:

　　第二种获取上下文的方式

import React from "react";

import { Context } from "./App";// 引入父组件的Consumer容器

export default class Grandson extends React.Component {

render() {

return (

<Context.Consumer>

{

(params) => {

return (

<div style={{ color: params }}>孙子</div>

)

}

}

</Context.Consumer>

)

}

}

2.2 tsx 版本：

这是目录结构: 同上

App.js:

import React, { createContext, Context } from "react";
import Children from "./Children"
type propsType = {};
type stateType = {
  userInfo: any,
};
//这里要导出这个上下文，下面的子孙组件哪个用到context的东西哪个就引入一下
export const InfoContext: Context<any> = createContext({
  name: "",
  age: 0,
});
class App extends React.Component<propsType, stateType> {
  constructor(props) {
    super(props);
    this.state = {
      userInfo: {
        name: "test",
        age: -1,
      },
    };
  }
  handleClick = () => {
    let info = {
      name: "ls",
      age: 20,
    };
    this.setState({
      userInfo: info,
    });
  };
  render() {
    return (
      <InfoContext.Provider value={this.state.userInfo}>
        <button onClick={() => this.handleClick()}>传递</button>
        <Children></Children>
      </InfoContext.Provider>
    );
  }
}
export default App;

Children.js:

　　没有获取上下文

import React from "react";
import Grandson from "./Grandson";
type propsType = {};
type stateType = {};

class Children extends React.Component<propsType, stateType> {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
        中间的子组件
        <Grandson></Grandson>
      </div>
    );
  }
}
export default Children;

Gandson.js:

import React from "react";
import { InfoContext } from './App'//引入上下文
type propsType = {};
type stateType = {};

class Grandson extends React.Component<propsType, stateType> {
  constructor(props) {
    super(props);
    this.state = {};
    //不写在这里的话初始化的时候不会获取到传递的context
    Grandson.contextType = InfoContext;
  }
  render() {
    return (
      <div>
        最下面的孙子组件
        <br />
        <label>姓名：{this.context.name}</label>
        <br />
        <label>年龄：{this.context.age}</label>
      </div>
    );
  }
}

export default Grandson;