反应PropTypes与stream量

PropTypes和Flow涵盖了类似的东西,但是使用了不同的方法。 PropTypes可以在运行时给你警告,这可以帮助你快速find来自服务器的错误响应等等。然而,Flow似乎是未来,像generics这样的概念是一个非常灵活的解决scheme。 Nuclide提供的自动完成function也是Flow的一大优点。

现在我的问题是,在开始一个新项目时,最好的办法是走哪条路。 或者使用Flow和PropTypes可以是一个很好的解决scheme吗? 使用两者的问题是你写了很多重复的代码。 这是我写的音乐播放器应用程序的一个例子:

export const PlaylistPropType = PropTypes.shape({ next: ItemPropTypes, current: ItemPropTypes, history: PropTypes.arrayOf(ItemPropTypes).isRequired }); export type Playlist = { next: Item, current: Item, history: Array<Item> }; 

两个定义基本上都包含相同的信息,当数据types改变时,两个定义都需要更新。

我发现这个babel插件将types声明转换为PropTypes,这可能是一个解决scheme。

在提出这个问题一年后,我想提供一个关于我如何处理这个问题的经验。

由于stream程包括了很多,我开始input我的代码库,并没有添加任何新的PropType定义。 到目前为止,我认为这是一个好的方法,因为如上所述,它不仅可以input道具而且还可以input代码的其他部分。 例如,当你在状态中有一个道具的副本时,这个function非常有用,可以由用户修改。 另外,在IDE中自动完成是一个很棒的收获。

在一个或另一个方向自动转换器并没有真正起飞。 所以对于新的项目,我现在真的会build议使用PropTypesstream(如果你不想两次input)。

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

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

PropTypes是已经被修补到React上的一个基本的types检查器。 除了传递给给定组件的道具types之外,它不能检查任何东西。

如果你想为你的整个项目更灵活的types检查,那么Flow / TypeScript是合适的select。 只要您只将注释types传递给组件,就不需要PropType。

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

尝试仅使用Flow声明道具的types。 指定不正确的types,如数字而不是string。 您会看到,这将在使用Flow-aware编辑器中的组件的代码中标记。 但是,这不会导致任何testing失败,您的应用程序仍然会工作。

现在添加使用不正确types的React PropTypes。 这将导致testing失败,并在应用运行时在浏览器控制台中被标记。

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

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

  • 在编码时, Flow可以拦截上游的错误:理论上可以丢失一些你不知道的错误(如果你没有在你的项目中实现足够的stream程,或者在深层嵌套对象的情况下)
  • PropTypes会在testing时捕获它们,所以它不会错过