[[384776]]

ビジネスアプリケーションでは、Ant Designのようなコンポーネントライブラリに基づいて多くの機能をカスタマイズする必要がある場合があります。この記事では、私が遭遇したビジネス要件を例に、ツリー構造のテーブルコンポーネントの実装と最適化を段階的に説明します。このコンポーネントは以下をサポートします。

• 各レベルのインデントインジケータ線
• 子ノードのリモート遅延読み込み
• 各レベルでページ区切りがサポートされます。

このシリーズは 2 つの記事で構成されており、この記事ではこれらのビジネス要件を実装する方法のみを説明します。

次の記事では、コードの結合とメンテナンスの難しさの問題を解決するために、コンポーネントのシンプルなプラグイン機構を設計する方法を説明します。

機能性

階層的なインデント行

Ant Design のテーブル コンポーネントは、デフォルトではこの機能を提供しておらず、ツリー構造のみをサポートしています。

 const ツリーデータ = [
 {
 function_name: `React Tree Reconciliation`,
カウント: 100,
子供たち： [
 {
関数名: `React Tree Reconciliation2`,
カウント: 100
 }
 ]
 }
 ]

表示効果は以下のとおりです。

antdテーブル

ご覧の通り、大きな関数スタックをインデントなしで表示するのはかなり不自然です。ビジネスチームからこの要件について事前に説明を受けたのですが、残念ながら以前から忙しすぎて、当面は保留にせざるを得ませんでした。😁

VSCode のインデント効果を参照すると、インデントはノードの階層と密接に関係していることがわかります。

vscode

たとえば、src ディレクトリが最初のレベルに対応する場合、その子ディレクトリである client と node は td の前に 1 本の垂直線を描くだけで済みますが、node の下の 3 つのディレクトリは 2 本の垂直線を描く必要があります。

レベル 1: | テキスト
レベル2: | | テキスト
レベル3: | | | テキスト

セル要素をカスタム レンダリングする場合は、次の 2 つの情報のみを取得する必要があります。

1. 現在のノードの階層情報。
2. 現在のノードの親ノードは展開された状態ですか?

したがって、データを再帰的に処理し、ノードの階層構造と親ノードへの参照を書き込みます。そして、テーブルの展開された行データをTableのexpandedRowKeysプロパティに渡すことで、テーブル内の行データを保持します。

