兄弟组件通信context

context介绍 

在平常我们使用react中，数据都是自顶而下的传递方式，如果在顶层组件中的state中存储数据，在不借助任何第三方的状态管理框架的情况下，想在子组件中获取顶层组件的数据，唯一的方法就是一层层进行数据的传递，即使两者之间的组件根本不需要该数据，如果层级越深，层层传递数据可谓是灾难，所以context的出现就解决了这一问题，context是一种跨越层级传递值的一种方法，

context实现步骤

兄弟组件起到的作用类似中间人的模式，先子传父，再父传子

context状态传递数据

        先定义一个空对象，抛出一个React.createContext(默认值)，结构赋值获取Provider和Consumer组件

        根组件中定义在需要的位置使用Context的provider

       定义contextType获取数据，或者也可以使用Consumer获取多个内容

代码展示

context.js组件

import React from 'react';

//定义一个对象的数据
let context = React.createContext(null);

//抛出对象的内容
export const {Provider,Consumer} = context;

App.js组件

层级关系：App->Text->Span

我们直接在顶层的组件里使用Provider组件，并且Provider组件有一个value属性用于传递context的实际的value。然后我们就可以在底层的Child组件中得到这些value来使用。

import React from 'react';
import './App.css';

import { Provider, Consumer } from "./context/index";

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      color: "#FF0000"
    }
  }

  changeColor = () => {
    console.log(this.refs.colors.value)

    this.setState({
      color: this.refs.colors.value
    })
  }

  render() {
    let { color } = this.state;
    return (
      <Provider value={{ color: color, fontSize: "24px" }}>
        <div>

          <input type="color" ref="colors" onChange={this.changeColor} />
          <Text />
        </div>
      </Provider>

    )
  }
}


function Text(props) {
  return (
    <div>
      <h4>Text子组件</h4>
      <Span />
    </div>
  )
}

function Span(props) {
  return (
    <div>
      {/* 接受Provier传递的数据 */}
      <Consumer>
        {
          (context) => {
            console.log(context)
            return (
              <span style={context}>Hello React</span>
            )
          }
        }
      </Consumer>

    </div>

  )
}

export default App;

使用场景：

当我们想要跨层级传递数据时，而数据本身要传递的地方不多，这个时候往往不想再引入一个更复杂的状态管理框架（如redux等），这个时候，context会是一个十分不错的选择