数ヶ月反応に触れていなかったのですが、最近突然反応プロジェクトのメソッドを発見しました タイプスクリプトで記述する方法は非常に人気があり、私はちょうど......フロントエンドを行うにはあまりにも難しく、次から次へと技術。
最近、テーブルリクエスト関数をreduxでラップする場合と、テーブルリクエストメソッドをフックでラップする場合の違いについて調べています。
まず何を達成すべきかを分析することから始めましょう。
ビュー層
このデータの取得は、フェッチリクエストに基づいて行われます。
, dva reduxのパッケージ化されたリクエストプラグインコードの使用方法は以下の通りです。
import { request, postData } from '../util/request'
export default {
namespace: 'poemTable',
state: {
data: [],
pageNum: 1,
pageSize: 10,
total: 0,
loading: false
},
effects: {
*queryInitPoems(_, sageEffects) {
const { payload, callback} = _;
const { call, put } = sageEffects;
const { url, params} = payload;
let { pageSize, pageNum } = params;
yield put({ type: 'setLoad', payload: true});
yield put({ type: 'setPageInit',
payload: { pageSize, pageNum }
});
const res = yield call(postData, url, params);
yield put({ type: 'getList', payload: res});
yield put({ type: 'setLoad', payload: false});
if (callback) {
callback(res);
};
}
},
reducers: {
getList(state, { payload: resData }) {
return {
data: resData.data.list || [],
total: resData.data.count
};
},
setLoad(state, { payload: loadstate}) {
return {
...state,
loading: loadstate
}
},
setPageInit(state, { payload: { pageSize, pageNum }}) {
let nextpageSize = pageSize || state.pageSize;
let nextpageNum = pageSize || state.pageNum;
return {
...state,
pageSize: nextpageSize,
pageNum: nextpageNum
}
},
},
}
上の図からわかるように、状態データを初期化するための定義と、setLoad getListsetPageInitのような状態を変更するためのさまざまなメソッドがあります。
対応するリアクト成分
// 詩のリスト
import React, { Component } from 'react';
import { Table, Tag, Space } from 'antd';
import { connect } from 'dva';
const namespace = 'poemTable';
const mapStateToProps = (state) => {
const poemList = state[namespace].data || [];
return Object.assign({}, state[namespace], {
poemList
})
};
const mapDispatchToProps = (dispatch) => {
return {
onDidMount: (obj) => {
obj = obj || {}
dispatch({
type: `${namespace}/queryInitPoems`,
payload: {
url: '/api/listpoem',
params: Object.assign({}, obj)
}
});
}
};
};
const columns = [
{
title: ' ,
dataIndex: 'title',
key: '_id',
},
{
title: ' ,
dataIndex: 'book',
key: 'book',
},
{
title: ' ,
dataIndex: 'auther',
key: 'auther',
},
];
@connect(mapStateToProps, mapDispatchToProps)
export default class poemTablePage extends Component {
constructor(props) {
super(props);
this.state = {
}
}
componentDidMount() {
this.props.onDidMount({
pageNum: 1,
pageSize: 10,
});
}
render() {
let paginationSet = {
pageSize: this.props.pageSize,
current: this.props.pageNum,
total: this.props.total,
pageSizeOptions: [10, 20, 50, 100],
onChange: (page, pageSize) => {
console.log(page, pageSize);
this.props.onDidMount({
pageNum: page,
pageSize: pageSize,
});
}
}
console.log(paginationSet)
return (
<div>
<Table
loading={this.props.loading}
dataSource={this.props.poemList}
columns={columns}
rowKey={(record) => record._id}
pagination={paginationSet}
/>
</div>
)
}
}
、フックカプセル化されたテーブル関数の使用
// フックプラグインのパッケージ化
import {useEffect, useState, useCallback} from 'react';
import { postData } from '../util/request'
let defaultTableSet = {
data: [],
pageNum: 1,
pageSize: 10,
total: 0,
}
export function useTableHook(url, params) {
const [loading, setLoading] = useState(false)
const [data, setData] = useState(defaultTableSet);
const loadData = async (inputparams) => {
setLoading(true);
if(inputparams) {
params = inputparams
}
let { pageNum, pageSize } = params;
let request = await postData(url, params);
setLoading(false);
setData(prevState => {
return {...prevState, ...{
data: request.data.list || [],
total: request.data.count,
pageNum,
pageSize
}};
});
}
useEffect(() => {
loadData()
}, [])
return {
loadData,
...data,
loading
}
}
reduxと同様に、デフォルトの状態、状態を変更するメソッド、setData、setLoading、データを取得する関数loaddataがあります。
対応するフック機能コンポーネント
// フック・メソッドで詩のリストを読み込む
import { Table, Tag, Space } from 'antd';
import { useTableHook } from '../hook/tablehook'
const columns = [
{
title: ' ,
dataIndex: 'title',
key: '_id',
},
{
title: ' ,
dataIndex: 'book',
key: 'book',
},
{
title: ' ,
dataIndex: 'auther',
key: 'auther',
},
];
const poemTableHook = () => {
const gethookdata = useTableHook('/api/listpoem', {
pageNum: 1,
pageSize: 10,
})
// let poemList = gethookdata.data;
let paginationSet = {
pageSize: gethookdata.pageSize,
current: gethookdata.pageNum,
total: gethookdata.total,
pageSizeOptions: [10, 20, 50, 100],
onChange: (page, pageSize) => {
console.log(page, pageSize);
gethookdata.loadData({
pageNum: page,
pageSize: pageSize,
});
}
}
return (
<div>
<Table
loading={gethookdata.loading}
dataSource={gethookdata.data}
columns={columns}
rowKey={(record) => record._id}
pagination={paginationSet}
/>
</div>
)
}
export default poemTableHook
useStateメソッドとuseEffectメソッドを使うと、コンポーネントにデータやメソッドを入れることができます。reduxモデルと比較して、フックメソッドはより簡単で直感的です。
上記は2つの方法の比較と使用方法です。
