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