React PropTypes 与 Flow

IT技术 reactjs flowtype react-proptypes
2021-05-17 07:19:53

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,这可能是一个解决方案。

4个回答

在提出这个问题一年后,我想更新一下我对这个问题的体验。

随着 Flow 的发展,我开始用它输入我的代码库,并没有添加任何新的 PropType 定义。到目前为止,我认为这是一个很好的方法,因为如上所述,它不仅允许您键入 props,还允许您键入代码的其他部分。这非常方便,例如当您在 state 中有一个 props 的副本时,它可以由用户修改。此外,IDE 中的自动完成是一个很棒的收获。

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

除了两者都属于非常广泛的类型检查领域之外,两者之间并没有太多相似之处。

Flow 是一种静态分析工具,它使用该语言的超集,允许您向所有代码添加类型注释并在编译时捕获整类错误。

PropTypes 是一个基本的类型检查器,它已被修补到 React 上。除了传递给给定组件的props类型之外,它无法检查任何其他内容。

如果您希望对整个项目进行更灵活的类型检查,那么 Flow/TypeScript 是合适的选择。只要您只是将带注释的类型传递到组件中,您就不需要 PropTypes。

如果你只是想检查 prop 类型,那么不要让你的代码库的其余部分过于复杂,而选择更简单的选项。

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

  • Flow可以在编码时拦截上游错误:理论上它可能会遗漏一些您不知道的错误(例如,如果您没有在项目中实现足够的 flow,或者在深度嵌套对象的情况下)
  • PropTypes会在测试时在下游捕获它们,因此它不会错过

尝试仅使用 Flow 声明props的类型。指定不正确的类型,例如数字而不是字符串。您将看到这将在使用 Flow-aware 编辑器中的组件的代码中标记。但是,这不会导致任何测试失败,您的应用程序仍然可以运行。

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

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