Hooks - useContext

useContext 解决的是父子组件传值的问题，它可以跨越组件层级去传递数据

注意 useContext 和 redux 的作用是不同的，一个解决的是组件之间值传递的问题，一个是应用中统一管理状态的问题

import React, { createContext, useState, useContext } from 'react';

const CountContext = createContext();

function Count() {
    const count = useContext(CountContext);
    return (
        <p>{count}</p>
    )
}

function Example() {
    const [count, setCount] = useState(0);
    return(
        <div>
            <button onClick={() => setCount(count + 1)}>Click me</button>
            
            <CountContext.Provider value={count}>
                <Count ></Count>
            </CountContext.Provider>
        </div>
    )
}

export default Example;

• 首先通过 createCount 创建一个 context
• 通过 context.provider 把子组件包裹起来，设置 value，value 代表要传递的值
• 在子组件里面通过 useContext 拿到设置的 value