Действительно ли функциональные компоненты React более легкие, чем классные компоненты?

Question

Я прочитал в нескольких местах , что функциональные компоненты более легкие, чем компоненты класса, а с здесь звучит так, как будто Facebook намеревается использовать функциональные + хуки как предпочтительную парадигму. для новых компонентов.

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

---

Пример для наглядности:

Компонент класса

class SignInForm extends React.Component {
  ...
  // Only gets defined when the component is created with `React.createElement`
 submit = () => {
    // send POST request to get an auth token, etc.
  }

  render() {
    <form>
      ...
      <button onClick={this.submit}>Sign In</button>
    </form>
  }
}

Функциональный компонент

function SignInForm (props) {
  ...
  // Gets defined on every render, since this essentially *is* the `render` function
  const submit = () => {
    // send POST request to get an auth token, etc.
  }

  return (
    <form>
      ...
      <button onClick={submit}>Sign In</button>
    </form>
  );
}

Answer 1

Slowest часть в веб-приложениях - rendering.Поэтому создание новой функции для каждого рендера не имеет большого значения.Также для веб-приложений, build size имеет значение и для функциональных компонентов, минимизация работает лучше, чем для компонентов на основе классов.

С выпуском новых функций, таких как memo, useMemo, useCallback и т. Д., Мы можем добиться той же производительности, что и с компонентами на основе классов.

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