数据传递，状态共享，React Hook - useContext

作用：数据传递，状态共享(不需要再通过props一层层传递)。

用途： 子组件与子组件之间共享，父组件与子组件的子组件共享，换句话说，只要是同一个父组件，不管嵌套几层，或是两个子组件有没有交集或嵌套，只要顶层父组件为同一个，都可共享。（该方法只推荐小型应用或小场景，大型应用场景推荐使用Redux进行状态管理，使用起来更方便，详情可见之前文章）

原理：将需要共享的数据或状态在子组件的顶层组件(需要共享数据子组件的的最上层父组件)通过Context.Provider将数据注册进去，下层组件（不管是几层）都可通过Hook-useContext拿到数据进行修改。

假设：Context为顶层父组件，Children为其中一个子组件，ChildrenTwo为另一个子组件。

话不多说，直接上代码：

1. 创建Context对象并导出。

// MyContext.js
import React from "react";

const MyContext = React.createContext();

export default MyContext;

2. 将Context注入共享组件的顶层父组件，假设Context.jsx为实际需要注册的顶层组件，通过MyContext.Provider将组件包裹，将需要的共享数据或状态放入MyContext.Provider的value属性中，代码如下：

import React, { useState } from 'react'
import MyContext from '../../method/MyContext'
import Children from './Children/Children'
import ChildrenTwo from './ChildrenTwo/ChildrenTwo'
export default function Context() {

    let Mydata = {
        count:1,
        flag:false
    }
    const [data,setData] = useState(Mydata);
    
    return (
        <MyContext.Provider value={{data,setData}}>
            <div>当前共享状态：{data.count}</div>
            <Children />
            <ChildrenTwo />
        </MyContext.Provider>
    )
}

3. 在子组件中使用useContext拿到值，useContext的参数必须为Context对象本身，也就是MyContext。

  Children组件代码：

import React, { useContext } from 'react'
import MyContext from '../../../method/MyContext';

export default function Children() {
    const {data,setData} = useContext(MyContext);

    const setOne = () => {
        setData({...data,count:2})
    }
    return (
        <div onClick={setOne}>
            <br />
            <br />
            <br />
            <br />
            <br />
            count:{data.count} flag:{JSON.stringify(data.flag)}
        </div>
    )
}

  ChildrenTwo组件代码：

import React, { useContext } from 'react'
import MyContext from '../../../method/MyContext'

export default function childrenTwo() {
    const {data,setData} = useContext(MyContext);

    const setMyContext = () => {
        setData({...data,flag:true});
    }
    return (
        <div onClick={setMyContext}>
            <br />
            <br />
            <br />
            <br />
            <br />
            count:{data.count} flag:{JSON.stringify(data.flag)}
        </div>
    )
}

页面初始化为：

点击Children组建后，改变count的值，如图：

如图所示，两个字组件包括父组件的count值都同步更新了。

下面我们点击ChildrenTwo组件来改变flag状态，点击ChildrenTwo组件，如图：

flag的状态也都同步更新了。

over！over！