前言

在沒有useContext的情況下，如果我們的元件必須傳遞一個值到很下面的原件，那麼我們需要一層一層的傳遞下去

A -> B -> C -> D

而使用了useContext只要在上層覆蓋後，就可以在子元件直接把值取出

A(useContext, Provider) -- B -- C --> D (Consumer)

Provider

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// App.js
import { createContext } from 'react';
import { useState } from "react";


export const SampleContext = createContext() 

const App = () => {
    const [somevalue, setSomevalue] = useState(true);
    
    return (
        <>
            <SampleContext.Provider value={somevalue}>
              <MyComponent />
            </SampleContext.Provider>
        </>
    );
}

export { App, SampleContext }

1
2
3
4
5
6
7
8

// MyComponent.js
const MyComponent = () => {
    return (
        <InnerComponent />
    );
}

export default MyComponent

Consumer

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// InnerComponent.js
import { SampleContext } from "../App";

const InnerComponent = () => {
    return (
        <SampleContext.Consumer>
            {somevalue => somevalue === true ? "True!" : "False!"}
        </SampleContext.Consumer>
    );
}

export default InnerComponent

可以使用useContext再簡化

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// InnerComponent.js
import { SampleContext } from "../App";
import { useContext } from "react";

const InnerComponent = () => {
    const somevalue = useContext(SampleContext);
    return (
        <>
            {somevalue === true ? "True!" : "False!"}
        </>
    );
}

export default InnerComponent

參考資料