umi，设计思想与代码质量优化+程序性能优化+开发效率优化

本文主要是介绍umi，设计思想与代码质量优化+程序性能优化+开发效率优化，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

.catch(error => {

message.error(error);

});

}

// -----------------------------------使用封装后的request---------------------------------------------

type EditRecordParamsType = {

id: number |undefined;

value: FormValues;

};

export async function getRemoteList(): Promise {

return request(’/api/users’);

}

export async function editRecord(params: EditRecordParamsType): Promise {

return request(’/api/edit’, {

metho

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

d: ‘POST’,

data: params,

});

}

• 提取公用数据类型（data.d.ts中）

/**

• 这个文件是放 公共的 类型接口的

*/

/**

• 封装后台返回的数据

*/

export type SingleUserType ={

id: number,

name?: string,

email?: string,

create_time?: string,

update_time?: string,

status: number

}

/**

• Modal 框的确定按钮的类型

*/

export type FormValues ={

}

• 数据仓库（dva）model.ts中请求并处理数据

import { Effect, Reducer, Subscription } from ‘umi’;

//导入service远端数据请求

import { getRemoteList } from ‘./service’

import { SingleUserType } from ‘./data’

/**

• 封装后台返回的数据

*/

export type UserState = {

data: SingleUserType[],

meta: {

total: number,

per_page: number,

page: number

}

}

interface UserModelType {

namespace: string;//这里的命名空间就是展示页面得到数据的键

state: UserState;//封装后台返回的数据

effects: {

getRemote: Effect;

};

reducers: {

getList: Reducer,

};

subscriptions: { setup: Subscription };

}

const UserModel: UserModelType = {

namespace: ‘usersData’,//这里的命名空间就是展示页面得到数据的键

state: {

data: [],

meta: {

total: 0,

per_page: 10,

page: 1

}

},

//异步

effects: {

//获取列表数据

*getRemote({ payload }, { call, put }) {

//从service中获取数据（service主要用于接口请求）

const data = yield call(getRemoteList)

if (data && data instanceof Object) {

yield put({

type: ‘getList’,//这个是将数据给reducers中哪个方法

payload: data //注意这里传递一个数组会出问题，原因待定

})

}

},

},

//同步

reducers: {

getList(state, action) {

return {

…state,

…action.payload,

};

},

},

//订阅

subscriptions: {

setup({ dispatch, history }) {

return history.listen(({ pathname }) => {

if (pathname === ‘/’) {//当前页面的路径

dispatch({

type: ‘getRemote’,//调用effects中的方法

})

}

});

}

}

};

export default UserModel;

• 首页index.tsx展示数据

import React, { useState, FC } from ‘react’;

//UserState, SingleUserType 需要在model中导出

import { connect, Dispatch, Loading, UserState } from ‘umi’;

import { Table, Space, message } from ‘antd’;

import UserModal from ‘./components/UserModal’

import { SingleUserType, FormValues } from ‘./data’

import { editRecord } from ‘./service’

/**

• 声明下方 props 类型

• const { users, dispatch, listLoading } = props

*/

type userPageProps = {

users: UserState,

dispatch: Dispatch,

listLoading: boolean

}

const UserListPage: FC = (props) => {

//控制modal弹框

const [visible, setVisible] = useState(false);

const [confirmLoading, setConfirmLoading] = useState(false);

const [record, setRecord] = useState<SingleUserType | undefined>(undefined);

//获取从model中来的数据

const { users, dispatch, listLoading } = props

//编辑

const onClickEdit = (record: SingleUserType) => {

setVisible(true)

setRecord(record)

};

/**

• 表单提交

*/

const onFinish = async (value: FormValues) => {

setConfirmLoading(true);

const id = record?.id

const result = await editRecord({ id, value })

if (result && result instanceof Object) {

message.success(result.data);

setVisible(false);

dispatch({

type: ‘usersData/getRemote’

})

}

setConfirmLoading(false);

};

//关闭弹窗

const handleCancel = () => {

setVisible(false);

};

const columns = [

{

title: ‘ID’,

dataIndex: ‘id’,

},

{

title: ‘Name’,

dataIndex: ‘name’,

render: (text: string) => {text},

},

{

title: ‘CreateTime’,

dataIndex: ‘create_time’,

},

{

title: ‘Action’,

render: (text: string, record: SingleUserType) => (

<a onClick={() => onClickEdit(record)}>编辑

删除

),

},

];

return (

<UserModal visible={visible} confirmLoading={confirmLoading}

onFinish={onFinish} //关联子组件方法

handleCancel={handleCancel}

record={record} />

)

}

/**

• 这是从model中获取数据

• @param param0

• @returns

*/

const mapStateToProps = ({ usersData, loading }: { usersData: UserState, loading: Loading }) => {

return {

users: usersData,//这里的usersData就是model中的namespace

listLoading: loading.models.usersData

}

}

/**

• mapStateToProps 简写

*/

/*

const mapStateToProps = ({ users }) => ({

users

})

*/

export default connect(mapStateToProps)(UserListPage)

//最终简写

// export default connect(({ users }) => ({

// users

// }))(UserListPage)

• 弹窗UserModal.tsx

import React, { useEffect, FC } from ‘react’

import { Modal, Form, Input } from ‘antd’;

import { SingleUserType, FormValues } from ‘…/data’

/**

• 声明下方 props 类型

• const { visible, confirmLoading, record, handleCancel, onFinish } = props

*/

type userModalProps = {

visible: boolean,

confirmLoading: boolean,

record: SingleUserType | undefined,

handleCancel: () => void,

onFinish: (values: FormValues) => void

}

const UserModal: FC = (props) => {

const { visible, confirmLoading, record, handleCancel, onFinish } = props

const [form] = Form.useForm();

//相当于componentDidMount

useEffect(() => {

form.setFieldsValue(record);

}, [visible])

//点击弹窗

const handleOk = () => {

form.submit()

};

/**

• 表单失败

*/

const onFinishFailed = (err: any) => {

console.log(err)

};

return (

<Modal

title=“Title”

forceRender

visible={visible}

okText=‘确定’

cancelText=“取消”

onOk={handleOk}//传递父组件处理

confirmLoading={confirmLoading}

onCancel={handleCancel}//传递父组件处理

form={form}

name=“basic”

onFinish={onFinish}

onFinishFailed={onFinishFailed}

<Form.Item

label=“name”

name=“name”

rules={[{ required: true, message: ‘请输入name’ }]}

</Form.Item>

<Form.Item

label=“CreateTime”

name=“create_time”

rules={[{ required: true, message: ‘请输入create_time’ }]}

</Form.Item> <Form.Item

label=“status”

name=“status”

rules={[{ required: true, message: ‘请输入status’ }]}

这篇关于umi，设计思想与代码质量优化+程序性能优化+开发效率优化的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！