哦，是的，它完全符合Babel

Question

这是我现在已经做了很长时间的方式了：

export default class AttachmentCreator extends Component {
  render() {
    return <div>
      <RaisedButton primary label="Add Attachment" />
    </div>
  }
}

AttachmentCreator.propTypes = {
  id: PropTypes.string,
};

但我看到人们这样做：

export default class AttachmentCreator extends Component {
  static propTypes = {
    id: PropTypes.string,
  };

  render() {
    return <div>
      <RaisedButton primary label="Add Attachment" />
    </div>
  }
}

事实上，我已经看到人们在构造函数之外设置初始状态。这是好习惯吗？这一直困扰着我，但我记得在某个地方有人说过将默认道具设置为静态并不是一个好主意的讨论 - 我只是不记得原因。

Answer 1

事实上，它在性能方面完全相同。 React.JS是一项相对较新的技术，因此尚不清楚什么是好的做法或不做什么。如果您想信任某人，请查看此AirBNB的风格指南：

https://github.com/airbnb/javascript/tree/master/react#ordering

＆＃13;

import React, { PropTypes } from 'react';

const propTypes = {
  id: PropTypes.number.isRequired,
  url: PropTypes.string.isRequired,
  text: PropTypes.string,
};

const defaultProps = {
  text: 'Hello World',
};

class Link extends React.Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>
  }
}

Link.propTypes = propTypes;
Link.defaultProps = defaultProps;

export default Link;

＆＃13;

他们使用propTypes对象文字声明一个const，保持该类非常干净，稍后将它们分配给静态属性。我个人喜欢这种方法：）

Answer 2

es2015类目前不支持非函数属性。它是es2016的提案。第二种方法更方便，但需要一个插件来支持语法（theres a very common babel plugin for it）。

另一方面，一大堆开源项目开始处理像TypeScript接口或ActionConstants这样的proptypes，并实际创建包含各种组件prop类型的单独文件夹/文件，然后导入到组件中。

总而言之，这两种语法都可以使用。但如果您只想严格使用ES2015，则规范中尚不支持后一种语法。

Answer 3

哦，是的，它完全符合Babel

class DataLoader extends React.Component {
  static propTypes = {
    onFinishedLoading: PropTypes.func
  }

  static defaultProps = {
    onFinishedLoading: () => {}
  }
}

......无论如何它都会被转化为此。

class DataLoader extends React.Component {}

DataLoader.propTypes = {
  onFinishedLoading: PropTypes.func
};

DataLoader.defaultProps = {
  onFinishedLoading: () => {}
};

静态字段在引擎盖下被转换为类属性。 Look here at Babel REPL.

此外，直接在类中分配状态或其他 class fields 会被转换为实例构造函数。

Answer 4

如果组件是无状态的，意味着它根本不改变它自己的状态，你应该将它声明为无状态组件（export default function MyComponent(props)）并在外部声明propTypes

将初始状态声明放在构造函数中是否良好实践取决于您。在我们的项目中，我们在componentWillMount()中声明初始状态只是因为我们不喜欢您必须与构造函数一起使用的super(props)样板。

将propTypes和defaultProps作为静态道具放在React类中是否可以？

4 个答案:

哦，是的，它完全符合Babel