我花了一些精力來創作本文，以及熬夜編寫本文的示例程序，以便您能在閱讀之後可以實踐參考，閱讀後如果覺得對您有幫助，可以關注作者、收藏和點贊本文，這是對作者寫出優質文章最大的鼓勵了。如果手機上閱讀代碼不方便，可以收藏後在電腦上閱讀。
使用React寫一個支持排序的表格組件可能聽起來是一項艱鉅的任務，但它並不一定是非常困難的。與其使用外部庫，不如自己動手做一些東西。
在本文中，我將創建一種可重用的方法來對React中的表格數據進行排序功能，並且使用React Hook的方式編寫。我將詳細介紹每個步驟，並在此過程中學習一系列有用的技術，如 useState、useMemo、自定義Hook的使用。
本文不會介紹基本的React或JavaScript語法，但你不必是React方面的專家也能跟上，最終我們的效果如下。
可以排序的表格組件
第一步，用React創建表格
首先，讓我們創建一個表格組件，它將接受一個產品（product）數組，並輸出一個非常基本的表，每個產品列出一行。
在這裡，我們接受一個產品數組，並將它們循環到表中，它是靜態的。
第二步，對數據進行排序
如果你相信所有的白板面試官，你會認為軟件開發幾乎就是所有的排序算法。幸運的是，我們不會在這裡討論快速排序或冒泡排序。
得益於內置的數組函數sort()， JavaScript中的數據排序非常簡單，它將對數字和字符串數組進行排序，而無需額外的參數：
<code>const array = ['mozzarella', 'gouda', 'cheddar'];
array.sort();
console.log(array); // ['cheddar', 'gouda', 'mozzarella']/<code>
首先，按照名稱的字母順序對數據進行排序。
這裡首先創建了一個 products 的副本，我們可以根據需要更改和更改。我們需要這樣做，因為 Array.prototype.sort 函數會更改原始數組，而不是返回新的排序後的副本。
接下來，我們調用 sortedProducts.sort，並將其傳遞給排序函數。我們檢查第一個參數 a 的 name 屬性是否在第二個參數b 之前，如果是，則返回負值，這表示列表中 a 應該在 b 之前。如果第一個參數的名稱在第二個參數的名稱之後，我們將返回一個正數，表示應將 b 放在 a 之前。如果兩者相等（即名稱相同），我們將返回 0 以保留順序。
第三步，使我們的表格可排序
現在我們可以確保表是按名稱排序的——但是我們如何改變排序順序呢？要更改排序依據的字段，我們需要記住當前排序的字段。我們將使用useState Hook。
一開始我們什麼都不排序。接下來，讓我們更改表標題，以包含一種方法來更改我們想要排序的字段。
現在，每當我們單擊一個表標題時，我們都會更新要排序的字段。
我們還沒有做任何實際的排序，我們繼續。還記得之前的排序算法嗎？這裡只是稍微修改了一下，以便與我們的字段名一起使用。
首先，我們要確定我們選擇了一個字段來排序，之後我們將根據該字段對產品排序。
第四步，升序和降序操作
我們要看到的下一個功能，是一種在升序和降序之間切換的方法，通過再次單擊表的標題項在升序和降序之間切換。
為此，我們需要引入第二種狀態：排序順序。我們將重構當前的 sortedField 狀態變量，以保留字段名及其排序方向。該狀態變量將不包含字符串，而是包含一個帶有鍵（字段名稱）和排序方向的對象。我們將其重命名為 sortConfig，以使其更加清晰。
這是新的排序函數：
現在，如果方向是“ascending(升序)”，我們將像以前一樣進行。如果不是，我們將採取相反的操作，以降序排列。
接下來，我們將創建一個新函數 requestSort，它將接受字段名稱並相應地更新狀態。
我們還必須更改我們的點擊事件處理函數才能使用此新功能！
現在我們看起來功能已經很完整了，但是還有一件重要的事情要做。我們需要確保只在需要時才對數據進行排序。目前，我們正在對每個渲染中的所有數據進行排序，這將導致各種各樣的性能問題。相反，讓我們使用內置的 useMemo Hook 來記憶所有會導致緩慢的部分！
useMemo 是一種緩存或記憶昂貴計算的方法。給定相同的輸入，如果我們出於某種原因重新渲染組件，它不必對產品進行兩次排序。請注意，每當我們的產品發生變化，或者根據變化對字段或排序方向進行排序時，我們都希望觸發一個新的排序。
在這個函數中包裝我們的代碼將對我們的表排序產生巨大的性能影響！
優化，讓代碼可複用
對於 hooks 最好的作用就是使代碼複用變得很容易，React具有稱為自定義 Hook 的功能。它們聽起來很花哨，但它們都是常規函數，在其中使用了其他 Hook。讓我們將代碼重構為包含在自定義 Hook 中，這樣我們就可以到處使用它了！
這幾乎是我們先前代碼的複製和粘貼，並引入了一些重命名。useSortableData 接受 items 和一個可選的初始排序狀態。它返回一個帶有已排序 items 的對象和一個用於重新排序 items 的函數。
我們的代碼現在看起來像這樣：
最後一點
缺少一小部分，一種指示表格如何排序的方法。為了表明這一點，在我們的設計中，我們還需要返回內部狀態 sortConfig
。讓我們返回它，並使用它來生成樣式以應用到我們的表格標題！
至此，我們完成了！讓我們再看一下我們的最終成果！
事實證明，創建自己的表排序算法並不是不可能的事情。我們找到了一種對狀態進行建模的方法，編寫了通用的排序函數，並編寫了更新排序首選項的方法。我們確保所有東西都是高性能的，並將其重構到一個定製的 Hook 中。最後我們提供了一種向用戶指示排序順序的方法。
感謝您的閱讀。獲取本文源碼請點擊頭像私信回覆：“表格源碼”，你將可以在線體驗。
本示例效果和源碼
本頭條號聚焦大前端技術和程序員成長，如果對你有所啟發和幫助，可以點個關注、收藏。
作者簡介：同名微信公眾號作者，Web前端工程師，全棧開發工程師、持續學習者。
現在關注做同名微信公眾號，送精品視頻視頻教程大禮包！
閱讀更多 做工程師不做碼農 的文章
