在開發(fā)React組件時(shí)我們通常需要處理2個(gè)問(wèn)題：

實(shí)例化這個(gè)組件以便調(diào)試

為這個(gè)組件編寫使用文檔以便更好的讓別人知道怎么使用這個(gè)組件

最原始的方法莫過(guò)于開發(fā)時(shí)建一個(gè)頁(yè)面用于調(diào)試，開發(fā)完后再為其手寫文檔。然而一個(gè)詳細(xì)的React組件文檔應(yīng)該包括：

為各種使用場(chǎng)景編寫demo以及對(duì)應(yīng)的說(shuō)明，同時(shí)附上demo的源碼

有demo可以當(dāng)場(chǎng)體驗(yàn)而不是使用者要自己寫代碼后才能體驗(yàn)這個(gè)組件

它的屬性列表(propTypes)

它的實(shí)例方法列表

如果你想做到以上估計(jì)得花上你一天的功夫，我希望能把精力放在開發(fā)更好的組件上剩下的能毫不費(fèi)勁的優(yōu)雅完成，于是我做了本文的主角Redemo。
Redemo是用來(lái)簡(jiǎn)單優(yōu)雅的完成以上問(wèn)題讓你專注于開發(fā)自己的組件，剩下的一切它都為你做好了。先看下Redemo為組件生成文檔的效果圖或直接體驗(yàn)部分實(shí)踐中的項(xiàng)目redemo文檔、imuix：

結(jié)構(gòu)如下：

• 最上面是可立即體驗(yàn)的組件demo，同時(shí)可以用在開發(fā)過(guò)程中調(diào)試組件

• 組件實(shí)例下是這個(gè)demo的說(shuō)明，支持markdown

• 接下來(lái)是組件的屬性列表(propTypes)，支持markdown

• 最后是這個(gè)demo的源碼

為你的組件生成這個(gè)你幾乎不用寫超過(guò)10行簡(jiǎn)單的代碼更不用單獨(dú)為組件寫文檔。假設(shè)你編寫了一個(gè)Button組件，讓我們來(lái)為Button組件編寫一個(gè)demo：

通過(guò)npm i redemo 安裝 redemo

寫下這些簡(jiǎn)單的代碼

import Redemo from 'redemo'; import Demo from './demo';//為一個(gè)使用場(chǎng)景實(shí)例化Button組件的demo源碼 // 使用docgen 從 Button 組件源碼里分析出 propTypes const docgen = require('!!docgen-loader!../button'); // 讀取為Button組件編寫的demo的源碼 const code = require('!!raw-loader!../demo'); const doc = `為這個(gè)demo做一些說(shuō)明，支持*markdown*` render( <Redemodocgen={docgen}doc={doc}code={code} ><Demo/> </Redemo> )

聰明的你大概會(huì)問(wèn)以上代碼并沒(méi)有為Button屬性編寫文檔，屬性列表里的說(shuō)明是哪來(lái)的？其實(shí)是通過(guò)react-docgen從Button組件源碼里提取出來(lái)的。大家都知道為代碼寫注釋是個(gè)好習(xí)慣方便維護(hù)和理解，而這些注釋正好也可以放在文檔里一舉兩得。所以你在編寫B(tài)utton組件時(shí)需要為propTypes寫注釋，就像這樣：

class Button extends Component {static propTypes = {/*** call after button is clicked，支持*markdown**/onClick: PropTypes.func,}... }

想更深的了解redemo請(qǐng)看這里
希望redemo可以提升你的效率，覺(jué)得有用可告訴你的朋友。

閱讀原文

總結(jié)

以上是生活随笔為你收集整理的快速优雅的为React组件生成文档的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。