react 跨组件传值方式 context上下文 redux (白话总结)

跨组件传值方式

方式一:context上下文

使用步骤:
    1.创建文件夹context,里面创建index.js写一个组件

    2.创建上下文对象以及(对象的方式创建)他的生产者和消费者
            2-1.引进去上下文对象createContext
            2-2.创建上下文对象

  let context=createContext()

            2-3.创建生产者和消费者   

  let {Provider,Consumer}=context;

          2-4.this.props.children 表示所有的子元素
                组件里写{this.props.children}
          2-5暴露出去

export {Index,Consumer}

    3.我们需要传递数据  那么就把当前这个上下文对象的组件变成所有组件的老大
    在整体的index.js中设置  
            3-1.引用并且解构出上下文对象的组件

 import {Index} from "./context/index.js"

         3-2.让上下文对象变成所有组件的老大,在整体的index里面把App包裹起来

                <Index>
                    <App />
                </Index>,

 4.生产数据
            4-1.生产数据

                this.props.children 表示所有的子元素

                <Provider value={
  {text:"数据1",num:666}}>

                    {/* 4.this.props.children 表示所有的子元素 */}
                    {this.props.children}

                </Provider>

    总:以上全写context文件夹下的index.js文件中            

    5.消费数据(使用数据)
        说明:谁使用数据,就在谁中设置
        5-1.引用消费者