React PropTypes 与 Flow

Posted 2023-03-08

【中文标题】React PropTypes 与 Flow

【英文标题】：React PropTypes vs. Flow

【发布时间】：2016-07-04 01:47:31

【问题描述】：

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 plugin 可以将类型声明转换为 PropTypes，这可能是一个解决方案。

【问题讨论】：

如果你想开始使用 Flow，试试这个帖子：robinwieruch.de/the-soundcloud-client-in-react-redux-flow

从经验来看，使用问题中提到的插件并不是一个很好的主意。它不支持所有类型的组件，从 v0.39 开始完全被 React Native 破坏，并且通常非常脆弱。回购的所有者过去对这些问题的反应相当迅速，但似乎他失去了兴趣，再也不能依靠他来维持它。

尝试使用 Flow 和 tcomb 进行静态和运行时类型检查的 tcomb via Babel 插件。

【参考方案1】：

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

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

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

【讨论】：

您使用哪个 IDE？网络风暴？

我正在使用 Atom 和 ide-flowtype 插件。

你在使用 childContextTypes 时仍然需要 propTypes - ***.com/questions/42395113/…

由于新的上下文 API，在处理子上下文时不再需要使用 propTypes：reactjs.org/docs/context.html

【参考方案2】：

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

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

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

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

如果您只是想检查道具类型，那么不要过度复杂您的代码库的其余部分并使用更简单的选项。

【讨论】：

是的，它们的工作方式非常不同。但是，我认为使用它们的目的非常相似。但是您指出的一件事是一个好点：Flow 让您覆盖更多代码库，而在使用 PropTypes 时您仅限于 props。

只有当你只使用Flow来检查prop类型时，使用目的才非常相似。一个基本上是一种语言，另一个几乎是一个库。

完全同意@DanPrince。而且我认为使用 PropTypes 检查来自服务器的格式错误的响应并不是一个好主意。如果您对此进行手动检查并且您的 UI 正确响应（例如显示警告消息）而不是仅仅向控制台抛出警告，则更好。

@YanTakushevich 你需要两者都做。无论如何，PropTypes 都应该在生产过程中禁用，因此您始终需要手动检查以确保您的用户有良好的体验。但是，PropTypes 对于开发期间的运行时警告非常有用。这只是一个很好的安全网，可确保您不会忘记任何事情。

【参考方案3】：

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

Flow

可以在编码时拦截上游错误：理论上它可能会遗漏一些您不知道的错误（例如，如果您在项目中没有充分实施流程，或者在深层嵌套对象的情况下）

PropTypes

会在测试时捕捉到下游，所以它不会错过

【讨论】：

这里已经有专门的 babel 插件了npmjs.com/package/babel-plugin-flow-react-proptypes

【参考方案4】：

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

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

基于此，看来即使使用Flow，也应该指定PropTypes。

【讨论】：

这取决于测试是如何完成的，如果您使用 jest 的快照测试，测试将失败并显示无效的属性值。

IDE 中错误的优势在于，您甚至可以在运行测试之前立即看到它。

加 1 用于腰带和吊带接近。