自從 React16 版本發(fā)布 Hooks 以來，大家紛紛上車嘗鮮。毫無疑問， Hooks 在一定程度上解決了組件間功能和邏輯復(fù)用的問題，在組件間的邏輯的封裝和復(fù)用確實真香，但 Hooks 在數(shù)據(jù)狀態(tài)的共享方法略有不足，雖然可以使用 useReducer 實現(xiàn)數(shù)據(jù)狀態(tài)管理，但在一定程度上是對 redux 的思想的復(fù)用。我們知道 redux 、 Flux 、 dva 等這些 React 狀態(tài)管理的工具，實際上都是對 action 、 dispatch 、 reducer 、 useStore 、 Provider 、 Context 這些概念的排列組合，概念太多，學(xué)習(xí)入手成本較高，項目使用都差不多，會有產(chǎn)生許多的模版代碼。

hox

既然如此是否有學(xué)習(xí)成本比較低，入手簡單的針對 Hooks 的狀態(tài)管理器呢？答案是有，其中來自來自螞蟻金服體驗技術(shù)部 hox 就是這樣一種工具。下面我們從學(xué)習(xí)、上手、原理幾個方法聊聊這個被定為為下一代 React 狀態(tài)管理器，看看其是否符合其定位的目標(biāo)。

學(xué)習(xí)

hox 來自螞蟻金服體驗技術(shù)部，其背后的團(tuán)隊在 React 各種實踐場景上都有很豐富的經(jīng)驗，因此其后續(xù)的維護(hù)和迭代還是很靠譜的。可能因為其只有一個 API ，因此其文檔也是十分簡單的，一眼就能看到頭了。這對于我們前端的開發(fā)者而言就是很友好的，由于千變?nèi)f化的前端，各種輪子、各種技術(shù)層出不窮，前端的娃娃們表示學(xué)不動了。而這種只有一個 API 的工具，我們表示還是可以學(xué)的動的。 hox 的詳細(xì)文檔可以參看 github 上的 readme 支持中英文，鏈接如下：

中文文檔 ： github.com/umijs/hox/b…

英文文檔 ： github.com/umijs/hox/b…

特性

hox 作為下一代的狀態(tài)管理器，其具有如下特性：

只有一個 API，簡單高效，幾乎無需學(xué)習(xí)成本

使用 custom Hooks 來定義 model，完美擁抱 React Hooks

完美的 TypeScript 支持

支持多數(shù)據(jù)源，隨用隨取

上手

hox 的上手使用體驗還是很不錯的，因為十分簡單。talk is cheap，show me code。我們直接上碼看看。

import { useState } from "react";import { createModel } from "hox";function useCounter() { const [count, setCount] = useState(0); const decrement = () => setCount(count - 1); const increment = () => setCount(count + 1); return { count, decrement, increment };}export default createModel(useCounter);import useCounterModel from "../models/counter";function App(props) { const { count, increment, decrement } = useCounterModel(); return (

{count}

Increment Decrement );}

使用 hox 就是這么簡單，通過 createModel 包裝一下將 custom hook 變成 share hook ，就可以在各個組件之間共享數(shù)據(jù)狀態(tài)，并實現(xiàn)邏輯封裝和復(fù)用。

原理

createModel 會創(chuàng)建一個 Executor 組件的實例，并在執(zhí)行 custom hook ， custom hook 的執(zhí)行結(jié)果會被保存起來。最后，它會返回一個新的 share hook 即是 model hook 實現(xiàn)數(shù)據(jù)和邏輯的共享。源碼如下：

import { ModelHook, UseModel } from "./types";import { Container } from "./container";import { Executor } from "./executor";import React, { useEffect, useRef, useState } from "react";import { render } from "./renderer";export function createModel(hook: ModelHook, hookArg?: P) { // 實例化一個容器，通過發(fā)布訂閱模式實現(xiàn)對狀態(tài)改變的推送 const container = new Container(hook); // 實例化 Executor 組件，當(dāng)數(shù)據(jù)發(fā)生改變時，notify 所有訂閱者進(jìn)行更新 render( { container.data = val; container.notify(); }} hook={() => hook(hookArg)} /> ); // useModel 這是 share hook const useModel: UseModel = depsFn => { const [state, setState] = useState(() => container ? (container.data as T) : undefined ); const depsFnRef = useRef(depsFn); depsFnRef.current = depsFn; const depsRef = useRef([]); useEffect(() => { if (!container) return; function subscriber(val: T) { if (!depsFnRef.current) { setState(val); } else { const oldDeps = depsRef.current; const newDeps = depsFnRef.current(val); if (compare(oldDeps, newDeps)) { setState(val); } depsRef.current = newDeps; } } container.subscribers.add(subscriber); return () => { container.subscribers.delete(subscriber); }; }, [container]); return state!; }; // share hook 代理 custom hook 返回的值 Object.defineProperty(useModel, "data", { get: function() { return container.data; } }); return useModel;}// 這是 hook 依賴項對比函數(shù)function compare(oldDeps: unknown[], newDeps: unknown[]) { if (oldDeps.length !== newDeps.length) { return true; } for (const index in newDeps) { if (oldDeps[index] !== newDeps[index]) { return true; } } return false;}

其原理圖如下：

總結(jié)

簡言之， hox 大道至簡，只有一個 API ，但其既能滿足邏輯的封裝和復(fù)用，又能滿足狀態(tài)復(fù)用和管理，值得嘗試的狀態(tài)管理器。

總結(jié)

以上是生活随笔為你收集整理的hooks组件封装 react_名符其实的react下一代状态管理器hox的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。