如何开发并维护一个开源的 React 组件?

3 年前

感谢 @达峰的夏天 的投稿。达峰的夏天是一位 Web 开发者,关注移动和 Node.js 开发。欢迎关注他的 Github:xudafeng

如今 React 被广泛应用在各类应用上,直观的编程方式,易学易用的工具链,丰富的生态等等优点被大家所钟爱。

相信你已经熟悉 React 的用法和相关的开发工具,本文就不赘述 React 用法、特性等,换种思路,分享一下几个月前开发的组件 autoresponsive-react 过程中的几点心得体会。想熟悉 React 用法推荐看阮一峰老师写的 React 入门实例教程

确定要解决的问题

组件开发首要清晰的是,我们要解决什么问题?

我们一直在尝试解决 Web 布局问题。自动化布局 一定程度上可以降低开发成本。首先我们要做到自然和直观的使用体验,同时减少布局上的约束条件。除此之外,用户对于布局的元素还可能会有条件排序,图文混排,自然流,动画等很多自定义需求。欣喜的是,React 去DOM化 的开发思路很适合完成这样的事,而且使用组件时直接嵌套一个标签即可。

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

示例一目了然

给使用者一目了然的示例,便于用户加深印象,最好有互动示例

使用者或其他开发者对组件的第一印象就是我们提供的示例,我们提供最基本的排序和布局范例,如下图(点击查看动图):

如果有需要,可以提供更加形象和例子(动图):

也可访问相关链接:

提供简明的文档

文档个人认为内容不要太多,基本的 API 和生命周期描述就够了,尽量减少初始化配置相关的描述,避免使用者压力太大

推荐提供一份英文文档很有必要,国外的 React 开发者相对要多,如果只有中文文档,国外用户会很麻烦。

提取核心算法,实现多端支持

于开发者来说,多端支持的理想方式是 “write once, run anywhere.”,然RN发布的理念却是 “learn once, write anywhere.”,理念差距蛮大。”write once” 当然也能够在工程上加以实现,这要依据工程化的必要性、使用场景和投入产出等多方面促成原因。

要实现多端支持,首先要对核心算法进行提取,我们将其提取为 autoresponsive-common。这样做利于工程无关的多向扩展,也利于后面对算法进行定制从而进一步开放。

这样之后,autoresponsive-react-native 就成为了 autoresponsive-react 的一致性实现。

从代码结构上看,初始化和渲染部分几近相同。

RN 的效果如下(动图):

也可访问相关链接:

发散思维

除了布局方面,autoresponsive 核心算法能做的还有很多。不妨发散一下思维,举个例子。我们可以编写个小游戏,当然,原理与布局大同小异(动图)。

放松一下? 戳链接 - 钻石迷情

测试用例与 CI

覆盖测试用例是最重要的一环

为我们的组件覆盖测试用例是非常必要的,添加过 CI 标识的项目会显得靠谱一点。试想一下,如果项目都跑不起来,岂不浪费其他使用者的时间?为我们的组件覆盖测试用例是非常必要的,添加过 CI 标识的项目会显得靠谱一点。试想一下,如果项目都跑不起来,岂不浪费其他使用者的时间?

React 组件的测试用例编写也很方便,如果你愿意,可以完全不用浏览器运行时环境。React 也对测试提供了强大的支持,使用 React.addons.TestUtils 配合 jsdom,选择常用的流程控制框架和断言库即可完成测试覆盖。

处理 PR

及时处理PR,弄清楚用户的要求

组件会有其他使用者的 issue 或 PR,主要集中在 bugfix、版本兼容性,构建方式改进等几个方面。在不违背组件设计和理念的情况下,尽量满足和实现。国外用户会相对活跃一些。组件会有其他使用者的 issue 或 PR,主要集中在 bugfix、版本兼容性,构建方式改进等几个方面。在不违背组件设计和理念的情况下,尽量满足和实现。国外用户会相对活跃一些。

相关推荐

微博关注:前端外刊评论

0
推荐阅读