需要掌握的Hooks之useReducer與useContext

這是我參與8月更文挑戰的第28天，活動詳情檢視： 8月更文挑戰

什麼是useReducer?

useReducer是一種讓函數元件儲存狀态的方式,是useState的替代方案.通過useReducer可以向子元件傳遞dispatch.

useReducer接受什麼?

接收的第一個參數是一個reducer函數,第二個參數是一個初始的狀态值.

userReducer傳回的是什麼?

傳回的是一個數組,數組的第一個元素是存儲的狀态,第二個元素是出發action的dispatch方法.

定義的reducer函數接收什麼,傳回什麼?

接收兩個參數,第一個是以前的狀态值,第二個是action對象

function reducer(state,action) {
    switch (action.type) {
        case 'increment':
            return state + 1
        default:
            return state;
    }
}
function App(props) {
    
    const [count, dispatch] = useReducer(reducer,0);
    return (
        <div>
            <span>{count}</span>
            <button onClick={() => dispatch({type: 'increment'})}>+1</button>
        </div>
    )
}
複制代碼      

什麼是useContext?

在跨元件層級擷取資料時簡化擷取資料的代碼。下面詳細講解下useContext的使用步驟。

1. 通過createContext()建立一個xxxContext.
2. 通過xxxContext.Provider包裹并将value傳遞給目标元件。
3. 目标元件通過useContext(xxxContext)擷取到value傳遞的值。

// 1. 建立一個xxxContext
const countContext = createContext();
// 2. 通過xxxContext.Provider 包裹傳遞value給目标元件
function App() {
    return (
        <countContext.Provider value={666}>
            <Foo />
        </countContext.Provider>
    )
}
// 3. 目标元件通過useContext(xxxContext)擷取value傳遞的值
function Foo() {
    const count = useContext(countContext)
    return (
        <div>
            {count}
        </div>
    )
}
複制代碼      

注意：useContext的參數必須是context對象本身，調用了useContext的元件會在context值變化時重新渲染。目前的context值由上層元件中距離目前元件最近的<xxxContext.Provider>的value prop決定。當Provider的value值發生變化時，它内部的所有消費元件都會被重新渲染，并且Provider及其内部consumer元件都不受制于shouldComponentUpdate函數，當consumer元件在其祖先元件退出更新的情況下也能更新。

參考文獻

• React中的createContext和useContext