DevGang
Авторизоваться

Функциональные и классовые компоненты React

Что такое React-компоненты?

  • Components считаются основными строительными блоками приложения в React;
  • Хотя все компоненты находятся в одном месте структуры папок, они работают независимо друг от друга и объединяются в родительский компонент, чтобы сформировать окончательный пользовательский интерфейс.

Какую проблему это решило?

Раньше создание простой веб-страницы требовало от разработчиков написания сотен строк кода;

В традиционной структуре DOM простые изменения могут быть довольно сложными;

Для решения этих проблем был внедрен подход, основанный на независимых и многократно используемых компонентах.

Как выглядит компонент?

  • Рассмотрим весь пользовательский интерфейс (UI) как дерево;
  • Здесь корень является начальным компонентом, а каждая из остальных частей становится ветвью, которая подразделяется на подветви.

Типы компонентов

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

  • Это первый тип компонента, а также наиболее рекомендуемый;
  • Функциональный компонент — это функция в JavaScript/ES6, которая возвращает элемент React (JSX);
  • Он всегда начинается с заглавной буквы (соглашение об именах);
  • При необходимости принимает props в качестве параметра;
  • Например, вы можете создать функциональный компонент с его определением с помощью arrow function
const Welcome = (props) => { 
  return <h1>Hello, {props.name}</h1>; 
}
«Эта функция является допустимым компонентом React, поскольку она принимает один аргумент объекта props с данными и возвращает элемент React». (реакция js.org)
  • Для того, чтобы использовать компонент позже, вам нужно экспортировать его, а затем импортировать его в другом месте.

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

  1. Class Component-это класс ES6, который будет компонентом при расширении компонента (поведения или значения) React;
  2. Принимает реквизиты (в конструкторе), если это необходимо;
  3. Должен иметь метод render() для возврата JSX;
  4. Ниже мы видим ту же функцию приветствия, что и раньше, но возвращаемую как компонент класса:
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Вывод

Компоненты-лучший способ организовать ваше приложение React и помочь вам написать более управляемый код.

Оба они хороши, поэтому мы предпочитаем Функциональные компоненты компонентам класса. 

#JavaScript #React #ReactNative
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

В этом месте могла бы быть ваша реклама

Разместить рекламу