值得了解的6大React组件文档化工具（推荐收藏）-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

本篇文章给大家推荐让React组件如文档般展示的6大工具。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

如果没有人能够理解并找到如何使用我们的组件，那它们有什么用呢？

React鼓励我们使用组件构建模块化程序。模块化给我们带来了非常多的好处，包括提高了可重用性。然而，如果你是为了贡献和复用组件，最好得让你的组件容易被找到、理解和使用。你需要将其文档化。

目前，使用工具可以帮助我们实现自动化文档工作流程，并使我们的组件文档变得丰富、可视化和可交互。有些工具甚至将这些文档组合为共享组件的工作流程的组成部分。

为了轻而易举地将我们的组件文档化，我收集了一些业界流行的工具，如果你有推荐的组件也可以评论留言。

1. Bit

共享组件的平台

Bit不仅是一个将组件文档化的工具，它还是一个开源工具，支持你使用所有文件和依赖项封装组件，并在不同应用程序中开箱即用地运行它们。
在Bit，你可以跨应用地共享和协作组件，你所有共享组件都可以被发现，以便你的团队在项目中查找和使用，并轻松共享他们自己的组件。

在Bit中，你共享的组件可以在你们团队中的组件共享中心找到，你可以根据上下文、bundle体积、依赖项搜索组件，你可以非常快地找到已经渲染好的组件快照，并且选择使用它们。

浏览bit.dev上的组件

当你进入组件详情页时，Bit提供了一个可交互的页面实时渲染展示组件，如果该组件包含js或md代码，我们可以对其进行代码修改和相关调试。

找到想要使用的组件后，只需使用NPM或Yarn进行安装即可。你甚至可以使用Bit直接开发和安装组件，这样你的团队就可以协作并一起构建。

通过Bit共享组件，就不需要再使用存储库或工具，也不需要重构或更改代码，共享、文档化、可视化组件都集中在一起，并且也能实现开箱即用。

快速上手：
Share reusable code components as a team ? Bit
teambit/bit

2. StoryBook & Styleguidist

StoryBook和StyleGuidist是非常棒的项目，可以帮助我们开发独立的组件，同时可以直观地呈现和文档化它们。

StoryBook 提供了一套UI组件的开发环境。它允许你浏览组件库，查看每个组件的不同状态，以及交互式开发和测试组件。在构建库时，StoryBook提供了一种可视化和记录组件的简洁方法，不同的AddOns让你可以更轻松地集成到不同的工具和工作流中。你甚至可以在单元测试中重复使用示例来确认细微差别的功能。

StyleGuidist是一个独立的React组件开发环境并且具备实时编译指引。它提供了一个热重载的服务器和即时编译指引，列出了组件propTypes并展示基于.md文件的可编辑使用示例。它支持ES6，Flow和TypeScript，并且可以直接使用Create React App。自动生成的使用文档可以帮助Styleguidist作为团队不同组件的文档门户。

阅读剩余部分