是否应将“`propTypes`”和“`defaultProps`”与Flowtype结合使用，还是Flowtype类型足够全面？

Question

想到一个简单的例子，例如：

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和DefaultProps是否具有优势？或者我可以在使用FlowType时完全放弃它们吗？

Answer 1

您当然可以使用流类型而不是反应性PropTypes，但是您建议的语法并不是常见的方法。请参见流文档 ( 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做的事情就是定义自定义验证器 (例如，检查一个道具是一个有效的电子邮件)。

我有更多的github上的流反应实例，但我还没有用Flow v0.22测试它们，只测试了0.21。他们可能需要一些小的调整。

Answer 2

作为一般规则，Flow的静态分析将给您更大的权力和更大的影响，因此比propTypes更可取。

但是，在您可能通过多个组件进行对象扩展支持的情况下，或者在其他动态运行时场景中，propTypes仍然不错，在这些场景中，道具可能没有您所期望的值。

考虑在https://github.com/brigand/babel-plugin-flow-react-proptypes中两者兼得

注:我不附属于这个图书馆。