Hook改變的React Component寫法思路(3) - useContext

首先我們回憶一下React Context API的用法（生産者消費者模式）。

建立context對象：

// context初始值
const INITIAL_VALUE = ‘’;
const MyContext = React.createContext(INITIAL_VALUE);
           

劃定context使用的範圍，管理它的值：

function App() {
    return (
        <MyContext.Provider value=“context value”>
            <ConsumeComponent />
        </MyContext.Provider>
    );
}
           

擷取context的值：

function ConsumeComponent() {
    return (
        <MyContext.Consumer>
            {contextValue => (
                <div>
                    <MyComponent value={contextValue} />
                    <div>{contextValue}</div>
                </div>
            )}
        </MyContext.Consumer>
    );
}
           

可以看到，使用Hook之前，消費這個context API是使用render props的方式。那如果這個context是一個原始資料，并不是用來直接顯示的時候，就需要繁瑣的特殊處理（比如傳入到下一層component處理），讓人不免尴尬。

有了useContext hook之後，這就不再是個問題了。我們隻需要修改消費者那一步：

function ConsumeComponent() {
    const contextValue = useContext(MyContext);
    return (
        <div>
            <MyComponent value={contextValue} />
            <div>{contextValue}</div>
        </div>
    );
}
           

context的值可以直接指派給變量，然後想處理或者渲染都可以。