Component parent element to pass value grandchildren (Context) properties

introduction

React component in our development, when you want a parent component to their children and grandchildren components of traditional values, you can use the propsproperty, but each of its sub-components, data needs to be transmitted down the coupling caused by such data, it provides a React official document contextcharacteristics to solve this problem.

Sons communication between components

We look at React, the communication mechanism of parent-child communication components, assemblies and his son is passing data through props:

1. When the parent component data transfer (state) of the sub-assembly, when the call is passed by the parameter sub-assembly to sub-assembly, the sub-assembly is received over this.props;
2. If you change the parent sub-assembly properties of the component, the sub-assembly is to be passed by the method defined in the parent component, subassembly call change;
3. If you want some status change parent component sub-assemblies, marked by ref, you can get all the information sub-components, methods, and thus the value of calls subassemblies;

However, if the level of a lot of it, if need be passed in layers of more than props? The answer is no, React of advanced (senior) pointed out the context, elegant solution to this problem.

Okay, let's introduce this featureContext

We know that in JS context refers to the execution context function when the function is invoked, this point who, who is the current execution context;

1. What react in context is it? Official documents given by:
   • Context provides a method for communicating data through a component tree, thereby avoiding the transmission of a manual props each attribute level.

What documents did not give a specific context in the end is, but tell us context can do, that is to say, if we do not want to transfer data props to achieve layer by layer component tree through, you can use context to achieve cross-level data transfer!

Context How to use it?

context api given three concepts: React.createContext (), Provider, Consumer;

1. React.createContext()

这个方法用来创建context对象，并包含Provider、Consumer两个组件 <Provider />、<Consumer />

const {Provider, Consumer} = React.createContext();

1. Provider

数据的生产者，通过value属性接收存储的公共状态，来传递给子组件或后代组件

eg:

<Provider value={/* some value */}>

1. Consumer

数据的消费者，通过订阅Provider传入的context的值，来实时更新当前组件的状态

eg: 

<Consumer>
  {value => /* render something based on the context value */}
</Consumer>

It is worth mentioning that whenever the value Provider changed, as all future generations Provider Consumers will re-render
props unidirectional data flow:

If you think Props cumbersome data transfer, you can use context, cross-component data transfer

Then the outermost component by wrapping producers Provider component, and stores the value in the shared data, of course, can be of any data type. After the band will need to share data component data acquisition can be carried out by Consumer

Code demonstrates

import React from 'react'
import ReactDOM from 'react-dom'

// 创建一个 textcont 特性的
const {Provider,Consumer} = React.createContext('顶顶顶')

class Person extends React.Component{
    constructor(props){
        super(props)


        this.state = {
            color : 'red'
        }
    }


    render(){
        return (
                 <Provider value={this.state.color}>
                        <h1>我是父组件</h1>
                        <Son></Son>
                </Provider>
        );
    }
}



class Son extends Person{
    render(){
        return <div>
            <h3>我是子组件</h3>
            <Son1></Son1>
        </div>
    }
}



class Son1 extends Son{
    render(){
        return (
            <Consumer>
                {
                    (color) => <div>
                        <h6 style={{color}}>我是孙子组件-----{color}</h6>
                    </div>
                }
            </Consumer>
        );
        
    }
}



ReactDOM.render(<div>
    <Person></Person>
</div>,document.getElementById('app'))

Reference works Source:
https://segmentfault.com/a/1190000017758300