关于前端:手把手教你写一个-React-状态管理库

自从 React Hooks 推广后，Redux 作为状态治理计划就显得心心相印了。Dan Abramov 很早就提到过 “You might not need Redux”，开发者必须要写很多“模式代码”，繁琐以及反复是开发者不违心容忍的。除了 actions/reducers/store 等概念对老手不够敌对之外，最大的毛病就是它对 typescript 类型反对太烂，在大型项目中这是不可承受的。

通过对 Redux 的优缺点总结来看，咱们能够本人写一个状态治理库，本次须要达到的目标：

typescript 类型要欠缺
足够简略，概念要少
与 React Hooks 要搭配

因而，浏览此文档的前提要对 React Hooks 、typescript 等有肯定的概念。OK, 那咱们开始吧。

思路

目前风行的状态治理库很多都太简单了，夹杂着大量的概念及 API，咱们须要布局着如何实现它。状态治理也就是状态晋升的极致体现。咱们的目标是要足够简略， API 少。
思考一下，咱们是否能够思考用 Context 去穿透做治理，用最根本的 useState 等 hooks 做状态存储，那么就尝试下吧。

这是三个最简略的函数式组件 Demo，咱们用它来试验：

function App() {  return <Card />;}function Card() {  return <CardBody />;}function CardBody() {  return <div>Text</div>;}

实现

咱们定义 Context，一个很根本的状态模型

// 形容 Context 的类型interface IStoreContext {  count: number;  setCount: React.Dispatch<React.SetStateAction<number>>;  increment: () => void;  decrement: () => void;}// 创立一个 Context，无需默认值，这里为了演示不便，用了断言export const StoreContext = React.createContext<IStoreContext>(undefined as unknown as IStoreContext);

以及定义根本的 state，并配合 Context

