Reacts `propTypes` 和 `defaultProps` 应该和 Flowtype 一起使用，还是 Flowtype 足够全面？答案

【问题标题】：Should Reacts `propTypes` and `defaultProps` be used in conjunction with Flowtype, or is Flowtype comprehensive enough?Reacts `propTypes` 和 `defaultProps` 应该和 Flowtype 一起使用，还是 Flowtype 足够全面？
【发布时间】：2016-08-15 12:05:16
【问题描述】：

想一个简单的例子比如：

class CommentAreaComponent extends React.Component {
static propTypes = {
    id: PropTypes.string.isRequired,
    loading: PropTypes.bool,
};

static defaultProps = {
    loading: false,
};

在构造函数中我可以定义这样的东西来实现（我认为）同样的事情：

class MyComponent extends React.Component {
    constructor({
        loading = false,
    }:{ 
        id:string, 
        loading?:boolean 
    }) {
        super(arguments[0]);
    }
}

第二个示例仅使用 Flowtype。使用 Reacts PropTypes 和 DefaultProps 有优势吗？或者我可以在使用 FlowType 时完全删除它们吗？

【问题讨论】：

我使用 TypeScript 而不是 Flow，但情况类似。我发现在编写代码时你真的可以跳过propTypes，但一个区别是propTypes 将在运行时进行分析，所以如果你正在做任何Flow 无法预测的真正动态的事情，propTypes 可能帮助你。

标签： javascript reactjs flowtype react-proptypes

【解决方案1】：

作为一般规则，Flow 的静态分析将为您提供更强大的功能和更大的覆盖范围，因此比propTypes 更可取。

但是，propTypes 在您可能通过多个组件向下传播道具的情况下，或者在道具可能没有您期望的值的其他动态运行时场景中仍然很好。

考虑通过https://github.com/brigand/babel-plugin-flow-react-proptypes 充分利用两者

注意：我不隶属于这个图书馆。

【讨论】：

我使用上述库已经有一段时间了，虽然这个概念听起来很棒，但不幸的是它实际上并不能很好地工作。它不支持所有类型的 React 组件，从 0.39 版开始根本不能与 React Native 一起使用，而且总体上非常脆弱。更重要的是，它似乎不再得到足够的维护，无法在合理的时间内解决这些问题。
我正在使用babel-plugin-flow-react-proptypes，它似乎维护得很好，可以在网络上使用。

【解决方案2】：

您当然可以使用 Flow 类型而不是 React PropTypes，但您建议的语法并不是常用的方法。请参阅Flow docs（向下滚动查看 ES6 语法）：

class Button extends React.Component {
  props: {
    title: string,
    visited: boolean,
    onClick: () => void,
  };

  state: {
    display: 'static' | 'hover' | 'active';
  };

  static defaultProps = {
    visited: false,
  };

  constructor(props) {
    super(props);
    this.state = {
      display: 'static',
    };
  }

  render() {
    let className = 'button ' + this.state.display;
    if (this.props.visited) {
      //...
    }

    return (/*...*/);
  }
}

你可以用 PropTypes 做的唯一不能做的事情是定义 custom validators（例如检查一个 prop 是一个有效的电子邮件）。

我有更多 Flow React examples on github，但我还没有使用 Flow v0.22 测试它们，只有 v0.21。他们可能需要稍作调整。

【讨论】：

这不会验证您的defaultProps。如果您将visited defaultProp 设置为“123”，则流程不会告诉您它是无效类型。