react 跨组件传值 context与redux的使用

react中组件传递参数是通过props一层一层的进行传递的 数据也是单向传递的 如果出现了跨层级的关系 要是按照传统的方式传参 太麻烦了

方式1 context上下文对象

就是react中为了解决跨层级传值出现的一个技术 降低了数据传递的复杂度 传递起来更加的高效

上下文对象 有两个内容

Provider 生产者 ----- 》 创建要传递的数据

Consumer 消费者 ------ 》 使用传递的数据

使用:

1.使用上下文对象 我们可以创建一个文件夹用来容纳他 并且创建一个文件写一个组件

import React, { Component } from 'react'
// 建议组件名大写
export default class Index extends Component {
    render() {
        return (
            <div>
                
            </div>
        )
    }
}
​

2.创建出上下文对象以及他的生产者和消费者

// 1.引用进创建上下文对象的createContext
import React, { Component,createContext } from 'react'
// 2.创建上下文对象
let context=createContext()
// 3.创建生产者和消费者
let {Provider,Consumer}=context;
​
​
// 建议组件名大写
class Index extends Component {
    render() {
        return (
            <div>
                {/* 4.this.props.children 表示所有的子元素 */}
                {this.props.children}
            </div>
        )
    }
}
// 5.修改暴漏  需要暴露当前组件与 消费者
export {Index,Consumer}

3.我们需要传递数据 那么就把当前这个上下文对象的组件变成所有组件的老大

在index.js中设置

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// 6.引用并且解构出上下文对象的组件
import {Index} from "./context/index.js"
import App from './components/ye.jsx';
import reportWebVitals from './reportWebVitals';
​
ReactDOM.render(
  // 7.让上下文对象变成所有组件的老大
  <Index>
    <App />
  </Index>,
  document.getElementById('root')
);
​
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
​

4.生产数据

// 1.引用进创建上下文对象的createContext
import React, { Component,createContext } from 'react'
// 2.创建上下文对象
let context=createContext()
// 3.创建生产者和消费者
let {Provider,Consumer}=context;
​
​
// 建议组件名大写
class Index extends Component {
    render() {
        return (
            &