Hook

react-hook的出现让我们对无状态组件又有了一些新的认知,特别是它还提供各种各样的hook,比如useReducer,useRef,useEffect,useMemo,useCallback,useState,useContext....

在开发中,大家肯定用过Redux吧,这玩意就是一个状态管理容器,让我们很容易的就可以实现数据共享;那么我们不用redux,能不能实现状态共享呢?可能在hook出现之前,不用第三方的库(redux,mobx等)是比较难解决的一个问题。现在hook的闪亮登场,让我们很容易就能解决这个问题。

现在我们就用useReducer，useContext，createContext实现一下类redux的状态管理容器。

提示:前提是老哥们要知道这三个Api的用法,不懂的大哥自行补脑哈

基于Hook实现的状态管理容器

第一,在根目录建一个文件hookRedux/index.js

import React, { createContext, useReducer } from 'react'

export const HookContext = createContext()

function reducer(state = { footer: '一只脚' }, action) {

    switch (action.type) {

        case 'changeData': return {
            ...state,
            footer: '两只脚'
        }

        default: return state

    }

}

function HookRedux(props) {

    let [data, dispatch] = useReducer(reducer,{ footer: '一只脚' })

    return (
        <div>
            <HookContext.Provider value={{ data, dispatch }}>
                {props.children}
            </HookContext.Provider>
        </div>
    )

}

export default HookRedux
复制代码

第二,把刚才写的HookRedux组件,套在App组件上,再在根目录建一个文件component/footer.js,并引进来使用

import React from 'react';
import HookRedux from './hookRedux';
import Footer from './component/footer';

function App() {
  return (
    <HookRedux>
      <div className="App">
        <header className="App-header">
          <Footer></Footer>
        </header>
      </div>
    </HookRedux>
  );
}

export default App;
复制代码

三,在HookRedux组件下的Footer组件就可以拿到HookRedux里面传下来的数据了

import React, { useContext } from 'react'

import { HookContext } from '../hookRedux/index'

function Footer(props) {

    let { data, dispatch } = useContext(HookContext)

    return (
        <div>
            <div>{data.footer}</div>
            <button onClick={()=>{dispatch({type:'changeData',footer:"改成两只脚"})}}>改成两只脚</button>
        </div>
    )

}

export default Footer
复制代码

通过三步,我们就可以实现一个类redux的状态管理容器,就是这么so easy!