如何開發並維護一個開源的 React 組件？

感謝 @達峰的夏天 的投稿。達峰的夏天是一位 Web 開發者，關注移動和 Node.js 開發。歡迎關注他的 Github：xudafeng。

如今 React 被廣泛應用在各類應用上，直觀的編程方式，易學易用的工具鏈，豐富的生態等等優點被大家所鍾愛。

相信你已經熟悉 React 的用法和相關的開發工具，本文就不贅述 React 用法、特性等，換種思路，分享一下幾個月前開發的組件 autoresponsive-react 過程中的幾點心得體會。想熟悉 React 用法推薦看阮一峰老師寫的 React 入門實例教程。

確定要解決的問題

組件開發首要清晰的是，我們要解決什麼問題?

我們一直在嘗試解決 Web 布局問題。自動化布局 一定程度上可以降低開發成本。首先我們要做到自然和直觀的使用體驗，同時減少布局上的約束條件。除此之外，用戶對於布局的元素還可能會有條件排序，圖文混排，自然流，動畫等很多自定義需求。欣喜的是，React 去DOM化 的開發思路很適合完成這樣的事，而且使用組件時直接嵌套一個標籤即可。

...render() { return ( <AutoResponsive> <Something /> </AutoResponsive> );}...

示例一目了然

給使用者一目了然的示例，便於用戶加深印象，最好有互動示例

使用者或其他開發者對組件的第一印象就是我們提供的示例，我們提供最基本的排序和布局範例，如下圖（點擊查看動圖）：

如果有需要，可以提供更加形象和例子（動圖）：

也可訪問相關鏈接：

• home live demo
• responsive example

提供簡明的文檔

文檔個人認為內容不要太多，基本的 API 和生命周期描述就夠了，盡量減少初始化配置相關的描述，避免使用者壓力太大

推薦提供一份英文文檔很有必要，國外的 React 開發者相對要多，如果只有中文文檔，國外用戶會很麻煩。

提取核心演算法，實現多端支持

於開發者來說，多端支持的理想方式是 「write once, run anywhere.」，然RN發布的理念卻是 「learn once, write anywhere.」，理念差距蠻大。」write once」 當然也能夠在工程上加以實現，這要依據工程化的必要性、使用場景和投入產出等多方面促成原因。

要實現多端支持，首先要對核心演算法進行提取，我們將其提取為 autoresponsive-common。這樣做利於工程無關的多向擴展，也利於後面對演算法進行定製從而進一步開放。

這樣之後，autoresponsive-react-native 就成為了 autoresponsive-react 的一致性實現。

從代碼結構上看，初始化和渲染部分幾近相同。

RN 的效果如下（動圖）：

也可訪問相關鏈接：

• autoresponsive-react-native 示例
• reactnative.com 中的相關說明

發散思維

除了布局方面，autoresponsive 核心演算法能做的還有很多。不妨發散一下思維，舉個例子。我們可以編寫個小遊戲，當然，原理與布局大同小異（動圖）。

放鬆一下? 戳鏈接 - 鑽石迷情

測試用例與 CI

覆蓋測試用例是最重要的一環

為我們的組件覆蓋測試用例是非常必要的，添加過 CI 標識的項目會顯得靠譜一點。試想一下，如果項目都跑不起來，豈不浪費其他使用者的時間？

React 組件的測試用例編寫也很方便，如果你願意，可以完全不用瀏覽器運行時環境。React 也對測試提供了強大的支持，使用 React.addons.TestUtils 配合 jsdom，選擇常用的流程式控制制框架和斷言庫即可完成測試覆蓋。詳

處理 PR

及時處理PR，弄清楚用戶的要求

組件會有其他使用者的 issue 或 PR，主要集中在 bugfix、版本兼容性，構建方式改進等幾個方面。在不違背組件設計和理念的情況下，盡量滿足和實現。國外用戶會相對活躍一些。

相關推薦

• Ant Design - 高質量的 UI library
• reactnative.com - RN 非官方站點
• startserver - 簡單順手的的靜態伺服器

微博關註：前端外刊評論

推薦閱讀：