React PropTypes 与 Flow

2024-05-20

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>
};

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

我找到了这个巴贝尔插件 https://github.com/brigand/babel-plugin-flow-react-proptypes将类型声明转换为 PropTypes,这可能是一个解决方案。


在提出这个问题一年后,我想更新一下我在这个问题上的经历。

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React PropTypes 与 Flow 的相关文章

随机推荐