Функция React.createClass против ES6 arrow

Я новичок в React и пытаюсь получить дескриптор синтаксиса.

Я развиваюсь в среде React 15 (используя шаблон реакции-starterify) и использовал синтаксис в ВЕРСИИ 2 ниже, но большинство примеров и руководств, которые я нахожу на страницах Реагирования на Facebook, - ВЕРСИЯ 1. Что разница между ними и когда я должен использовать одну над другой?

ВЕРСИЯ 1

var MyComponent = React.createClass({
  render: function() {
    return (
      <ul>
        // some list
      </ul>
    );
  }
});

module.exports = MyOtherComponent;

ВЕРСИЯ 2

const MyComponent = () => (
  <ul>
    // some list
  </ul>
);

export default MyComponent;

Ответы

Ответ 1

Второй код является функциональным компонентом без состояния и представляет собой новый синтаксис/шаблон для определения компонентов как функции props. Он был введен в Реакт v0.14.

Вы можете узнать больше об этом в официальном блоге React, здесь, в официальной документации по React, здесь.

Эти компоненты ведут себя так же, как класс React, только с рендерингом метод. Поскольку экземпляр компонента не создается для функциональный компонент, любой ref, добавленный в один, будет оцениваться как null. Функциональные компоненты не имеют методов жизненного цикла, но вы можете установить .propTypes и .defaultProps в качестве свойств функции.

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

  • Какая разница?

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

    Важно отметить, что функциональный компонент - это просто функция. Это не класс. Таким образом, нет глобального объекта this. Это означает, что когда вы делаете render, вы в основном создаете новый экземпляр ReactComponent, тем самым оставляя возможность для этих объектов javascript взаимодействовать друг с другом через какой-либо глобальный this. Это также делает невозможным использование state и любых методов жизненного цикла.

  • Как мое приложение получает от этого преимущества?

    Производительность
    Когда вы используете функциональные компоненты без состояния, React достаточно умен, чтобы исключить все "традиционные" методы жизненного цикла, которые, как оказалось, обеспечивают достаточное количество оптимизаций. Команда React заявила, что планирует в будущем планировать дальнейшую оптимизацию для распределения памяти и уменьшения количества проверок.

    Адаптивность
    Поскольку мы говорим только о функции (а не о классе), нам не нужно беспокоиться о state, методах жизненного цикла или других зависимостях. Учитывая параметры, функция всегда будет давать одинаковый результат. Таким образом, очень легко адаптировать такие компоненты везде, где мы хотим, что также облегчает тестирование.

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

    Поощряет лучшие практики
    Реакция часто сравнивается с V шаблона MVC, поскольку она предназначена для создания представлений. "Традиционные" способы создания компонентов упрощают "взламывание" бизнес-логики (например, с помощью state или ref) в компоненты, которые действительно должны обрабатывать только визуализацию. Они поощряют ленивость и пишут вонючий код. Тем не менее, функциональные компоненты без гражданства делают почти невозможным использование таких ярлыков и обеспечивают лучший подход.

  • Когда следует использовать один над другим?

    Как правило, рекомендуется использовать новый шаблон по возможности! Если вам нужен только метод render, но нет методов жизненного цикла или state, используйте этот шаблон. Конечно, иногда вам нужно использовать state, и в этом случае вы отлично используете традиционный шаблон.

    Facebook рекомендует использовать компоненты без состояния при рендеринге статических презентационных компонентов. Затем, если требуется какое-то состояние, просто оберните их в компоненте с состоянием, чтобы управлять ими, используя его state и отправив props в компоненты без состояния.

Ответ 2

Чтобы добавить, из реакции 15.5.0, React.createClass будет устаревшим. Они рекомендуют вам перейти на класс ES2015 или использовать функцию стрелки.

Когда React был первоначально выпущен, не было идиоматического способа создания классов в JavaScript, поэтому мы предоставили свой собственный: React.createClass.

Позже классы были добавлены в язык как часть ES2015, поэтому мы добавили возможность создавать компоненты React с использованием классов JavaScript. Наряду с функциональными компонентами классы JavaScript теперь являются предпочтительным способом создания компонентов в React.

Для существующих компонентов createClass мы рекомендуем перенести их в классы JavaScript.