Какой синтаксис ReactJS использовать; React.createClass или ES6 расширяется?

Question

Какой синтаксис ReactJS использовать; React.createClass или ES6 расширяется?

Я новичок в ReactJS. Я изучил и изучил много документов и электронных книг на различных сайтах. Я понимаю, что есть два синтаксиса для ReactJS. Пример:

React.createClass({
  displayName: 'Counter',
  getDefaultProps: function(){
    return {initialCount: 0};
  },
  getInitialState: function() {
    return {count: this.props.initialCount} 
  },
  propTypes: {initialCount: React.PropTypes.number},
  tick() {
    this.setState({count: this.state.count + 1});
  },
  render() {
    return (
      <div onClick={this.tick}>
        Clicks: {this.state.count}
      </div>
    );
  }
});

И эта версия написана ES6:

class Counter extends React.Component {
  static propTypes = {initialCount: React.PropTypes.number};
  static defaultProps = {initialCount: 0};

  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }

  state = {count: this.props.initialCount};
  tick() {
    this.setState({count: this.state.count + 1});
  }

  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}

Как лучше использовать ReactJS? Но я обнаружил, что эти библиотеки, приложения на github, часто выполняли ES6.

8

reactjs ecmascript-6 syntax react-jsx

Источник

user4246507 28 янв '16 в 10:00

3 ответа

Другие вопросы по тегам reactjs ecmascript-6 syntax react-jsx

user1879019 28 янв '16 в 10:11 2016-01-28 10:11 · Answer 1 · 2016-01-28 10:11

Второй подход, вероятно, является правильным для дальнейшего развития, так как Facebook заявил, что в конечном итоге они отвергнут подход React.createClass.

Из примечаний к выпуску React v0.13:

Наша конечная цель состоит в том, чтобы классы ES6 полностью заменили React.createClass, но пока у нас не будет замены для текущих вариантов использования миксина и поддержки инициализаторов свойств класса в языке, мы не планируем отказываться от React.createClass

Лично я думаю, что второй подход также облегчает чтение кода, но это, очевидно, более субъективная причина.

Однако, как указано выше, важно отметить, что формат ES6 не поддерживает Mixins, поэтому, если вам нужен mixin, вам нужно использовать формат createClass для этого компонента.

Этот пост Тодда Мотто "React.createClass против расширяет React.Component" содержит хорошую информацию о разнице между этими двумя синтаксисами. Стоит прочитать это для обсуждения того, как this Ключевое слово ведет себя по-разному между двумя синтаксисами.

Редактировать: пост Дана Caragea ниже дает некоторые отличные моменты, которые, безусловно, следует учитывать.

Третий вариант...

Существует также третий способ определения компонента React, который называется "Функции без состояния" в документации React и часто называется "Функциональные компоненты без состояния" или "Функциональные компоненты без состояния". Это пример из документов:

function HelloMessage(props) {
  return <div>Hello {props.name}</div>;
}

Определение компонента как функции означает, что он каждый раз эффективно создается заново и поэтому не имеет текущего внутреннего состояния. Это позволяет компоненту легче рассуждать и тестировать, так как поведение компонента всегда будет идентичным для данного набора свойств (реквизитов), а не будет изменяться от запуска к запуску из-за значений внутреннего состояния.

Этот подход особенно хорошо работает при использовании отдельного подхода к управлению состоянием, такого как Redux, и гарантирует, что путешествия во времени Redux будут давать последовательные результаты. Функциональные компоненты без сохранения состояния также упрощают реализацию таких функций, как отмена / повтор.

user568091 28 янв '16 в 11:42 2016-01-28 11:42 · Answer 2 · 2016-01-28 11:42

Я сделал React.createClass для работы и ES6 классы для моего любимого проекта. Мне тоже легче читать последнее, но я часто скучаю по простоте / спокойствию, которое у меня есть с первым. При использовании подхода, основанного на классах, обратите внимание, что технически статически определенные propTypes и defaultProps - это ES7, а не ES6, что может измениться, пока ES7 не будет завершен. Чистый подход ES6 заключается в том, чтобы объявить propTypes/defaultProps как

class Counter extends React.Component {
...
}
Counter.propTypes = {...};
Counter.defaultProps = {...};

Вы также должны помнить, чтобы связать OnClick в рендере (или любой другой метод, где вам нужно использовать this). Это почти наверняка вы забудете в некоторых местах. В то время как с createClass все вызовы автоматически связываются с React. Другое предложение ES7 может упростить ситуацию, но вам все равно нужно помнить, чтобы писать это везде:<div onClick={::this.tick}> который связывает this в tick, Конечно, вам нужно будет перейти на стадию 0 в конфигурации babel, чтобы использовать все эти предложения ES7.

О миксинах... есть приемлемые способы использования миксинов с классами. Отличный подход - mixWith.js, но вы также можете попробовать ES7-декораторы, HOC, даже Object.assign():)

В конце концов, я чувствую, что классовый подход не приносит ничего реального, и вы можете пойти по старому и мощному пути createClass, пока у вас не будет хорошего понимания React. Тогда вы можете поиграть с классами и ES6/7/100. Пройдет много времени, прежде чем они устареют createClass,

user5884955 31 янв '17 в 20:02 2017-01-31 20:02 · Answer 3 · 2017-01-31 20:02

Я начал со стиля оформления React ES6 +, и это звучит хорошо, когда вы говорите, что в React все является компонентом. Мне это нравится class организация.

Потому что только методы могут быть определены внутри ES6 class если вы хотите определить свойства в чистом ES6, они должны быть вне класса. Как, например, здесь:

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };

Вот почему в ES6 propTypes раздел находится вне определения класса.

Но если вы используете ES7, вы можете определить статические и нестатические свойства без проблем внутри class,

// ES7
export class Counter extends React.Component {
  static propTypes = { initialCount: React.PropTypes.number };
  static defaultProps = { initialCount: 0 };
  state = { count: this.props.initialCount };
  tick() {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}

С ES7 вы можете использовать советы неявного связывания для методов, как показано здесь:

return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
);

Старый стиль pre React v0.13 или ES5 был таким.

В React.createClass все методы связаны это автоматически.

Это может немного сбивать с толку разработчиков JavaScript, потому что это не нативное поведение JavaScript.

Вот что пишешь:

class Counter extends React.Component {
  constructor() {
    super();
    this.tick = this.tick.bind(this);
  }
  tick() {
    ...
  }
  ...
}

или используйте некоторые приемы, чтобы выполнить то же самое, используя синтаксис инициализатора свойства.

class Counter extends React.Component {
  tick = () => {
    ...
  }
  ...
}

заключать

Для новичков я думаю, что последний стиль - лучший выбор.

О миксинс

Как указано здесь:

ES6 запущен без какой-либо поддержки миксинов. Поэтому при использовании React с классами ES6 поддержка миксинов не поддерживается. Мы также обнаружили многочисленные проблемы в кодовых базах, использующих миксины, и не рекомендуем использовать их в новом коде. Этот раздел существует только для справки.