function App() {  // 定义状态  const [count, setCount] = React.useState(0);  const increment = () => setCount(count + 1);  const decrement = () => setCount(count - 1);  // 包裹 Provider，所有子组件都能拿到 context 的值  return (    <StoreContext.Provider value={{ count, setCount, increment, decrement }}>      <Card />    </StoreContext.Provider>  );}

接下来咱们在 CardBody 中应用这个 Context，使其穿透取值

function CardBody() {  // 获取外层容器中的状态  const store = React.useContext(StoreContext);  return <div onClick={store.increment}>Text {store.count}</div>;}

这样，一个最简略的穿透状态治理的代码写好了。发现问题了吗，状态的业务逻辑写在了 App 组件里，这个代码耦合度太高了！咱们来整顿一下，须要将 App 的状态通过自定义 hook 抽离进来，放弃逻辑与组件的纯正性。

// 将 App 中的状态用自定义 hook 治理，逻辑和组件的体现抽离function useStore() {  // 定义状态  const [count, setCount] = React.useState(0);  const increment = () => setCount(count + 1);  const decrement = () => setCount(count - 1);  return {    count,    setCount,    increment,    decrement,  };}

在 App 中应用这个 hook

function App() {  const store = useStore();  return (    <StoreContext.Provider value={store}>      <Card />    </StoreContext.Provider>  );}

当初来看是不是舒心多了，逻辑在独自的 hook 中管制，具备高内聚的特点。想想兴许还不够，useStore 和 StoreContext 的逻辑还不够内聚，持续：

将 useStore 和 StoreContext.Provider 抽离成一个组件

const Provider: React.FC = ({ children }) => {  const store = useStore();  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;};

再来看 App 组件，是不是很清晰？

function App() {  return (    <StoreProvider>      <Card />    </StoreProvider>  );}

好了，咱们能够将这个模式封装成一个办法，通过工厂模式来创立 Context 和 Provider。

// 将自定义 Hook 通过参数传入// 定义泛型形容 Context 形态export function createContainer<Value, State = void>(useHook: (initialState?: State) => Value) {  const Context = React.createContext<Value>(undefined as unknown as Value);  const Provider: React.FC<{ initialState?: State }> = ({ initialState, children }) => {    // 应用内部传入的 hook    const value = useHook(initialState);    return <Context.Provider value={value}>{children}</Context.Provider>;  };  return { Provider, Context };}

OK，一个简略的状态治理算成型了。好不好用咱们来试试，将之前定义的 useStore 的代码移入 createContainer 里

export const BaseStore = createContainer(() => {  // 定义状态  const [count, setCount] = React.useState(0);  const increment = () => setCount(count + 1);  const decrement = () => setCount(count - 1);  return {    count,    setCount,    increment,    decrement,  };});

在 App 中替换为 BaseStore 导出的 Provider

function App() {  return (    <BaseStore.Provider>      <Card />    </BaseStore.Provider>  );}

在 CardBody 应用 BaseStore 导出的 Context，因为定义的时候用了泛型，这里能完满辨认以后 store 的形态，从而具备编辑器智能提醒

function CardBody() {  const store = React.useContext(BaseStore.Context);  return <div onClick={store.increment}>Text {store.count}</div>;}

那么祝贺你，你曾经创立了一个属于本人的状态治理库，咱们给它取个名字叫 unstated-next

调整

然而不便和性能总是有所取舍的，毫无疑问，成也 Context，败也 Context。因为它的穿透无差别更新个性也就决定了会让所有的 React.memo 优化生效。一次 setState 简直让整个我的项目跟着 rerender ，这是极为不可承受的。因为自定义 Hook 每次执行返回的都是一个全新的对象，那么 Provider 每次都会承受到这个全新的对象。所有用到这个 Context 的子组件都跟着一起更新，造成无意义的损耗调用。

有计划吗？想一想，方法总比艰难多。咱们能够优选 Context 上下文的个性，放弃导致从新渲染的个性（即每次传给他一个固定援用）。这样的话状态扭转，该更新的子组件不跟着更新了怎么办，有什么方法触发 rerender 呢？答案是 setState，咱们能够将 setState 办法晋升到 Context 里，让容器去调度调用更新。

// createContainer 函数中// 首先咱们能够将 Context 设置为不触发 render// 这里 createContext 第二个参数的函数返回值为 0 即为不触发 render// 留神：这个 API 非正规。当然也能够用 useRef 转发整个 Context 的值，使其不可变// 用非正规的 API 仅仅只是为了不必 ref 而少点代码 const Context = React.createContext<Value>(undefined as unknown as Value, () => 0);

那当初 Context 曾经是不可变了，该如何实现更新逻辑呢？思路能够是这样：咱们在子组件 mount 时增加一个 listener 到 Context 中，unMount 时将其移除，Context 有更新时，调用这个 listener，使其 rerender。

申明一个 Context，用来放这些子组件的 listener

// createContainer 函数中const ListenerContext = React.createContext<Set<(value: Value) => void>>(new Set());

当初子组件中须要这样一个 hook，想抉择 store 里的某些状态去应用，无相干的 state 扭转不必告诉我更新。

那么咱们就起个名字叫 useSelector，用来监听哪些值变动能够让本组件 rerender。

函数类型能够这样定义：通过传入一个函数，来手动指定须要监听的值，并返回这个值

// createContainer 函数中function useSelector<Selected>(selector: (value: Value) => Selected): Selected {}

那咱们来实现这个 useSelector 。首先是触发 rerender 的办法，这里用 reducer 让其外部自增，调用时不必传参数

const [, forceUpdate] = React.useReducer((c) => c + 1, 0);

这里咱们须要和容器中的 Context 通信，从而获取所有状态传给 selector 函数

// 这里的 Context 曾经不具备触发更新的个性const value = React.useContext(Context);const listeners = React.useContext(ListenerContext);// 调用办法获取抉择的值const selected = selector(value);

创立 listener 函数，通过 Ref 转发，将抉择后的 state 提供给 listener 函数应用，让这个函数能拿到最新的 state，

const StoreValue = {  selector,  value,  selected,};const ref = React.useRef(StoreValue);ref.current = StoreValue;

实现这个 listener 函数

function listener(nextValue: Value) {  try {    const refValue = ref.current;    // 如果前后比照的值一样，则不触发 render    if (refValue.value === nextValue) {      return;    }    // 将抉择后的值进行浅比照，一样则不触发 render    const nextSelected = refValue.selector(nextValue);    //    if (isShadowEqual(refValue.selected, nextSelected)) {      return;    }  } catch (e) {    // ignore  }  // 运行到这里，阐明值曾经变了，触发 render  forceUpdate();}

咱们须要在组件 mount/Unmount 的时候增加/移除 listener

React.useLayoutEffect(() => {  listeners.add(listener);  return () => {    listeners.delete(listener);  };}, []);

残缺实现如下：

function useSelector<Selected>(selector: (value: Value) => Selected): Selected {  const [, forceUpdate] = React.useReducer((c) => c + 1, 0);  const value = React.useContext(Context);  const listeners = React.useContext(ListenerContext);  const selected = selector(value);  const StoreValue = {    selector,    value,    selected,  };  const ref = React.useRef(StoreValue);  ref.current = StoreValue;  React.useLayoutEffect(() => {    function listener(nextValue: Value) {      try {        const refValue = ref.current;        if (refValue.value === nextValue) {          return;        }        const nextSelected = refValue.selector(nextValue);        if (isShadowEqual(refValue.selected, nextSelected)) {          return;        }      } catch (e) {        // ignore      }      forceUpdate();    }    listeners.add(listener);    return () => {      listeners.delete(listener);    };  }, []);  return selected;}

有了 selector。最初一步，咱们来改写 Provider

// createContainer 函数中const Provider: React.FC<{ initialState?: State }> = ({ initialState, children }) => {  const value = useHook(initialState);  // 应用 Ref，让 listener Context 不具备触发更新  const listeners = React.useRef<Set<(listener: Value) => void>>(new Set()).current;  // 每次 useHook 外面 setState 就会让本组件更新，使 listeners 触发调用，从而使扭转状态的子组件 render  listeners.forEach((listener) => {    listener(value);  });  return (    <Context.Provider value={value}>      <ListenerContext.Provider value={listeners}>{children}</ListenerContext.Provider>    </Context.Provider>  );};

功败垂成！useSelector 返回的新对象都会如同 React.memo 一样做浅比照。API 用法也如同 React-Redux，毫无学习老本。咱们来看看用法

function CardBody() {  // count 一旦变动后，本组件触发 rerender  // 这里如果嫌麻烦，能够应用 lodash 中的 pick 函数  const store = BaseStore.useSelector(({ count, increment }) => ({ count, increment }));  return <div onClick={store.increment}>Text {store.count}</div>;}

值得注意的是，createContainer 函数中返回进来的值不能是每次 render 都从新生成的。咱们来批改一下 BaseStore

export const BaseStore = createContainer(() => {  // 定义状态  const [count, setCount] = React.useState(0);  // 之前定义的两个 function 替换为 useMethods 包裹，保障 increment 、decrement 函数援用不变  const methods = useMethods({    increment() {      setCount(count + 1);    },    decrement() {      setCount(count - 1);    },  });  return {    count,    setCount,    ...methods,  };});

这里的 useMethods Hook 就是我之前有篇文章剖析过的，用来代替 useCallback，源码见 Heo。

精益求精，能够将 useSelector 联合 lodash.picker 封装一个更罕用的 API，取个名字叫 usePicker

// createContainer 函数中function usePicker<Selected extends keyof Value>(selected: Selected[]): Pick<Value, Selected> {  return useSelector((state) => pick(state as Required<Value>, selected));}

试试成果：

function CardBody() {  const store = BaseStore.usePicker(['count', 'increment']);  return <div onClick={store.increment}>Text {store.count}</div>;}

总结

好了，这就是我过后写一个状态治理的思路，你学会了吗？源码见 Heo，也是咱们正在用的状态治理，它足够轻量、配合 Hooks、完满反对 TS、革新原有代码的难度小。目前已在生产环境中稳固运行了一年多了，最高复杂度的我的项目为一次性渲染 2000 多个递归结构的组件，性能仍然放弃得很优良。欢送大家 Star。

欢送关注微信公众号 前端星辰，后续会为大家送上各种组件的实现思路。