前两天想要尝试编写一个 React UI组件库进行练习，UI组件库必备的内容，就是文档的编写，而这也是重中之重。于是调研了一下前端社区 React 组件文档的一些解决方案。

react-docgen

react-docgen 是一个 CLI 和工具箱，可帮助从 React 组件中提取信息并从中生成文档。它使用 ast 类型和@ babel / parser 将源解析为 AST，并提供处理此 AST 的方法以提取所需的信息。输出/返回值是一个 JSON blob / JavaScript 对象。

官方提供的react中代码生成文档，并作为很多文档工具的底层依赖

组件内容

import React, { Component } from 'react';
import PropTypes from 'prop-types';

/**
 * General component description.
 */
class MyComponent extends Component {
  render() {
    // ...
  }
}

MyComponent.propTypes = {
  /**
   * Description of prop "foo".
   */
  foo: PropTypes.number.isRequired,
  /**
   * Description of prop "bar" (a custom validation function).
   */
  bar: function(props, propName, componentName) {
    // ...
  },
  baz: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
};

MyComponent.defaultProps = {
  bar: 21,
};

export default MyComponent;

抽离出的json

{
  "props": {
    "foo": {
      "type": {
        "name": "number"
      },
      "required": true,
      "description": "Description of prop \"foo\"."
    },
    "bar": {
      "type": {
        "name": "custom"
      },
      "required": false,
      "description": "Description of prop \"bar\" (a custom validation function).",
      "defaultValue": {
        "value": "21",
        "computed": false
      }
    },
    "baz": {
      "type": {
        "name": "union",
        "value": [
          {
            "name": "number"
          },
          {
            "name": "string"
          }
        ]
      },
      "required": false,
      "description": ""
    }
  },
  "description": "General component description."
}

效果图

Storybook

Storybook是一个开源工具，用于为React、Vue、Angular等独立开发UI组件。它使构建令人惊叹的ui有组织和高效。

优点：

分开展示各个组件不同属性下的状态
该工具适用于react、vue、angualar等
能追踪组件的行为并且具有属性调试功能
可以为组件自动生成文档和属性列表

效果图

Docz

Docz使你可以更轻松地为你的代码构建Gtabsy支持的文档网站。它基于MDX（Markdown + JSX），即利用markdown进行组件文档化。

Docz 的特色是零配置、简单、快速，它使用 Markdown 语法的扩展 MDX (在 Markdown 里引入 React 组件并渲染出组件)来书写文档，对于熟悉 Markdown 的开发者是可以直接上手的。 Docz使您能够快速创建实时重载，seo友好，生产就绪的文档网站与MDX和自定义的外观。

效果图