ここでは元のデータを直接書き換えました。元のデータがクリーンであることを保証する必要がある場合は、React Fiberの考え方を参考に、元のツリーノードへの参照を維持する限り、データ書き込み用の代替ツリーを構築することもできます。

 /**
 * 再帰木の一般的な関数
/
 const トラバースツリー = (
ツリーリスト、
 childrenColumnName、
折り返し電話
) => {
 const traverse = (リスト、親 = null 、レベル= 1) => {
リスト.forEach(ツリーノード => {
コールバック(treeNode、親、レベル);
 const { [childrenColumnName]: next } = treeNode;
 if (Array.isArray(次の)) {
トラバース( next , treeNode,レベル+ 1);
 }
 });
 };
トラバース(ツリーリスト);
 }; 
 
関数rewriteTree({ データソース }) {
 traverseTree(データソース、childrenColumnName、(ノード、親、レベル) => {
 // ノードの階層を記録する
ノード[INTERNAL_LEVEL] =レベル 
 // ノードの親ノードを記録する
ノード[INTERNAL_PARENT] = 親
})
 }

次に、Table コンポーネントによって提供される components プロパティを使用して、td 要素である Cell コンポーネントのレンダリングをカスタマイズできます。

 constコンポーネント = {
体： {
セル: (セルプロパティ) => (
 <ツリーテーブルセル
{...小道具}
 {...セルプロパティ}
展開された行キー = {展開された行キー}
 />
 ）
 }
 }

その後、カスタム レンダリングされたセルでは、描画する垂直線の数が階層と親ノードの展開状態によって決まるという 2 つの情報のみが必要になります。

 const isParentExpanded = 拡張RowKeys.includes(
レコード?.[INTERNAL_PARENT]?.[rowKey]
 ）
 // インデントされたガイドラインは、現在の列が展開可能な親ノードを持つ列である場合にのみ表示されます。
 if (dataIndex !== indentLineDataIndex || !isParentExpanded) {
 <td className={className}>{children}を返す<​​/td>
 } 
 
 // 階層構造を理解することで、td要素に何本の垂直ガイドラインを描くべきかが分かります。例えば：
 // レベル 2: | | テキスト
// レベル 3: | | | テキスト
constレベル= レコード[INTERNAL_LEVEL] 
 
 const indentLines = renderIndentLines(レベル)

実装の詳細はここでは省略します。絶対位置指定を使用して垂直線をいくつか描画し、レベルをループする際にインデックスを使用して左のオフセット値を決定します。

結果は画像に示されています:

インデント

子ノードのリモート遅延読み込み

この要件を実装するには、かなりハック的なアプローチが必要です。まず、Tableコンポーネントのロジックを観察し、「さらに展開」アイコンは子ノードを持つ子ノードにのみ表示されることを発見しました。

したがって、アイデアとしては、has_next などのフィールドをバックエンドと合意し、データを前処理するときに、最初にこれらのノードを走査して、偽のプレースホルダーの子を追加するというものです。

次に、ノードが展開されると、偽の子ノードが削除され、ノード上の特別な is_loading フィールドを変更することで、カスタム アイコン レンダリング コードに読み込みアイコンが表示されます。

再帰ツリーのロジックに戻って、次のコードを追加します。

関数rewriteTree({ データソース }) {
 traverseTree(データソース、childrenColumnName、(ノード、親、レベル) => {
 if (ノード[次のキーを持つ]) {
 // ツリー テーブル コンポーネントでは、「展開ボタン」をレンダリングするためにnext が空でない配列である必要があります。
 // したがって、ここでプレースホルダー ノード配列を手動で追加します。
 // さらにノードがロードされ、この配列は後で onExpand で置き換えられます。
ノード[childrenColumnName] = [generateInternalLoadingNode(rowKey)]
 }
 })
 }

次に、コンポーネントを強制的にレンダリングするための `forceUpdate` 関数を実装する必要があります。

 const [_, forceUpdate] = useReducer((x) => x + 1, 0)

次に、onExpand のロジックを見てみましょう。

 const onExpand = async (展開、レコード) => {
 if (expanded && record[hasNextKey] && onLoadMore) {
 // 識別子ノードの読み込み
レコード[INTERNAL_IS_LOADING] = true  
 // 展開矢印を表示するために使用された偽の子要素を削除します
レコード[childrenColumnName] = null  
強制更新()
 const childList = onLoadMore(レコード) を待機します
レコード[hasNextKey] = false  
 addChildList(レコード、childList)
 }
 onExpandProp?.(展開、記録)
 } 
 
関数addChildList(レコード, childList) {
レコード[childrenColumnName] = 子リスト
レコード[INTERNAL_IS_LOADING] = false  
ツリーの書き換え({
データソース: childList,
親ノード: レコード
})
強制更新()
 }

ここで、onLoadMore は、より多くの子ノードを取得するためにユーザーによって渡されるメソッドです。

プロセスは次のとおりです。

1. ノードが展開される際、まずノードに読み込みフラグを書き込み、次に子ノードのデータを空にリセットします。これによりノードは展開されますが、子ノードはレンダリングされず、強制的にレンダリングされます。
2. 新しい子ノード `record[childrenColumnName] = childList` にロード後に新しい値が割り当てられたら、`forceUpdate` を使用してコンポーネントを強制的に再レン​​ダリングし、新しい子ノードを表示します。

再帰ツリーにノードを追加するためのロジックはすべて `rewriteTree` 関数内に含まれていることに注意することが重要です。したがって、新しい子ノードが追加されるたびに、この関数を再帰的に実行して、レベルや親などの情報を追加する必要があります。

新しく追加されたノードのレベルは、親ノードのレベルを加算して計算する必要があり、1から始めることはできません。そうしないと、レンダリング時のインデント線が乱れてしまいます。そのため、この関数をparentNodeパラメータを含むように書き換え、トラバーサル中に書き込まれるレベルを親ノードに既に存在するレベル分だけ増加させる必要があります。

関数rewriteTree({
データソース、
 // サブツリー ノードを動的に追加する場合は、親参照を手動で渡す必要があります。
親ノード = null  
 }) {
 // サブツリー ノードを動的に追加する場合は、親ノードのレベルを手動で渡す必要があります。そうしないと、レベルは1 から計算されます。
 const startLevel = parentNode?.[INTERNAL_LEVEL] || 0 
 
 traverseTree(データソース、childrenColumnName、(ノード、親、レベル) => {
親 = 親 || 親ノード;
 // ノードの階層を記録する
ノード[INTERNAL_LEVEL] =レベル+ 開始レベル;
 // ノードの親ノードを記録する
ノード[INTERNAL_PARENT] = 親; 
 
 if (ノード[次のキーを持つ]) {
 // ツリー テーブル コンポーネントでは、「展開ボタン」をレンダリングするためにnext が空でない配列である必要があります。
 // したがって、ここでプレースホルダー ノード配列を手動で追加します。
 // さらにノードがロードされ、この配列は後で onExpand で置き換えられます。
ノード[childrenColumnName] = [generateInternalLoadingNode(rowKey)]
 }
 })
 }

レンダリング読み込みアイコンのカスタマイズは非常に簡単です。

 // expandIcon プロパティをTableコンポーネントに渡すだけです。
エクスポート const TreeTableExpandIcon = ({
拡大、
拡張可能、
展開時、
記録
}) => {
 if (レコード[内部読み込み中]) {
 <IconLoading style={iconStyle} />を返します
}
 }

関数は完成しました。結果を見てみましょう。

リモート遅延読み込み

各レベルでページ区切りがサポートされます。

この関数は前の関数と似ています。ツリーを書き換える際に、ページネーションが有効かどうかを示す外部から渡されたフィールドに基づいて条件が満たされた場合、子ノード配列の末尾にプレースホルダーの Pagination ノードを追加する必要があります。

次に、このノードのレンダリング ロジックが列のレンダリング関数で書き換えられます。

記録を書き換える:

関数rewriteTree({
データソース、
 // サブツリー ノードを動的に追加する場合は、親参照を手動で渡す必要があります。
親ノード = null  
 }) {
 // サブツリー ノードを動的に追加する場合は、親ノードのレベルを手動で渡す必要があります。そうしないと、レベルは1 から計算されます。
 const startLevel = parentNode?.[INTERNAL_LEVEL] || 0 
 
 traverseTree(データソース、childrenColumnName、(ノード、親、レベル) => {
 // さらにロジックをロードする
if (ノード[次のキーを持つ]) {
 // ツリー テーブル コンポーネントでは、「展開ボタン」をレンダリングするためにnext が空でない配列である必要があります。
 // したがって、ここでプレースホルダー ノード配列を手動で追加します。
 // さらにノードがロードされ、この配列は後で onExpand で置き換えられます。
ノード[childrenColumnName] = [generateInternalLoadingNode(rowKey)]
 } 
 
 // ページネーションロジック
if (childrenPagination) {
 const { totalKey } = childrenPagination;
 const nodeChildren = node[childrenColumnName] || [];
 const [lastChildNode] = nodeChildren.slice?.(-1);
 // ページネーションツールをレンダリングし、まずプレースホルダーノードを追加します
もし （
        ノード[合計キー] > ノードチャイルド?.長さ &&
 // ページ区切りプレースホルダの重複を防ぐ
!isInternalPaginationNode(最後の子ノード、行キー)
 ）{
 nodeChildren?.push?.(generateInternalPaginationNode(rowKey));
 }
 }
 })
 }

列を書き換える:

関数rewriteColumns() {
 /**
 * プレースホルダーに基づいてページ区切りコンポーネントをレンダリングします。
 /
 const rewritePaginationRender = (列) => {
列.render =関数ColumnRender(テキスト, レコード) {
もし （
 isInternalPaginationNode(レコード、行キー) &&
        dataIndex === indentLineDataIndex
 ）{
 <ページネーション />を返す
}
レンダリングを返しますか?(テキスト、レコード) ?? テキスト
}
 } 
 
 columns.forEach((列) => {
 rewritePaginationRender(列)
 })
 }

実装されたページネーション効果を見てみましょう。

リファクタリングと最適化

より多くの機能が記述されるにつれて、ロジックは Antd テーブルのさまざまなコールバック関数に結合されるようになります。

• ガイドラインのロジックは、rewriteColumns とコンポーネント全体に分散されます。
• ページネーション ロジックは rewriteColumns と rewriteTree に分散されます。
• より多くのデータをロードするためのロジックは、rewriteTree と onExpand に分散されます。

この時点で、コンポーネントのコードは 300 行に達しており、コード構造をざっと見てみると、かなり乱雑になっていることがわかります。

エクスポート const TreeTable = (rawProps) => {
関数rewriteTree() {
 // 🎈さらにロジックを読み込む
// 🔖 ページネーションロジック
} 
 
関数rewriteColumns() {
 // 🔖 ページネーションロジック
// 🏁 インデントロジック
} 
 
 constコンポーネント = {
 // 🏁 インデントロジック
} 
 
 const onExpand = async (展開、レコード) => {
 // 🎈 さらにロジックを読み込む
} 
 
戻り値<テーブル/>
 }

コードをさまざまな機能に分散させるのではなく、機能ごとにグループ化できるメカニズムはありますか?

 // 🔖 ページネーションロジック
const usePaginationPlugin = () => {}
 // 🎈 さらにロジックを読み込む
const useLazyloadPlugin = () => {}
 // 🏁 インデントロジック
const useIndentLinePlugin = () => {} 
 
エクスポート const TreeTable = (rawProps) => {
ページネーションプラグイン()を使用する
 
レイジーロードプラグイン() 
 
インデントラインプラグイン() 
 
戻り値<テーブル/>
 }

そうです、ロジックの分離という点では VueCompositionAPI と React Hook による改善と非常に似ていますが、このコールバック関数構文で実現するのは少し難しいように思えます。

次の記事では、独自に設計したプラグイン メカニズムを使用して、このコンポーネントの結合コードを最適化する方法について説明します。

フォローと友達追加をお忘れなく。フロントエンドの知識や業界情報を随時共有していきます。2021年を一緒に乗り越えましょう。

この記事は、WeChat公式アカウント「上級者からプロまで、フロントエンド開発」から転載したものです。以下のQRコードからアクセスできます。転載の許可については、「上級者からプロまで、フロントエンド開発」公式アカウントまでお問い合わせください。