Recharts 是 2016 年初團隊可視化組推出的一款可視化組件庫，為基礎表格的繪製提供了另外一種可能。
Recharts 含義是重新定義（Redefined）圖表。這個名字的背後在於這個圖表在設計上帶給開發者的是不一樣的體驗，不僅是用 React 設計，也在於重新定義了組合與配置方式。
大家可以回顧一下在做圖表類的需求時，碰到最糾結的問題是什麼？這裡列了一些我碰到最多的問題：
- 配置非常複雜，可配置的內容太多，找不到到底使用什麼配置項來達到想要的目的
- 很多樣式無法完全統一，變化很多。這個線圖怎麼多了條線？這個柱圖的“柱子”怎麼是個三角形？
那 Recharts 是怎麼解決這些問題呢？
- 聲明式的標籤，讓寫圖表和寫 HTML 一樣簡單
- 貼近原生 SVG 的配置項，讓配置項更加自然
- 接口式的 API，解決各種個性化的需求
下面我們將仔細分析這些是怎麼實現的。
在看代碼實現之前，我們先看看怎樣一步步的根據各自的需求創建一個線圖：
首先，通過調用 LineChart 添加一條 dataKey 為 pv 的 Line：
運行代碼後結果如下：
然後，我們可以根據自己的需求去豐富這個線圖，比如這個線圖需要一個 X 軸和 Y 軸，那隻需要在 LineChart 下添加一個 XAxis 和 YAxis 標籤即可：
運行代碼結果如下：
大家看到用 Recharts 繪製圖表很多時候就想拼積木一樣，那 LineChart 內部是如何去識別這些『零件』的呢？我們先來看一個簡單的函數：
這個方法很簡單，可以用來讀取某個 ReactComponent 的名稱。在 LineChart 的代碼實現中，就是根據 ReactComponent 的 displayName 來識別所有的 Children。我們先來看一個工具方法：
這裡 type 可以是 ReactComponent 或者 ReactComponent 數組。而 LineChart 內部實現的時候就是調用這個方法來識別各個『零件』：
...
render() {
const { children } = this.props;
const lineItems = findAllByType(children, Line);
...
}
貼近原生的配置項
圖表的配置項可以非常多，但是有很多配置項如填充顏色、描邊顏色、描邊寬度等等這些都是SVG標籤原生就支持的屬性，為了減小大家的配置的成本，Recharts 的組件會去解析原生的屬性。舉個例子，一個線圖裡面有兩條曲線，我想給一條曲線設置成虛線，一條設置成實線，我們只需要像原生的 SVG 元素一樣設置 stroke-dasharray 屬性就行：
結果如下：
實現原理也比較簡單，首先 Recharts 內部維護一份 SVG 元素支持的所有屬性，然後在渲染 SVG 元素之前，我們會去解析相應的ReactElement的 props，看看哪些是 SVG 元素能夠支持的屬性，最終這些屬性可以傳入到渲染的 SVG 元素中。
接口式的 API
很多時基礎圖表往往不能滿足所有的要求，那怎麼去滿足各種個性化的需求成了圖表組件必須要考慮的事情。
Recharts 對可能會變化的元素都提供了自定義的接口，以x軸的刻度為例，普通的刻度就是一些文字，在信息圖表中，為了讓圖表更佳的生動，視覺往往希望能夠將文字替換成形象的 icon。
對於這種自定義的需求，Recharts 提供了兩種方式，第一種是通過 React Element 的方式：
通過將 tick 設置成一個 React Element，在拿到內部 props 的同時，也可以非常方便的從外部傳入 props。
第二種自定義的方式是通過 function：
這種方法，renderCustomizedTick 中拿到的參數和 CustomizedTick 的 props 是一樣的，當然這種自定義的方法外部傳參數會稍微麻煩一些。
看到這裡大家可能會好奇內部是怎麼去實現？原理也非常簡單，我們在內部計算好 tick 的位置等信息，然後判讀 tick 參數的類型，實現代碼簡化如下：
看到這裡大家可以發現 Recharts 內部主要做了計算各種 layout 的事，每個區塊具體展示什麼內容都是可以自定義的。
延伸
到這裡我們已經介紹了 Recharts 實現可視化組件的一些核心思想，其實這些思想不只是在可視化組件中可以應用，很多組件也可以考慮利用這種思想來實現，例如表格組件就可以抽取Table 和 Column 兩個組件，然後大家使用表格也非常簡單：
閱讀更多 JS加加網 的文章
