Вибір між компонентами класу та функціональними компонентами в React

Вибір між компонентами класу та функціональними компонентами в React

Мітка часу: 9 січня 2023 р., 4:30 ранку
Making the Choice Between Class Components and Functional Components in React PlatoBlockchain Data Intelligence. Vertical Search. Ai.

Основні відмінності

У React компонент — це фрагмент коду, який представляє частину інтерфейсу користувача. У React є два основних типи компонентів: компоненти класу та функціональні компоненти.

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

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }
}

Функціональні компоненти — це просто функції JavaScript, які повертають елемент React. Вони простіші, ніж компоненти класу, і їх легше читати та писати. Ось той самий компонент, що й вище, написаний як функціональний компонент:

function Welcome(props) { return <h1>Hello, {props.name}</h1>;
}

Коли що використовувати

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

  1. читабельність: Компоненти класу можуть полегшити розуміння коду, особливо якщо у вас є багато методів стану або життєвого циклу. Код організовано в методи, які чітко визначені та легко знайти.

  2. Багаторазовість: Компоненти класу можна легше повторно використовувати, оскільки вони можуть бути розширені для створення нових компонентів. Це може бути особливо корисним, якщо у вас багато спільних функцій між компонентами.

  3. Organization: Компоненти класу можуть полегшити організацію коду, оскільки ви можете згрупувати пов’язані методи в одному компоненті. Це полегшить пошук і підтримку коду.

Є також кілька причин, чому ви можете вибрати писати функціональні компоненти:

  1. Коли вам не потрібно використовувати методи стану або життєвого циклу: якщо вам не потрібно використовувати методи стану або життєвого циклу, тоді функціональний компонент є гарним вибором, оскільки його простіше та легше читати та писати, ніж компонент класу.

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

  3. Якщо ви хочете оптимізувати продуктивність: оскільки функціональні компоненти чисті, React може легше оптимізувати їх, що може призвести до кращої продуктивності.

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

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

useEffect & useState

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

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

Ось як ви б реалізували useEffect та useState у ваших функціональних компонентах

import { useState, useEffect } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `Number of clicks: ${count}`; }); return ( <div> <p>Number of clicks: {count}</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );
}

Тут у нас є компонент, який відстежує підрахунок і відображає поточний підрахунок для користувача. Компонент використовує useState гачок для додавання стану до функціонального компонента та useEffect гачок для виконання дії (оновлення назви документа), коли кількість змінюється.

Ключові винесення

Ось основні висновки, коли справа доходить до вибору між компонентами класу та функціональними компонентами в React:

  1. Компоненти класу визначаються за допомогою класу, який розширює клас React.Component і має більше можливостей для обробки подій стану та життєвого циклу.
  2. Функціональні компоненти — це лише функції JavaScript, які повертають елемент React, їх простіше та легше читати та писати.
  3. Вам слід використовувати функціональні компоненти, якщо вам не потрібно використовувати функцію, доступну лише в компонентах класу, наприклад, методи стану або життєвого циклу.
  4. Ви можете використовувати хуки useState і useEffect для додавання стану та виконання побічних ефектів у функціональних компонентах.
  5. Загалом, вибір між компонентами класу та функціональними компонентами зводиться до того, що найкраще підходить для ваших потреб і що робить ваш код найлегшим для читання та розуміння.

Сподіваюся, це коротке пояснення допоможе вам. Якщо ви бажаєте наставництва чи будь-яких вказівок на вашому шляху до вивчення JavaScript, React або веб-розробки загалом, будь ласка, зв’яжіться зі мною для індивідуальної зустрічі.

Часова мітка:

Більше від Факт React Codementor