React中非父子通信用Context如何实现？

React中非父子通信如何实现呢？可以使用Context。当然我们也可以使用redux，但是redux的体积比较大，而且使用起来比较麻烦（以后讲解），所以我们先可以使用Context。当然我们也可以使用事件总线。的方式来实现非父子通信。
React中非父子通信-Context

Context的使用

我们先看一个例子：

import React,{Component} from "react";
import Home  from "./Home";
import ThemeContext from "./context/theme-context";
import UserContext from "./context/user-context";
import Profile from './Profile'

export class App extends Component{
    constructor(){
        super()
         
        this.state = {
            info:{name:'kobe',age:30}
        }
    }
    
    render(){
        const { info } = this.state
        console.log(info,'info');
        return (
            <div>
                <h2>App</h2>
                {/* 1.给Home传递参数 */}
                {/* 
                    <Home name="why" age={18}></Home>
                    <Home name={info.name} age={info.age}></Home>
                    <Home {...info}></Home>
                */}
                
                {/* 2.普通的Home */}
                {/* 第二部操作：通过ThemeContext中Provider中value属性为后代提供数据 */}
                <UserContext.Provider value={{nickname:"kobe",age:30}}>
                    <ThemeContext.Provider value={{color:"red",size:"30"}}>
                        <Home {...info} ></Home>
                    </ThemeContext.Provider>
                </UserContext.Provider>
            </div>
        )
    }
}

export default App

上面代码中，我们使用了ThemeContext和UserContext两个Context，分别用来传递两个参数。ThemeContext和UserContext都是对象，分别用来传递两个参数。ThemeContext和UserContext都是对象，分别用来传递两个参数。ThemeContext和UserContext都是对象，分别用来传递两个参数。接着让我们看一下theme-context.js和user-context.js的实现：

theme-context.js

先看代码，如下所示：

import React from "react";
// 1.创建一个Context
const ThemeContext = React.createContext({color:"blue",size:10})
export default ThemeContext

上面的代码中，我们创建了一个ThemeContext，然后导出。接着我们看一下user-context.js的实现：

user-context.js

import React from "react";

// 1.创建一个Context
const UserContext = React.createContext()

export default UserContext

上面的代码中，我们创建了一个UserContext，然后导出。接着我们看一下Home组件的实现：

Home组件

import React,{Component} from "react";
import HomeBanner from "./HomeBanner";
import HomeInfo from "./HomeInfo";

export class Home extends Component{
    render(){
        const { name,age } = this.props
         
        return (
            <div>
                <h2>Home:{name}-{age}</h2>
                <HomeInfo></HomeInfo>
                <HomeBanner></HomeBanner>
            </div>
        )
    }
}

export default Home

上面的代码h2标签内会显示<h2>Home:kobe-30</h2>,这里的name和age都是父元素传递过来的。
上面组件中我们还使用了HomeBanner和HomeInfo两个组件。接着我们看一下HomeBanner组件的实现：

HomeBanner组件

import ThemeContext from "./context/theme-context";
function HomeBanner(){
    return <div>
        {/* 函数组件中使用Context共享的数据 */}
        <ThemeContext.Consumer>
            {
                value => {
                    return <h2>Banner theme:{value.color}</h2>
                }
            }
        </ThemeContext.Consumer>
    </div>
}

export default HomeBanner

上面的代码中，我们使用了ThemeContext.Consumer来获取ThemeContext中的数据。
那这里我们再思考一个问题？页面会显示Banner theme:blue 还是 Banner theme:red呢？

答案是：Banner theme:red。因为我们在App组件中使用了ThemeContext.Provider来提供数据，所以页面会显示Banner theme:red。

接着我们看一下HomeInfo组件的实现：

HomeInfo组件

import React,{Component} from "react";
import ThemeContext from "./context/theme-context";
import UserContext from "./context/user-context";

export class HomeInfo extends Component{
    render(){
        // 4.第四步操作：获取数据，并且使用数据
        console.log(this.context)
        
        return (
            <div>
                <h2>HomeInfo:{this.context.color}</h2>
                <UserContext.Consumer>
                    {
                        value => {
                            return <h2>Info User:{value.nickname}</h2>
                        }
                    }
                </UserContext.Consumer>
            </div> 
        )
    }
}

// 3.第三步操作：设置组件的contextType为某一个Context
HomeInfo.contextType = ThemeContext
export default HomeInfo

上面的代码中，我们使用了HomeInfo.contextType = ThemeContext来设置组件的contextType为某一个Context。所以我们就可以在使用this.context来获取ThemeContext中的数据。
当然我们也可以使用<UserContext.Consumer>来获取UserContext中的数据。这里提供了两种方式，一种是函数组件，一种是类组件。
这里的Info User:kobe就是我们在App组件中通过UserContext.Provider传递过来的数据。HomeInfo:red就是我们在App组件中通过ThemeContext.Provider传递过来的数据。

本节小结

本节我们学习了Context的使用。我们可以使用Context来实现非父子通信。Context的使用非常简单，但是使用Context需要注意一些问题。另外我们也提供了两种方式来获取Context中的数据，一种是函数组件，一种是类组件。最后我们附上实现的页面效果：

感谢大家观看，我们下次再见