41

这是我已经做了很长一段时间的方式：

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

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

4

4 回答 4

43

事实上，就性能而言，它是完全一样的。React.JS 是一项相对较新的技术，因此尚不清楚哪些被认为是好的实践，哪些不是。如果您想信任某人，请查看此 AirBNB 的样式指南：

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

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;

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

于 2016-04-21T19:36:09.463 回答
17

哦，是的，使用 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: () => {}
};

静态字段在底层被转换为类对象的属性。 看看这里 Babel REPL。

此外，直接在类主体中分配状态或其他类字段会被转译到构造函数中。

于 2018-04-18T11:13:46.290 回答
14

es2015 类目前不支持非函数属性。它是 es2016 的提案。第二种方法更方便，但需要一个插件来支持语法（有一个非常常见的 babel 插件）。

另一方面，大量开源项目开始处理诸如 TypeScript 接口或 ActionConstants 之类的属性类型，并实际创建单独的文件夹/文件来容纳各种组件属性类型，然后将其导入到组件中。

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

于 2016-04-21T21:06:10.767 回答
0

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

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

于 2016-04-21T20:44:01.753 回答