React从0开始（九）：React Hooks之useContext

这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战

老样子，来复习一下上一篇文章的内容：useReducer。useReducer首先通过自定义Reducer函数，并初始化State内容，最后分别将Reducer函数、初始State作为useReducer的第一、第二个参数传入，最终返回一个数组。数组内含两个元素，第一个元素是当前State，第二个元素则是可以派发的setReducer。

const [state, setReducer] = useReducer(reducer);

另外，如果下一个State依赖于上一个State的内容，我们还可以在setReducer上做文章：

const Reducer = (state,action) => { 
    switch(action.type){ 
        case "one" : return { content:state.count+1 } 
        case "two" : return { content:state.count+2 } 
        default : return { content:state.count+3 } 
    } 
}
<button onClick={ ()=>{ setReducer( state, {type:"one"} ) } }>Click Me To Add 1</button>

回到这里，我们一起来看一下今天的新内容：useContext

一、useContext的使用

useContext接收一个由React.creatContext生成的Context的实例对象，最后返回当前的Context，当组件通过useContext获取到Context后，就不需要Consumer组件去获取Context的内容了，只需要通过getContext.value即可获取Context对象中的value属性

//父组件
import React,{useContext} from 'react';
import Context from './Context.js';
const Parent = () => {
    return (
        <Context.Provider value={ {name:"Tony"} }>
            <Children />
        </Context.Provider>
    )
}
//子组件
import React,{useContext} from 'react';
import Context from './Context.js';
const Children = () => {
    const contextObj = useContext(Context);
    return (
        <div>
            {
                contextObj.name
            }
        </div>
    )
}

我们可以看出，使用了useContext钩子即利用Context解决了Props层层传递的复杂，又省去了Consumer组件下对Context的使用这一步骤。但是要注意，在组件中所进行的useContext，得到的Context是最靠近这一组件的Provider提供的Context(即最接近该组件最近一层的Provider)

二、useContext的特点

1. useContext相当于省去了使用Context.Consumer包裹住React元素这一步骤，可以直接以代码块中访问对象元素的方式去获取内容
2. 当父组件即Context.Provider分享的value发生变化时，也会导致子组件重新渲染，并且重新接收来自Context.Provider的value
3. 使用useContext依然需要Context.Provider包裹住子组件
4. useContext获取到的Context是离该子组件最近的Context.Provider所提供的Context