原创 typescript 改造二三事

故事背景 最近項目中遇到了這樣的問題,接手了一段代碼,代碼中定義了一個對象 item ,接下來的方法根據 item 內部的某些字段進行一頓 format 操作,問題的關鍵在於,我接手的時候沒有人給我講這個 item 對象內部都有什麼字段,表

原创 React 高階組件使用心得

高階組件(HOC)是 React 中用於複用組件邏輯的一種高級技巧。HOC 自身不是 React API 的一部分,它是一種基於 React 的組合特性而形成的設計模式。具體而言,高階組件是參數爲組件,返回值爲新組件的函數。還不瞭解高階組件

原创 優雅的在React組件中註冊事件

前言 在React的開發中,我們經常需要在 window 上註冊一些事件, 比如按下 Esc 關閉彈窗, 按上下鍵選中列表內容等等。比較常見的操作是在組件 mount 的時候去 window 上監聽一個事件, 在組件 unmount 的時候

原创 手把手教你寫一個滑動條組件

前言 大家經常使用的滑動條組件如下圖所示下面我教大家如何自己寫一個滑動條組件。 組件分析 在寫組件的第一步,我們先做一個組件的拆分,思考一下一個滑動條鎖必備的基本要素是什麼。從圖上我們可以看出,一個滑動條分爲左右兩個部分:左邊一個 Rang

原创 解讀 React 的 pooledClass.js

前言 在學習 React 事件系統的時候,在事件分發的 dispatch方法發現了調用了一個 pooledClass 方法,一時半會沒看明白這個方法的用意。 我們先看一下是怎麼用的: // step1 function TopLevelCa