反应PropTypes与流量

reactjs React.js

凯JinJin

2020-03-12

PropTypes和Flow涵盖了类似的内容,但是使用的是不同的方法。PropTypes可以在运行时向您发出警告,这有助于快速找到来自服务器等的格式错误的响应。但是,Flow似乎是未来,并且泛型等概念是非常灵活的解决方案。另外,Nuclide提供的自动补全功能对Flow来说是一大优势。

现在我的问题是,开始新项目时哪种方法最好。还是同时使用Flow和PropTypes是一个好的解决方案?使用两者的问题是您编写了大量重复的代码。这是我编写的音乐播放器应用程序的示例:

export const PlaylistPropType = PropTypes.shape({
    next: ItemPropTypes,
    current: ItemPropTypes,
    history: PropTypes.arrayOf(ItemPropTypes).isRequired
});

export type Playlist = {
    next: Item,
    current: Item,
    history: Array<Item>
};

这两个定义基本上都包含相同的信息,并且当更改数据类型时,两个定义都需要更新。

我发现这个babel插件可以将类型声明转换为PropTypes,这可能是一个解决方案。

第1091篇《反应PropTypes与流量》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
GO宝儿 2020.03.12

尝试仅使用Flow声明道具的类型。指定错误的类型,例如数字而不是字符串。您会看到,这将在使用Flow感知编辑器中使用该组件的代码中进行标记。但是,这不会导致任何测试失败,并且您的应用仍然可以运行。

现在添加使用带有错误类型的React PropTypes。运行该应用程序时,这将导致测试失败并在浏览器控制台中被标记。

基于此,似乎即使正在使用Flow,也应该指定PropTypes。

猪猪十三 2020.03.12

我相信这里遗漏的一点是Flow静态检查器,PropTypes运行时检查器,这意味着

  • 可以在编码时在上游拦截错误:理论上它可以遗漏一些您不会知道的错误(例如,如果您在项目中实现的流不够,或者对象嵌套很深)
  • PropTypes在测试时会在下游捕获它们,因此永远不会错过
逆天米亚 2020.03.12

提出此问题一年后,我想提供有关该问题的经验的最新信息。

随着Flow的发展,我开始用它输入代码库,并且没有添加任何新的PropType定义。到目前为止,我认为这是个好方法,因为如上所述,它不仅使您可以键入prop,而且还可以键入代码的其他部分。例如,当您拥有状态中的道具副本时,这非常方便,可由用户修改。而且,IDE中的自动完成功能是一项了不起的成就。

一个方向或另一个方向的自动转换器并没有真正起飞。因此,对于新项目,我现在真的建议使用Flow over PropTypes(以防您不想重复输入两次)。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android