Реакция: когда использовать компоненты класса ES6 против функциональных компонентов ES6?

116

Проведя некоторое время, изучая React, я понимаю разницу между двумя основными парадигмами создания компонентов.

Мой вопрос в том, когда следует использовать какой и почему? каковы преимущества/компромиссы между собой?

ES6/7 классы:

import React, { Component } from 'react';

export class MyComponent extends Component {
  render() {
    return (
      <div></div>
    );
  }
}

Функциональные:

const MyComponent = (props) => {
    return (
      <div></div>
    );
}

Я думаю о функциональности всякий раз, когда нет состояния, которое нужно манипулировать этим компонентом... но так ли это?

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

  • 3
    Кажется, вы уже знаете ответ.
  • 1
    Если у вас есть компонент только с методом рендеринга, вы можете превратить его в функциональную форму. Если вам нужно нечто большее, чем функция отображения без сохранения состояния, используйте классы
Показать ещё 2 комментария
Теги:
ecmascript-6
redux

3 ответа

88
Лучший ответ

У вас есть правильная идея. Идите с функциональностью, если ваш компонент не делает гораздо больше, чем принимать некоторые реквизиты и рендеринг. Вы можете рассматривать их как чистые функции, потому что они всегда будут визуализировать и вести себя одинаково, учитывая те же реквизиты. Кроме того, они не заботятся о методах жизненного цикла или имеют собственное внутреннее состояние.

Поскольку они легкие, писать эти простые компоненты в качестве функциональных компонентов довольно стандартно.

Если вашим компонентам требуется больше функциональности, например, сохранить состояние, вместо этого используйте классы.

Дополнительная информация: https://facebook.github.io/react/docs/reusable-components.html#es6-classes

Поделиться
  • 0
    Как насчет функциональности, которая не сохраняет состояние, но тесно связана с компонентом, например, определяет некоторый динамический атрибут для рендеринга.
  • 0
    Это лучшая статья о разнице между двумя типами компонентов в React: code.tutsplus.com/tutorials/…
Показать ещё 1 комментарий
28

Всегда старайтесь использовать функции без состояния (функциональные компоненты), когда это возможно. Существуют сценарии, в которых вам нужно будет использовать обычный класс React:

  • Компонент должен поддерживать состояние
  • Компонент перерисовывает слишком много, и вам нужно контролировать это через shouldComponentUpdate
  • Вам нужен компонент

UPDATE

Теперь существует класс React, называемый PureComponent, который вы можете расширить (вместо Component), который реализует свой собственный shouldComponentUpdate, который позаботится о вас. Подробнее

Поделиться
  • 28
    Always try to use stateless functions (functional components) whenever possible. Я прочитал, что десять человек говорят это. Тем не менее, никто из них не дал объяснения почему.
  • 18
    In an ideal world, most of your components would be stateless functions because in the future we'll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations. This is the recommended pattern, when possible. Дополнительная информация: facebook.github.io/react/docs/…
Показать ещё 2 комментария
8

Функциональные компоненты не более легкие, чем компоненты, основанные на классах, "они работают точно как классы". - https://github.com/facebook/react/issues/5677

Приведенная выше ссылка немного устарела, но в документации React 16.7.0 говорится, что функциональные и классовые компоненты:

"эквивалентны с точки зрения Реагирования". - https://reactjs.org/docs/components-and-props.html#stateless-functions

По сути, нет никакой разницы между функциональным компонентом и компонентом класса, который просто реализует метод рендеринга, кроме синтаксиса.

В будущем (цитируя приведенную выше ссылку) "мы [React] могли бы добавить такие оптимизации".

Если вы пытаетесь повысить производительность за счет устранения ненужных визуализаций, оба подхода обеспечивают поддержку. memo для функциональных компонентов и PureComponent для классов.

- https://reactjs.org/docs/react-api.html#reactmemo

- https://reactjs.org/docs/react-api.html#reactpurecomponent

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

ОБНОВЛЕНИЕ январь 2019

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

Поделиться
  • 0
    Я думаю, что расширение каждого компонента React.Component делает код более читабельным, особенно для новых людей. Приятно, когда вы видите, что компонент создается каждый раз одинаково. Как сказал @Galupuf, в простых компонентах есть только один метод, называемый render (). Также хорошо, чтобы все расширяло React.Component, потому что, когда вы хотите начать связывать «this», иметь состояние и т. Д., Вам не нужно все реорганизовывать, вы можете просто добавить то, что вам нужно.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню