react--Context

Context

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

props单向数据流动：

如果觉得Props传递数据很繁琐，可以采用context,进行跨组件传递数据

moneyContext:

import {createContext} from 'react';
let moneyContext = createContext()
let {
  Provider,
  Consumer  
} = moneyContext

export default {
    Provider,
    Consumer
}

App.js

import React,{Component} from 'react';
import ContextParent from "./ContextParent"
import moneyContext from "./moneyContext"

class App extends Component{
  state = {
    money:100
  }
  render(){
    return (
      <moneyContext.Provider value={{  //提供者的value属性可以给所有的后代元素提供数据
        money:this.state.money
      }}>
        <ContextParent />
      </moneyContext.Provider>
    )
  }
}

export default App;

ContextParent

import React, { Component,createContext } from 'react'
import GrandChild from "./GrandChild"

import moneyContext from "./moneyContext"
export default class ContextParent extends Component {
    render() {
        return (
               //通过公共实例的Context的Consumer，内部子元素写成一个函数，参数就可以获取value值了
                <moneyContext.Consumer>
                    {
                        (value)=>{
                            return (
                                <div>
                                    ContextParent组件获取App传递来的money === {value.money}
                                    <GrandChild />
                                </div>
                            )
                        }
                    }
                </moneyContext.Consumer>
        )
    }
}

GrandChlid

import React, { Component } from 'react'
import moneyContext from "./moneyContext"
export default class GrandChild extends Component {
    render() {
        return (
            <moneyContext.Consumer>
                {
                    value=>{
                        return (
                            <div>
                                我是GrandChild组件---{value.money}
                            </div>
                        )
                    }
                }
            </moneyContext.Consumer>
        )
    }
}