React自定义Hook之useModel hook

一、概述

        useModel hook是React Hook中一个自定义的钩子函数，用于管理应用程序中的状态和逻辑。它主要用于组件之间的状态共享和通信。

        useModel hook通常包含以下几个步骤：        

            1.创建模型：定义需要共享的状态和相关的方法，可以使用React的useState、useEffect等其他钩子。

           2.使用useModel hook：在需要使用该模型的组件中，使用useModel hook来获取模型的实例。

          3.使用模型的状态和方法：通过模型的实例，可以在组件中访问和修改模型的状态，并调用模型中定义的方法。

二、使用样例

1.创建Model

文件路径: src/models/counterModel.ts

// src/models/counterModel.ts
import { useState, useCallback } from 'react';

export default function Page() {
  // 计数器状态
  const [counter, setCounter] = useState(0);

  const increment = useCallback(() => setCounter((c) => c + 1), []);
  const decrement = useCallback(() => setCounter((c) => c - 1), []);

  return { counter, increment, decrement };
};

2.Model使用

// src/components/CounterActions/index.tsx
import { useModel } from 'umi';

export default function Page() {
  const { add, minus } = useModel('counterModel', (model) => ({
    add: model.increment,
    minus: model.decrement,
  }));

  return (
    <div>
      <button onClick={add}>add by 1</button>
      <button onClick={minus}>minus by 1</button>
    </div>
  );
};

三、其它扩展

1.全局初始状态

@umi/max 内置了全局初始状态管理插件，允许您快速构建并在组件内获取 Umi 项目全局的初始状态。

全局初始状态是一种特殊的 Model。

全局初始状态在整个 Umi 项目的最开始创建。编写 src/app.ts 的导出方法 getInitialState()，其返回值将成为全局初始状态。例如：

app.ts

// src/app.ts
import { fetchInitialData } from '@/services/initial';

export async function getInitialState() {
  const initialData = await fetchInitialData();
  return initialData;
}

xx.ts 业务中获取初始状态

import { useModel } from 'umi';

export default function Page() {
  const { initialState, loading, error, refresh, setInitialState } =
    useModel('@@initialState');
  return <>{initialState}</>;
};

代码007普通

打赏 收藏 海报 链接