在日常开发中，我们父子组件都是通过  props   来进行通信，如果遇到 跨级组件通信  那么我们就不好通过  props  来处理了。

怎么把组件 状态共享出去使用？

• Context

• Redux

• .....

通过  Context  来 达到组件数据共享

什么是  Context

数据共享，任何组件都可访问 Context 数据。

在  React  中，组件数据通过  prop   来达到 自上而下的传递数据，要想实现全局传递数据，那么可以使用  Context  .

注意：

Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用，因为这会使得组件的复用性变差。

创建  Context

在使用  Context  前提，必须创建它，可以为它单独创建一个文件来管理  Context

import React from 'react';

export const MyContext = React.createContext();

使用  Context

在使用  Context  时，它通常用在顶级组件 (父组件上)，它包裹的内部组件都可以享受到  state  的使用和修改。

通过  Context.Provider  来进行包裹，值通过  value = {}  传递。

子组件如何使用  Context  传递过来的值？

• 通过  useContext()   Hook  可以很方便的拿到对应的值.

// Context.js
import React from 'react';
export const MyContext = React.createContext();

import { useContext } from 'react';
import {MyContext} from '../Context/index'

const result = {
    code:200,
    title:'添加数据成功'
}
const Son = () => {
    const res = useContext(MyContext)
    return (
        <>
            <div>
                <h1>{res.code}</h1>
                <hr/>
                <h2>{res.title}</h2>
            </div>
        </>
    )
}

export default  () => {
    return (
        <MyContext.Provider value={result}>
            <div>
                <h1>前端社区</h1>
                <Son/>
            </div>
        </MyContext.Provider>
    )
}