沐鳴註冊_如何利用 React Hooks 管理全局狀態

示例代碼：https://github.com/AerospaceXu/hooks-soa

react 社區最火的全局狀態管理庫必定是 Redux，但是 Redux 本身就是為了大型管理數據而妥協設計的——這就會讓一些小一點的應用一旦用上 Redux 就變得複雜無比。

後來又有了 Mobx，它對於小型應用的狀態管理確實比 Redux 簡單不少。可是不得不說 Mobx+react 簡直就是一個繁瑣版本的 vue。

另外不管是 react-redux 還是 mobx，他們使用的時候都非常複雜。需要你去組件函數或是組件類上修修改改，我個人從審美上來說就不是很喜歡。

後來用了 Angular 之後，我就開始對 SOA 產生好感，ng 的 Service 與依賴注入我都覺得非常漂亮。

Service 是 Angular 的邏輯復用形式，並且解決了共享狀態的問題，那 React 的自定義 Hook 可以達到類似的效果嘛？

可以，並且會比 Angular 更簡潔。

自定義 Service

材料：useXxxx（自定義 hook）, createContext, useContext。

我們做一個最簡單的計數器吧：一個 button，一個 panel，button 用來增加，panel 用來展示。

const App: React.FC = () => {
  return (
    <div>
      <Button />
      <Panel />
    </div>
  );
};

然後我們來定義我們的 Service：

// services/global.service.ts
interface State {
  count: number;
  handleAdd: () => void;
}

export const GlobalService = createContext<State>(null);

我們選擇讓一個 Context 成為一個 Service，這是因為我們可以利用 Context 的特性來進行狀態共享。

然後我們創建一個自定義 Hook，並且在 Context.provider 中傳入該 Root Service：

// services/global.service.ts
export const useRootGlobalService = () => {
  const [count, setCount] = useState<number>(0);
  const handleAdd = useCallback(() => {
    setCount((n) => n + 1);
  }, []);

  return {
    count,
    handleAdd,
  };
};

接着我們再創建一個自定義 Hook，讓我們可以隨時拿到該 Service：

// services/global.service.ts
export const useGlobalService = () => useContext(GlobalService);

接着我們就可以運用了

// App.tsx
import { GlobalService, useRooGlobalService } from './services/global.service';

const App: React.FC = () => {
  return (
    <GlobalService.Provider value={useRooGlobalService()}>
      <div>
        <Button />
        <Panel />
      </div>
    </GlobalService.Provider>
  );
};

// Button.tsx
import { useGlobalService } from '../services/global.service';

const Button: React.FC = () => {
  const { handleAdd } = useGlobalService();
  return <button onClick={() => handleAdd()}>+</button>;
};

// Panel.tsx
import { useGlobalService } from '../services/global.service';

const Panel: React.FC = () => {
  const { count } = useGlobalService();
  return <h2>{count}</h2>;
};

（完）

作者：幾乎一米八的徐某某

出處：Aero Blog (https://www.cnblogs.com/xhyccc/)

站長推薦

1.雲服務推薦: 國內主流雲服務商，各類雲產品的最新活動，優惠券領取。地址：阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台，如果你有流量，可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/10059