react类组件的第四个属性context

类组件中的第四个属性context

步骤如下：

1. import { createContext } from 'react'

2. let { Provider,Consumer } =createContext()
       Provider是生产者，Consumer为消费者

3. 
       传值的话必须是value
   
   
   myprovider里的index.js

import React, {
      Component,createContext } from 'react'

let context = createContext()
let {
      Provider,Consumer } = context
class MyProvider extends Component {
     
    render() {
     
        return (
            <div>
                <Provider value={
     this.props.store}>
                //就是App 组件一定要渲染 
                    {
     this.props.children}
                </Provider>
            </div>
        )
    }
}

export {
     MyProvider,Consumer,context}

   index.js

import {
      MyProvider } from './component/myprovider'
import store from './store'

ReactDOM.render(
    <MyProvider store={
     store}>
        <App />
    </MyProvider>, document.getElementById('root'));

4. 在组件里拿到 Consumer,谁用谁就加一个Consumer的标签

   <Consumer>
   		{
     
   			(context传过来的值)=>{
     
   				return <div>....</div>
   			}
   		}
   </Consumer>

5. Consumer 只是能在render进行渲染
   要想在在方法里拿到context， 使用context传来的数据的组件里写一个 contextType的静态属性
   static contextType=context
   static 就是定义静态的方法或者属性，这里相当于给Child定义了一个静态属性contextType，它的值是context
   设置后， 就可以用 this.context拿到context传过来的数据

component/father文件夹
    index.js

import React, {
      Component } from 'react'
import Node from './../node'
import {
      context } from './../myprovider'
import actionCreator from './actionCreator'

export default class Father extends Component {
     
    static contextType = context
    //因为在index.js中将store对象传进来了，context对象现在等同于store
    constructor(props, context) {
     
        super(props, context)
        console.log(context)
        this.state = {
     
            n: context.getState().father.n
        }
        context.subscribe(this.subscribe.bind(this))
    }
    subscribe() {
     
        console.log(this.state.n)
        this.setState({
     
            n: this.context.getState().father.n
        })
    }
    inc = () => {
     
        this.context.dispatch(actionCreator.incAction())
    }
    render() {
     
        return (
            <div>
                father  {
     this.state.n}
                <button onClick={
     this.inc}>+</button>
                <Node />
            </div>
        )
    }
}