Коли використовувати компоненти React на основі класу ES6 проти функціональних компонентів ES6 React?

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

Моє запитання - коли я повинен використовувати який і чому? Які переваги / компроміси однієї над іншою?

ES6 класи:

import React, { Component } from 'react';

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

Функціональні:

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

Я думаю, що я функціональний, коли не існує стану, яким маніпулює цей компонент, але це так?

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

Ви маєте правильну ідею. Займіться функціоналом, якщо ваш компонент не набагато більше, ніж зайняти деякі реквізити та візуалізувати. Ви можете думати про це як про чисті функції, оскільки вони завжди будуть відображатись та поводяться однаково, враховуючи однакові реквізити. Крім того, вони не переймаються методами життєвого циклу або мають власний внутрішній стан.

Оскільки вони легкі, писати ці прості компоненти як функціональні компоненти досить стандартно.

Якщо ваші компоненти потребують більшої функціональності, як-от утримання стану, замість цього використовуйте класи.

Більше інформації: https://facebook.github.io/react/docs/reusable-components.html#es6-classes

EDIT : Багато з сказаного було правдою, аж до введення React Hooks.

• componentDidUpdateможе бути реплікувати з useEffect(fn), де fnфункція, яку потрібно запустити при повторній передачі.

• componentDidMountМетоди можуть бути тиражовані useEffect(fn, []), де fnфункція, яку потрібно запустити при повторному рендерингу, і []являє собою масив об'єктів, для яких компонент буде рендерувати, якщо і тільки якщо принаймні один змінено значення з попереднього візуалізації. Оскільки їх немає, useEffect()запускається один раз на першому монтажі.

• stateможна реплікувати з useState(), повернене значення якого може бути зруйновано на посилання на стан і функцію, яка може встановити стан (тобто const [state, setState] = useState(initState)). Приклад може пояснити це більш чітко:

const Counter = () => {
  const [count, setCount] = useState(0)

  const increment = () => { 
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  )
}

default export Counter

Щодо рекомендації щодо використання класу над функціональними компонентами, Facebook офіційно рекомендує використовувати функціональні компоненти, де це можливо . Як невеличкий бік, я чув, як ряд людей обговорювали не використання функціональних компонентів з міркувань продуктивності, зокрема

"Функції обробки подій переосмислюються за візуалізацією у функціональних компонентах"

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

Якщо вони є, ви можете запобігти перевизначення функції , використовуючи useCallbackі useMemoгачки. Однак майте на увазі, що це може покращити ваш код (мікроскопічно) в роботі .

Але, чесно кажучи, я ніколи не чув, щоб переосмислити функції як вузьке місце в програмах React. Передчасні оптимізації - корінь усього зла - переживайте про це, коли це проблеми

Завжди намагайтеся використовувати функції без стану (функціональні компоненти), коли це можливо. Є сценарії, коли вам потрібно буде використовувати звичайний клас React:

• Компонент повинен підтримувати стан
• Компонент занадто багато відтворює, і вам потрібно контролювати це через shouldComponentUpdate
• Вам потрібен компонент контейнера

ОНОВЛЕННЯ

Зараз клас React називається, PureComponentщо ви можете розширити (замість Component), який реалізує свій власний, shouldComponentUpdateякий піклується про порівняння для вас дрібних реквізитів. Детальніше

ОНОВЛЕННЯ березень 2019 року

https://overreacted.io/how-are-function-components-different-from-classes/

ОНОВЛЕННЯ Лютий 2019:

Завдяки впровадженню гачків React , схоже, команди React хочуть, щоб ми використовували функціональні компоненти, коли це можливо (що краще відповідає функціональному характеру JavaScript).

Їх мотивація:

1.) It’s hard to reuse stateful logic between components
2.) Complex components become hard to understand
3.) Classes confuse both people and machines

Функціональний компонент з гачками може робити майже все, що може зробити компонент класу, без жодного з зворотних зворотів.

Я рекомендую використовувати їх, як тільки зможете.

Оригінальний відповідь

Функціональні компоненти не легші, ніж компоненти на основі класу, "вони виконуються точно як класи". - https://github.com/facebook/react/isissue/5677#issuecomment-241190513

Наведене вище посилання трохи датоване, але документація React 16.7.0 говорить про те, що функціональні та класові компоненти:

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

По суті немає різниці між функціональним компонентом і компонентом класу, який просто реалізує метод візуалізації, крім синтаксису.

Надалі (цитуючи вищезазначене посилання) "ми [Реагуємо] можемо додати такі оптимізації."

Якщо ви намагаєтеся підвищити ефективність, усуваючи зайві візуалізації, обидва підходи надають підтримку. memoдля функціональних компонентів та PureComponentдля занять.

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

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

Це справді залежить від вас. Якщо ви хочете менше котла, переходьте до функціоналу. Якщо ви любите функціональне програмування і не любите заняття, переходьте до функціоналу. Якщо ви хочете узгодженість між усіма компонентами вашої кодової бази, перейдіть до класів. Якщо вам набридло переробити з функціональних компонентів на компоненти класу, коли вам потрібно щось подібне state, займіться класами.

Згідно з Реактом 16.8, термін функціональних компонентів без громадянства вводить в оману, і їх слід уникати, оскільки вони більше не стають без громадянства ( React.SFC застарів , Дан Абрамов на React.SFC ), вони можуть мати стан, вони можуть мати гачки (які виконують роль методи життєвого циклу) також вони більш-менш перетинаються з компонентами класу

Компоненти на основі класу

• держава
• методи життєвого циклу
• запам'ятовування за допомогою React.PureComponent

Функціональні компоненти:

• стан ( useState , useReducer гачки)
• методи життєвого циклу (через гачки useEffect , useLayoutEffect )
• запам'ятовування через пам'ять HOC

Чому я віддаю перевагу функціональним компонентам

• Реагувати забезпечує useEffect гак , який є дуже чітким і лаконічним способом об'єднати componentDidMount, componentDidUpdateі componentWillUnmountметоди життєвого циклу
• За допомогою гачків ви можете витягти логіку, яку можна легко поділити між компонентами та перевірити
• менша плутанина щодо масштабування

Реагуйте на мотивацію того, чому використовуєте гачки (тобто функціональні компоненти).