React hooks之useContext父子组件传值

学了useState和useEffect已经可以实现大部分的业务逻辑了，但是React Hooks中还是有很多好用的Hooks函数的，比如useContext和useReducer。

在用类声明组件时，父子组件的传值是通过组件属性和props进行的，那现在使用方法(Function)来声明组件，已经没有了constructor构造函数也就没有了props的接收，那父子组件的传值就成了一个问题。React Hooks 为我们准备了useContext。它可以帮助我们跨越组件层级直接传递变量，实现共享。需要注意的是useContext和redux的作用是不同的，一个解决的是组件之间值传递的问题，一个是应用中统一管理状态的问题，但通过和useReducer的配合使用，可以实现类似Redux的作用。

import React, { useState ,createContext } from 'react';
//重点代码
const CountContext = createContext()

function Counter(){
    const [ count , setCount ] = useState(0);
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>click me</button>
            {/*重点代码*/}
            <CountContext.Provider value={count}>
            </CountContext.Provider>
        </div>
    )
}
export default Counter;

这段代码就相当于把count变量允许跨层级实现传递和使用了（也就是实现了上下文），当父组件的count变量发生变化时，子组件也会发生变化。下面我们就看看一个React Hooks的组件如何接收到这个变量

useContext接收上下文变量

已经有了上下文变量，剩下的就时如何接收了，接收这个直接使用useContext就可以，但是在使用前需要新进行引入useContext

import React, { useState , createContext , useContext } from 'react';
function Child(){
    const count = useContext(CountContext)  //得到count
    return (<h2>{count}</h2>)
}

要记得在<CountContext.Provider>的闭合标签中,代码如下

<CountContext.Provider value={count}>
    <Counter />
</CountContext.Provider>