一、概述

        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}</>;
};

原文地址:https://blog.csdn.net/qq_37011724/article/details/134705978

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_34618.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注