1.9 在组件开发中使用Storybook

问题

React应用程序是用一个个React组件搭建而成的。如果组件编写得当，我们是可以在其他React应用程序中轻松复用这些组件的。但创建组件后，检查组件在其他情况下是否也能正常工作并不容易。例如，在异步应用程序中，React组件在运行时接收到的属性可能是undefined（未定义的）。此时这些组件仍然能正确显示吗？它会显示错误吗？

但是，如果你在为一个复杂的应用程序创建组件，那么你的组件很难适用于所有情况。

此外，如果你团队中的用户体验（UX）开发人员——如果有的话——查看特定组件时还需要在应用程序中到处翻找，那么可能会比较浪费时间。

如果有种方法可以将组件单独集中展示，并且还可以提供一些组件的属性示例，那么将会很有帮助。

解决方案

Storybook是一个用于展示不同状态下UI组件的工具。你可以把它当成组件状态的管理器。实际上，Storybook也是可以用作组件开发的工具。

如何将Storybook添加到项目中呢？首先用create-react-app创建一个React应用程序：

现在我们可以把Storybook添加到项目中：

然后我们用yarn或npm启动Storybook服务器：

Storybook在端口9000上运行一个独立的服务器，如图1-11所示。当使用Storybook时，不需要运行实际的React应用程序。

Storybook将带有示例属性的单个组件称为一个 story 。Storybook的默认安装会在应用程序的 src/stories 目录中生成示例story。例如，如下是 src/stories/Button.stories.js ：

Storybook会监视源文件夹中名为* .stories.js 的文件，这个文件没有存储位置限制，所以你可以在任意地方创建它们。一个典型的做法是把stories放在它们所展示的组件旁边的文件夹中。这样的话，当你要把这个文件夹复制到另一个应用程序中时，你就不会遗漏stories文件夹，而是能够一起复制过去。

图1-12显示了 Button.stories.js 在Storybook中的呈现方式。

讨论

尽管Storybook外观简单，但它是一种高效的开发工具。它能让你一次只关注一个组件。类似于一种可视化的单元测试，它让你能够在一系列可能的场景中检查组件是否能正常工作。

Storybook有一个强大的生态系统add-ons（ https://oreil.ly/3kSVa ），可以增强你的开发体验。

这些周边的生态（add-ons）可以让你：

·检查可访问性问题（ addon-a11y ）

·添加交互式的属性设置控件（ Knobs ）

·包含每个story的内联文档（ Docs ）

·记录HTML的快照，用以测试程序更改产生的影响（ Storyshots ）

除此之外，还有更多功能。

想要了解更多关于Storybook的信息，请访问官网（ https://storybook.js.org ）。

你可以从GitHub网站（ https://oreil.ly/GyxTX ）下载本解决方案的代码。 PVBibgZhvFAlKKBwKfiwiNqkcEfG2jh5JKqdc1Ymg+C+8icE5uXtJjlom9GsirRm