useReducer代替Redux小案例-1（七）

使用useContext和useReducer是能夠實現相似Redux的效果，而且一些簡單的我的項目，徹底能夠用下面的方案代替Redux，這種作法要比Redux簡單一些。由於useContext和useReducer在前兩節課已經學習過了，因此咱們這節課把精力就放在如何模擬出Redux的效果。若是你目前還不能掌握基本的語法，能夠再複習一下前兩節的知識點。

理論上的可行性

咱們先從理論層面看看替代Redux的可能性，其實若是你對兩個函數有所瞭解，只要咱們巧妙的結合，這種替代方案是徹底可行的。

useContext：可訪問全局狀態，避免一層層的傳遞狀態。這符合Redux其中的一項規則，就是狀態全局化，並能統一管理。

useReducer：經過action的傳遞，更新複雜邏輯的狀態，主要是能夠實現相似Redux中的Reducer部分，實現業務邏輯的可行性。

通過咱們在理論上的分析是徹底可行的，接下來咱們就用一個簡單實例來看一下具體的實現方法。那這節課先實現useContext部分（也就是狀態共享），下節再繼續講解useReducer部分（控制業務邏輯）。

編寫基本UI組件

既然是一個實例，就須要有些界面的東西，小夥伴們不要覺的煩。在/src目錄下新建一個文件夾Example6，有了文件夾後，在文件夾下面創建一個showArea.js文件。代碼以下：

import React from 'react';
function ShowArea(){
   
    return (<div style={{color:'blue'}}>字體顏色爲blue</div>)

}
export default ShowArea

顯示區域寫完後，新建一個Buttons.js文件，用來編寫按鈕，這個是兩個按鈕，一個紅色一個黃色。先不寫其餘任何業務邏輯。

import React from 'react';

function Buttons(){
    return (
        <div>
            <button>紅色</button>
            <button>黃色</button>
        </div>
    )
}

export default Buttons

而後再編寫一個組合他們的Example6.js組件，引入兩個新編寫的組件ShowArea和Buttons，並用<div>標籤給包裹起來。

import React, { useReducer } from 'react';
import ShowArea from './ShowArea';
import Buttons from './Buttons';


function Example6(){
    return (
        <div>
                <ShowArea />
                <Buttons />
        </div>
    )
}

export default Example6

這步作完，須要到/src目錄下的index.js中引入一下Example6.js文件，引入後React才能正確渲染出剛寫的UI組件。

import React from 'react';
import ReactDOM from 'react-dom';
import Example from './Example6/Example6'

ReactDOM.render(<Example />, document.getElementById('root'));

作完這步能夠簡單的預覽一下UI效果，雖然很醜，可是隻要能知足學習需求就能夠了。咱們雖然都是前端，可是在學習時不必追求漂亮的頁面，關鍵時把知識點弄明白。咱們寫這麼多文件，也就是要爲接下來的知識點服務，其實這些組件都是襯托罷了。

編寫顏色共享組件color.js

有了UI組件後，就能夠寫一些業務邏輯了，這節課咱們先實現狀態共享，這個就是利用useContext。創建一個color.js文件，而後寫入下面的代碼。

import React, { createContext } from 'react';

export const ColorContext = createContext({})

export const Color = props=>{
    return (
        <ColorContext.Provider value={{color:"blue"}}>
            {props.children}
        </ColorContext.Provider>
    )
}

代碼中引入了createContext用來建立共享上下文ColorContext組件，而後咱們要用{props.children}來顯示對應的子組件。詳細解釋我在視頻中講解吧。

有了這個組件後，咱們就能夠把Example6.js進行改寫，讓她能夠共享狀態。

import React, { useReducer } from 'react';
import ShowArea from './ShowArea';
import Buttons from './Buttons';
import { Color } from './color';   //引入Color組件

function Example6(){
    return (
        <div>
            <Color>
                <ShowArea />
                <Buttons />
            </Color>
            
        </div>
    )
}

export default Example6

而後再改寫showArea.js文件，咱們會引入useContext和在color.js中聲明的ColorContext，讓組件能夠接收全局變量。

import React , { useContext } from 'react';
import { ColorContext } from './color';

function ShowArea(){
    const {color} = useContext(ColorContext)
    return (<div style={{color:color}}>字體顏色爲{color}</div>)

}

export default ShowArea

這時候就經過useContext實現了狀態的共享，能夠到瀏覽器中看一下效果。而後咱們下節課再實現複雜邏輯狀態的變化。

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