本文介绍: useModel hook是React Hook中一个自定义的钩子函数,用于管理应用程序中的状态和逻辑。它主要用于组件之间的状态共享和通信。useModel hook通常包含以下几个步骤:1.创建模型:定义需要共享的状态和相关的方法,可以使用React的useState、useEffect等其他钩子。2.使用useModel hook:在需要使用该模型的组件中,使用useModel hook来获取模型的实例。
一、概述
useModel hook是React 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 项目全局的初始状态。
全局初始状态在整个 Umi 项目的最开始创建。编写 src/app.ts
的导出方法 getInitialState()
,其返回值将成为全局初始状态。例如:
// 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进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。