Компоненты и реквизиты React


Введение

Компонент в React — это строительные блоки приложения. Это многократно используемые блоки кода, которые можно использовать для создания частей пользовательского интерфейса вместо того, чтобы помещать все в один файл. Кроме того, компонент может иметь другие аспекты, такие как состояния, реквизиты и т.д.

В React существует два типа компонентов:

  1. Классовые компоненты
  2. Функциональные компоненты

Давайте рассмотрим каждый из них.

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

Как следует из названия, компонент класса — это класс JavaScript, расширенный до компонента React. Он имеет обязательный метод render(), который возвращает JSX-элемент. Ранее React был в основном основан на классах, поэтому нам понадобились компоненты классов для управления состояниями.

Вот как это выглядит:

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}

export default App;
Вход в полноэкранный режим Выход из полноэкранного режима

Компоненты классов больше не используются с появлением хуков React. Большинство профессионалов рекомендуют использовать функциональные компоненты.

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

Функциональный компонент — это обычная функция JavaScript, которая также возвращает JSX-элемент, но не использует метод render().

export default function App() {
  return (
   <h1>Hello World</h1>
   );
}
Вход в полноэкранный режим Выход из полноэкранного режима

Код выше — это функциональный компонент, который возвращает JSX-элемент. Функциональные компоненты, как вы можете видеть, более легко читаемы, чем компоненты классов. Кроме того, с функциональными компонентами проще работать, поскольку компоненты класса могут быть более сложными. С введением хуков React «состояние» теперь может быть объявлено в функциональных компонентах.

Реквизиты в React

Важной концепцией компонентов является то, как они взаимодействуют. В React есть специальный объект под названием props, что означает «свойство». Он используется для передачи данных от родительского компонента к дочернему компоненту. Реквизиты передают данные только в одностороннем потоке, от родительского компонента к дочернему.

Давайте рассмотрим использование props в компонентах класса, Мы рассмотрим очень простой пример:

import React from "react";

export class Student extends React.Component {
  render() {
   return (
    <h1>Hello, {this.props.name}</h1>
   );
 }
}
Вход в полноэкранный режим Выход из полноэкранного режима

В приведенном выше коде мы создаем компонент Student, который будет возвращать следующий тег h1 с любым переданным ему свойством name. Нам нужно будет импортировать компонент в родительский компонент, которым является файл App.js, и передать ему данные.

import React from "react";
import Student from "./Student"

export default class App extends React.Component {
 render() {
  return (
   <div className="App">
    <Student name="Rex" />
   </div>
  );
 }
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Это вернет простой тег h1 со свойством name, которое было передано компоненту, как показано ниже.

Теперь давайте рассмотрим, как использовать props в функциональных компонентах.

import React from "react";

export default function Student({firstName, lastName}) {
  return (
    <div>
      <h1>First Name: {firstName}</h1>
      <h2>Last Name: {lastName}</h2>
    </div>
  );
} 
Вход в полноэкранный режим Выход из полноэкранного режима

Как вы можете видеть, мы деструктурировали реквизит, который хотим передать из родительского компонента.

import React from "react";
import Student from "./Student";

function App() {
  return (
    <div className="App">
      <Student firstName="John" lastName="Doe" />
    </div>
  );
}

export default App;
Вход в полноэкранный режим Выход из полноэкранного режима

После передачи нужных нам реквизитов в наш файл App.js то, что будет отображено, будет выглядеть следующим образом:

Заключение

Мы рассмотрели, как передавать реквизиты между компонентами и почему функциональные компоненты предпочтительнее компонентов класса. Реквизиты полезны для передачи данных, но не для манипулирования ими.

Спасибо за прочтение!

Оцените статью
Procodings.ru
Добавить комментарий