Вот как я это делаю уже довольно давно:

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

Фактически, я видел, как люди устанавливали начальное состояние и вне конструктора. Это хорошая практика? Это меня беспокоит, но я помню, как где-то обсуждалась дискуссия, где кто-то сказал, что установка свойств по умолчанию как статических - не лучшая идея - я просто не помню, почему.

41
ffxsam 21 Апр 2016 в 21:59

4 ответа

Лучший ответ

Нефункциональные свойства в настоящее время не поддерживаются для классов es2015. это предложение для es2016. второй метод значительно удобнее, но для поддержки синтаксиса потребуется плагин (theres очень распространенный плагин babel для этого).

С другой стороны, часть проектов с открытым исходным кодом начинает обрабатывать такие типы свойств, как интерфейсы TypeScript или ActionConstants, и фактически создавать отдельные папки / файлы, содержащие различные типы свойств компонентов, а затем импортировать их в компонент.

Таким образом, оба синтаксиса подходят для использования. но если вы хотите использовать только ES2015, последний синтаксис еще не поддерживается в спецификации.

14
PhilVarg 21 Окт 2016 в 23:13

Если компонент не имеет состояния, что означает, что он вообще не меняет свое собственное состояние, вы должны объявить его как компонент без состояния (export default function MyComponent(props)) и объявить propTypes снаружи.

Вам решать, стоит ли помещать объявление начального состояния в конструктор. В нашем проекте мы объявляем начальное состояние в componentWillMount() только потому, что нам не нравится шаблон super(props), который вы должны использовать с конструктором.

0
theUtherSide 1 Сен 2017 в 22:15

О да, это абсолютно нормально с 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: () => {}
};

Статические поля передаются как свойства объекта класса под капотом. < A HREF = " https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&code_lz=MYGwhgzhAEAiYBcwBkD2YAmBTATtLAHglgHYYwBKWYwCAdAMKoC2ADqiaQtAN4BQ0aBCQIAlsGiscqVgBUAnqywwAvLwGDoHAGKiSoiAAssGNJj0BzAFzQACtLmLldAGYBXEsA0BfPhuGI4tDYLmBuIAj2MqrqmlokuvpGJmYYljYAFACU0CoAfLy-gr7eQA&debug=false&forceAllTransforms=false&shippedProposals=false& ; circleciRepo = & amp; Assessment = false & amp; fileSize = false & amp; lineWrap = true & amp; presets = response% 2Cstage-2 & amp; prettier = false & amp; target = & amp; version = 6.26.0 & amp; envVersion = "rel =" noreferrer "> Посмотрите здесь в Babel REPL.

Кроме того, присвоение состояния или других полей класса непосредственно в теле класса переносится в конструктор .

17
Community 20 Июн 2020 в 09:12

Фактически, это точно так же с точки зрения производительности. 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, сохраняют класс в чистоте и позже назначают их статическим свойствам. Мне лично нравится такой подход :)

41
dandel 21 Апр 2016 в 19:36