React е библиотека за креирање на кориснички интерфејси, kомпонентите се делови код, кои што дефинираат како треба да изгледа и да се однесува една секција во корисничкиот интерфејс. Тие може да бидат функционални(functional) или класно-базирани(class-based).

Во продолжение, пет разлики помеѓу функционалните и класно-базираните компоненти:

• Синтакса

Функционалните компоненти се дефинирани како функции, додека пак класните се дефинирани како JavaScript ES6 класи.

• Состојба и lifecycle методи

Функционалните компоненти не можат да имаат состојба или пристап до lifecycle методи, додека пак класно-базираните можат да имаат состојба и пристап до lifecycle методи.

• Големина и читливост на код

Функционалните компоненти имаат тенденција да бидат пократки и поконкретни од класно-базираните компоненти. Исто така, тие полесно се читаат и разбираат, особено за девелоперите на кои што објектно ориентираниот концепт не им е силна страна.

• Перформанси

Функционалните компоненти генерално имаат подобри перформанси од класно базираните, бидејќи тие не креираат истанци. Исто така, тие се полесни за оптимизација, бидејќи не се потпираат на клучниот збор this.

• Повторна употреба

Функционалните компоненти се подобри за повторна употреба, затоа што можат да се употребат како компоненти од повисок ред, render props, и React hooks.

Во продолжение погледнете неколку примери:

Класно-базирана компонента

Пример код за класно-базирана компонента

import React, { Component } from 'react';

class ClassComponent extends Component {

  render() {
    return (
      <div>
        <h1>Hello, this is a class component</h1>
      </div>
    )
  }
}

export default ClassComponent

Резултатот на екран е како на сликата подолу:

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

Пример код за функционална компонента

function FunctionalComponent() {
  return (
    <div>
      <h1>Hello, this is a functional component</h1>
    </div>
  )
}

export default FunctionalComponent

Резултатот на екран е како на сликата подолу:

Рендерирање на компонента

За да се искористи компонентата во апликацијата, таа мора да се рендерира, пример код подолу:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FunctionalComponent/>)

props

Компонентите може да се пренесат како props, тие се како аргументи за функции и може да се испратат во компонентата како атрибути. Пример код подолу:

function FunctionalComponent(props) {
  return (
    <div>
      <h1>Hello, this is a {props.type} functional component</h1>
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FunctionalComponent type = "functional"/>)

Резултатот на екран е како на сликата подолу:

Компонента во компонента

Една компонента може да се искористи во друга компонента, погледнете го примерот подолу

function Component() {
  return (
    <h1>functional component</h1>
  )
}

function FunctionalComponent() {
  return (
    <div>
      <h1>Hello, this is a </h1>
      <Component />
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FunctionalComponent />)

Резултатот на екран е како на сликата подолу:

Што понатаму?

Следете го IT.mk и наскоро ќе ги објавиме преостанатите туторијали за React.

Subscribe

Login

Notify of

new follow-up comments new replies to my comments

Label

{} [+]

Name*

Email*

Website

Label

{} [+]

Name*

Email*

Website

0 Коментари

Newest

Oldest Most Voted

Inline Feedbacks

View all comments