ほとんどのバックグラウンド開発者が結果セットをできるだけフロントに直接フィードバックすると想像してください。この結果セットの通常の形式は配列配列で、その中の各要素はオブジェクトのキーと値のペアのテーブルです。この時点でプロダクトマネージャーがさまざまなデータ表示要件を提示すると、フロントエンドのデータ構造に大幅な変更が加えられることになり、次のような問題が発生し
ます。1.カスケードメニューにはJSONツリーが必要です。
2.合計金額をトラバースして現在のクエリ結果から合計する必要があります（最悪の場合、値がnull、波線、交差線などになることがあります）。
3.何千ものデータを繰り返しトラバースする必要があります。O（1）の時間の複雑さを実現するには、データをキーと値のペアのテーブルに変更する方法を見つける必要があります。
4.特定のビッグデータ表示プラグインを配列に入れる必要があり、forループが必要です。
5.データを状態別にグループ化します。複数の状態があり、いくつかの配列が必要で、Nサイクルが必要です...
6.しばらくの昇順、しばらくの降順、およびさらに奇妙なのは、Aフィールドが昇順で配置されている間、複数のデータが同じAフィールドを持つ場合、それらはBフィールドで昇順に配置されるということです。
7.何？グループ化した後、金額フィールドでグループ化して要約しましょう！
8.フォームコンポーネントは実際には2次元配列の入力のみを受け入れ、各配列の長さは同じである必要があります。null値のためにバックエンドがフィルターを提供し、結果として不均一になります（より悲劇的なのはバックエンドまたはフレンドです）。提供、変更=不可能）？
上記の現実的でつらい思い出に基づいて、私はYumeiSoftのCommonFrontUtilsプロジェクトをオープンソース化しました。これにより、フロントエンドのプログラマーは、ガールフレンド、家族、子供たちとより多くの時間を過ごし、996と007の代わりに早く帰宅できます。
プロジェクトアドレス：
https : //codechina.csdn.net/yumeisoft/commonfrontutils
（オープンソースは簡単ではありません。スターを与えることを忘れないでください、ありがとう）
それがどのような機能を持っているのか見てみましょう：
この画像は、プロジェクトをダウンロードした後、yarnのインストールと開始から見ることができます。例は非常に豊富です。
指示に従って、Yumeisoftのフォルダ全体をプロジェクトのsrcディレクトリにコピーします。パス構造は自由に変更できます。dataは与えられたサンプルデータです。その中にObjsをインポートします。単にaggGroup関数を試してページに出力し、効果を確認してください。コアコードはたった一文です：
Objs(data).aggGroup('dept','id','count');
このうち、deptは部門フィールド、idは主キーフィールド、countは統計情報の数値による意味です
。1行のコードで部門別の統計情報を取得できます。
完全なコードは次のとおりです。
import React, {
Component } from 'react';
import Objs from './Yumeisoft/CommonFrontUtils/Objs';
export default class App extends Component {
render() {
let data = [
{
id: '823585b8-062d-4e15-b17c-2d8932d4a1a4',
name: '张三',
age: '25',
balance: 1000,
gender: '男',
dept: '采购部',
post: '部门经理',
superior: '1bc06853-b0fd-4cbc-9d53-16c054b8ca9b',
},
{
id: '39d2fd99-00f5-4996-9a3f-165148ab7972',
name: '李四',
age: 17,
balance: 400,
gender: '男',
dept: '技术部',
post: '管理培训生',
deptId: '2',
superior: '37f15bff-e0ee-4b44-9291-5c9fa0bcf954',
},
{
id: '37f15bff-e0ee-4b44-9291-5c9fa0bcf954',
name: '王五',
age: 30,
balance: 500,
gender: '男',
dept: '技术部',
post: '部门经理',
superior: '1bc06853-b0fd-4cbc-9d53-16c054b8ca9b',
},
{
id: '0f0479cc-59fe-4c56-9685-75c4067300b6',
name: '小红',
age: 16,
balance: 200,
gender: '女',
dept: '采购部',
post: '管理培训生',
superior: '823585b8-062d-4e15-b17c-2d8932d4a1a4',
},
{
id: 'f01430fd-5df3-402a-92ef-aca63d882e2b',
name: '小明',
age: 24,
balance: 700,
gender: '男',
dept: '技术部',
post: '管理培训生',
superior: '37f15bff-e0ee-4b44-9291-5c9fa0bcf954',
},
];
let result = Objs(data).aggGroup('dept', 'id', 'count');
return <>{
JSON.stringify(result)}</>;
}
}
現在、CodeChinaでは30の例が提供されており、ほとんどの使用シナリオがカバーされています。このプロジェクトはムーランのルーズライセンスに基づいており、商用利用にも非常に友好的です。
何か良い提案があれば、遠慮なく私に連絡してください：
メール：
[email protected]
または
[email protected]
最後に、忘れずにStartを提供してください。サポートに感謝します。