小技巧：使用useContext和useReducer构建小型redux

对于两个子组件间的通信，相信我们开发中并不少见，基于我们都不怎么喜欢redux的坚持…...其实我一直在用团队老大此前写的globalBus持续真香，我在上一篇文章也有讲到那玩意的原理和实现，但是老大说现在可以不用啦，新版hooks两个api联用，更香，于是我简单的实践了一番，发现…真香。

首先你需要在两个子组件之上的一层架设你的context chilFirst和ChildSecond是我建立的两个组件，我们将会从first组件发dipatch，在second组件展示变化的数据，这个场景开发中经常使用。

首先我们要建立context, 我们需要一个初始状态和一个变更state的状态管理器，咦，这怎么这么像…..

// Context.js
export const defaultState = {
    value: 0
}

export function reducer(state, action) {
    switch(action.type) {
        case 'ADD_NUM':
            return { ...state, value: state.value + 1 };
        case 'REDUCE_NUM':
            return { ...state, value: state.value - 1 };
        default: 
            throw new Error();
    }
}

Content.js ，这里我们需要显性声明Context.Provider 把数据传给包裹组件，这里轮到强大的useReducer出场了，按照官方要求，你需要把reducer(我们此前定义)和默认状态传入https://reactjs.org/docs/hooks-reference.html#usereducer，(这里小小利用hooks组件的状态，当我们向上传递修改后，其包裹的组件的引用props更新也会重新获得新的props)

// Content.js
import React, { useReducer, createContext } from 'react'
import { ChildFirst } from './ChildFirst'
import { ChildSecond } from './ChildSecond'
import { reducer, defaultState } from './reducer'

export const Context = createContext(null)

export function Content() {
    const [state, dispatch] = useReducer(reducer, defaultState)

    return (
        <Context.Provider value={{state, dispatch: dispatch}}>
            <ChildFirst/>
            <ChildSecond/>
        </Context.Provider>
    )
}

组件First ，在这个组件我们dispatch发事件试试

// ChildFirst.js
import React, {useContext} from 'react'
import {Context} from './content'

export function ChildFirst() {
    const AppContext = useContext(Context)

    return (
        <div>
            <button onClick={ 
                 () => {
                AppContext.dispatch({
                    type: "ADD_NUM",
                    payload: {}
                  })
                }
            }>addNum</button>
            <button onClick={
                () => {
                AppContext.dispatch({
                    type: "REDUCE_NUM",
                    payload: {}
                    })  
                }
            }>reduceNum</button>
        </div>
    )
}

组件Second

// ChildSecond.js
import React, {useContext} from 'react'
import {Context} from './content'

export function ChildSecond() {
    const AppContext = useContext(Context)

    return (
        <div>
            {AppContext.state.value + 's'}
        </div>
    )
}

DEMO

我们发现在局部地区架设局部组件需要公用的context，不仅有利于我们组织结构的解耦，也可以避免我们一开始就要引入redux这种全局状态库或者中途引入带来的成本。本身作为一个应用需要公共管理的状态其实并不多，再加之团队开发素质不一管理不善的话，就很容易滥用redux，极大拖慢了整个应用的速度，所以学会这个技巧，可以优化组件间的状态管理和应用的轻便性能。

最后编辑于：2020.01.11 11:05:32