关于React中Context的使用和理解

官方对于Context的定义

简单说就是，当你不想在组件树中通过逐层传递props或者state的方式来传递数据时，可以使用Context来实现跨层级的组件数据传递。

意思就是说，当你多个组件深层嵌套后最里层的组件想要使用最外层组件的传过来的值的时候，通过props传值就得一层层的往下传，代码很繁琐，而使用Context，子组件就可以很方便的使用外层的父组件的值

使用方法

通过静态方法React.createContext()创建一个Context对象，这个Context对象包含两个组件，<Provider />和<Consumer />

创建context文件夹，在context文件夹下创建index.js

import React, { createContext } from 'react';

const valueContext = createContext();

export default valueContext;

app.js代码：

import React, { lazy, Component } from 'react';
import Father from './components/father'
import ValueContext from './context/index'

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }
  render() {
    return (
      <div className="App">
        <ValueContext.Provider value={this.state.count}>
          <Father></Father>
        </ValueContext.Provider>
      </div>
    )
  }
}



export default App;

Provider

用于向后代组件提供变量值

Consumer

用于接收provider提供的变量值

father.js代码：

import React, { Component } from 'react';
import Son from './son'
class Father extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        return (
            <div>

                <div>Father</div>
                <Son></Son>

            </div>
        );
    }
}

export default Father;

son.js

import React, { Component } from 'react';
import ValueContext from '../context'
class Son extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    componentDidMount() {

    }
    render() {
        return (
            <div>
                <ValueContext.Consumer>
                    {(value) => (
                        <div>
                            <p>这是孙子组件 这是根组件传递的数据 {value}</p>

                        </div>
                    )}

                </ValueContext.Consumer>
            </div>
        );
    }
}

export default Son;

可以看到在跟组件app.js中包含了Father组件，father组件包含了son组件，在son组件中获取app.js数据，app.js使用了createContext创建了context上下文对象，使用Provider向组件下传递，son组件使用了Consumer获取到了跟组件的数据