Порівняння компонентів React з об’єктно-орієнтованим програмуванням (OOP)

Порівнюючи компоненти React з об'єктно-орієнтованим програмуванням (OOP), можна провести кілька аналогій, особливо стосовно інкапсуляції, повторного використання та управління поведінкою. Ось як React співвідноситься з концепціями OOP:

OOP vs ReactJS

1. Клас як компонент

• OOP: Клас — це шаблон для створення об'єктів, які інкапсулюють дані (властивості) та поведінку (методи).
• React: Компонент React, особливо класові компоненти, можна розглядати як шаблон класу, що управляє станом та поведінкою і рендерить елементи інтерфейсу.

Приклад:

Клас OOP:

class Person {  
 constructor(name, age) {  
 this.name = name;  
 this.age = age;  
 }  
greet() {  
 return `Hello, my name is ${this.name}`;  
 }  
}  
const person = new Person("Alice", 25);  
console.log(person.greet()); // "Hello, my name is Alice"  
React Class Component:  
class PersonComponent extends React.Component {  
 render() {  
 return 
Hello, my name is {this.props.name}
;    }   }   // Usage:    

2. Об'єкт як екземпляр

• OOP: Об'єкт є екземпляром класу, інкапсулюючи свій стан і надаючи поведінку.
• React: Коли ви використовуєте компонент React (наприклад, <Component />), він поводиться як екземпляр класу (або функції для функціональних компонентів). Властивості та стан представляють інкапсульований "стан" компонента.

3. Методи

• OOP: Методи визначають поведінку класу.
• React: Методи в класових компонентах використовуються для управління станом або обробки подій (наприклад, componentDidMount, користувацькі обробники подій).

Приклад:

OOP:

class Counter {  
 constructor() {  
 this.count = 0;  
 }  
increment() {  
 this.count++;  
 }  
}  
React:  
class Counter extends React.Component {  
 constructor(props) {  
 super(props);  
 this.state = { count: 0 };  
 }  
increment = () => {  
 this.setState({ count: this.state.count + 1 });  
 };  
 render() {  
 return {this.state.count};  
 }  
}  

4. Властивості vs Props

• OOP: Властивості в об'єкті визначають його дані або конфігурацію.
• React: Props є аналогічними властивостям, визначаючи дані або конфігурацію, яку передають компоненту.

5. Стан

• OOP: Стан об'єкта — це поточне значення його властивостей.
• React: Компонент React має стан (в класових компонентах або useState в функціональних компонентах), щоб керувати динамічними даними.

Приклад:

OOP:

class Light {  
 constructor() {  
 this.isOn = false;  
 }  
toggle() {  
 this.isOn = !this.isOn;  
 }  
}  
React:  
class Light extends React.Component {  
 constructor(props) {  
 super(props);  
 this.state = { isOn: false };  
 }  
toggle = () => {  
 this.setState({ isOn: !this.state.isOn });  
 };  
 render() {  
 return {this.state.isOn ? "On" : "Off"};  
 }  
}  

6. Спадкування vs Композиція

• OOP: Спадкування використовується для спільного використання поведінки між класами.
• React: Композиція є більш переважною, ніж спадкування. Компоненти складаються шляхом вкладення або комбінування їх для спільного використання поведінки та структури.

Приклад:

Спадкування OOP:

class Animal {  
 speak() {  
 return "Animal sound";  
 }  
}  
class Dog extends Animal {  
 speak() {  
 return "Bark";  
 }  
}  
React Composition:  
function Animal({ children }) {  
 return 
{children}
;  
}  
function Dog() {  
 return Bark;  
}  

7. Інкапсуляція

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

Перекладено з: Comparing React components with Object-Oriented Programming (OOP)