全局状态管理之<自定义Hook>

我们还可以使用自定义 Hook 进行数据通信

点击这里预览：https://mcx2020.github.io/ownhook-react/index.html
点击这里查看源码：https://github.com/mcx2020/ownhook-react

一、创建 useStore Hook

这里作为我们的数据中心管家

// useStore.js
import {useState,createContext} from "react";
const store = {
  allTime:100
}
function useStore(){
  let [restTime, setRestTime] = useState(store.allTime)
  const minusTime = (time)=>{
    if(restTime<=0){
      alert('时间用完了')
      return
    }else if(time>restTime){
      alert('时间不够了')
      return
    }
    setRestTime(restTime-time)
  }
  return {restTime,minusTime}
}
const StoreContext = createContext(null)
export {useStore,StoreContext}

二、引入 useStore Hook

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {useStore,StoreContext} from "./stores/useStore";
import Text from './components/text'
import Father1 from "./components/father1";
import Father2 from "./components/father2";
function App() {
  return (
    <div className='app'>
      <Text />
      <StoreContext.Provider value={useStore()}>
        <div className='test-wrapper'>
          <Father1 />
          <Father2 />
        </div>
      </StoreContext.Provider>
    </div>
  )
}

三、总结一下

在这里，我们通过 useStore 这个函数在内部维护了 store，然后 return 出修改 store 的 API

• 这些 API 通过 Context 的方式传递出去
• 组件通过 Context 拿到 这些 API 并使用它们
• 当 store 的数据修改时，Context 的 value 相继变化，于是主动触发渲染更新 UI

「@浪里淘沙的小法师」