useContext 讓父子組件傳值更簡單（五）

有了useState和useEffect已經可以實現大部分的業務邏輯了，但是React Hooks中還是有很多好用的Hooks函數的，比如useContext和useReducer。

在用類聲明組件時，父子組件的傳值是通過組件屬性和props進行的，那現在使用方法(Function)來聲明組件，已經沒有了constructor構造函數也就沒有了props的接收，那父子組件的傳值就成了一個問題。React Hooks 為我們准備了useContext。這節課就學習一下useContext，它可以幫助我們跨越組件層級直接傳遞變量，實現共享。需要注意的是useContext和redux的作用是不同的，一個解決的是組件之間值傳遞的問題，一個是應用中統一管理狀態的問題，但通過和useReducer的配合使用，可以實現類似Redux的作用。

這就好比玩游戲時有很多英雄，英雄的最總目的都是贏得比賽，但是作用不同，有負責輸出的，有負責抗傷害的，有負責治療的。

Context的作用就是對它所包含的組件樹提供全局共享數據的一種技術。

createContext 函數創建context

直接在src目錄下新建一個文件Example4.js,然后拷貝Example.js里的代碼，並進行修改，刪除路由部分和副作用的代碼，只留計數器的核心代碼就可以了。

import React, { useState , useEffect } from 'react';

function Example4(){
    const [ count , setCount ] = useState(0);
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>click me</button>
        </div>
    )
}
export default Example4;

然后修改一下index.js讓它渲染這個Example4.js組件，修改的代碼如下。

import React from 'react';
import ReactDOM from 'react-dom';
import Example from './Example4'
ReactDOM.render(<Example />, document.getElementById('root'));

之后在Example4.js中引入createContext函數，並使用得到一個組件，然后在return方法中進行使用。先看代碼，然后我再解釋。

import React, { useState , createContext } from 'react';
//===關鍵代碼
const CountContext = createContext()

function Example4(){
    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 Example4;

這段代碼就相當於把count變量允許跨層級實現傳遞和使用了（也就是實現了上下文），當父組件的count變量發生變化時，子組件也會發生變化。接下來我們就看看一個React Hooks的組件如何接收到這個變量。

useContext 接收上下文變量

已經有了上下文變量，剩下的就時如何接收了，接收這個直接使用useContext就可以，但是在使用前需要新進行引入useContext（不引入是沒辦法使用的）。

import React, { useState , createContext , useContext } from 'react';

引入后寫一個Counter組件，只是顯示上下文中的count變量代碼如下：

function Counter(){
    const count = useContext(CountContext)  //一句話就可以得到count
    return (<h2>{count}</h2>)
}

得到后就可以顯示出來了，但是要記得在<CountContext.Provider>的閉合標簽中,代碼如下。

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

其實useContext的用法比以前時簡單很多，既然簡單，就沒必要講解的那么難，希望小伙伴這節課都能get到知識點，完善自己的知識體系。

轉自：https://jspang.com/posts/2019/08/12/react-hooks.html