Компоненты в React являются независимыми, многократно используемыми частями пользовательского интерфейса. Типичная веб-страница может состоять из панели навигации, области содержимого и нижнего колонтитула. В React мы создаем эти области как компоненты (которые, в свою очередь, могут состоять из других компонентов!). Таким образом мы не дублируем код и, как мы увидим, обеспечивает большую гибкость.

Можно думать о компоненте как о функциям JavaScript. Вместо получения аргументов, она получает «Props», а затем возвращают элемент React, чтобы построить то, что мы видим на экране!

Компоненты

На самом деле в React - все является компонентом! Даже стандартные теги HTML являются компонентами, они встроены и добавлены по умолчанию.

Давайте посмотрим на пример:

import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
I'm a component!
, document.getElementById('myapp'))

Здесь мы использовали JSX для вставки < h1>I'm a component! в элемент с идентификатором myapp. Наш компонент h1 предоставляется React.DOM. Вы можете проверить весь список, набрав React.DOM в консоли браузера.

Создание пользовательских компонентов

Это замечательно, но как мы создаем наши собственные компоненты? React дает нам возможность создавать пользовательские интерфейсы, составляя наши собственные пользовательские компоненты.

Мы можем определить компоненты двумя способами, давайте теперь посмотрим на каждый из них:

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

Компоненты функций на самом деле являются просто функциями JavaScript:

function Greeting(props) {
 return 
Hello, {props.username}!
;
}

Что делает эту функцию компонентом React, так это то, что она принимает «Props» (или свойства) в качестве аргумента с данными, а затем возвращает элемент React.

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

Классы ES6 также можно использовать для создания компонентов:

class Greeting extends React.Component {
 render() {
   return 
Hello, {this.props.username}!
;
 }
}

Оба приведенных выше примера кода являются эквивалентными и вполне допустимыми способами создания компонентов.

До недавнего времени в мире React компоненты классов мы использовали чаще - поскольку компоненты класса позволяли определять компоненты с их собственным состоянием (я буду писать о состоянии в моей следующей статье!).

Однако, с появлением React Hooks, функциональные компоненты теперь стали намного мощнее, чем раньше, и мы можем увидеть, что эта тенденция снова изменилась.

React Hooks выходят за рамки этой статьи! Итак, давайте продолжим с компонентами и свойствами...

Компоненты рендеринга

Мы можем отобразить наши элементы, которые представляют теги DOM:

const element = 
;

И мы также можем визуализировать наши элементы с помощью пользовательских компонентов:

const element = ;

Когда элемент содержит определенный пользователем компонент, он передает атрибуты JSX компоненту как объект. В React этот объект является тем, что мы называем «Props».

Свойства

Итак, «props» - это то, как наши компоненты приобретают свои свойства.

Давайте посмотрим на это в действии:

function Greeting(props) {
 return 
Hello, {props.username}!
;
}

const element = ;

ReactDOM.render(
 element,
 document.getElementById('root')
);

Этот код будет отображать на странице «Hello, Bruce!».

Что здесь происходит?

• ReactDOM.render() вызывается с элементом .
• React вызывает компонент Greet и передает свойства {name: 'Bruce'}.
• Наш компонент Greet возвращает элемент

  Hello, Bruce!

  как результат.
• React DOM обновляет DOM.

Имена компонентов всегда начинаются с заглавной буквы! React рассматривает компоненты, начинающиеся со строчных букв, как теги DOM.

Свойства в функциональных компонентах

Следует отметить, что при работе с компонентами, которые имеют несколько дочерних элементов (см. Ниже с h1 и p), каждый дочерний компонент получает свои свойства от родительского.

При использовании функционального компонента все, что передается, - это свойства, они доступны путем добавления props в качестве аргумента функции:

const BlogPostInfo = props => {
 return (
   

     
{props.title}
     
{props.description}
   
 )
}

Свойства в классе компонента

В классе компонента свойства передаются по умолчанию. Они доступны как this.props в экземпляре класса.

import React, { Component } from 'react'
class BlogPostInfo extends Component {
 render() {
   return (
     

       
{this.props.title}
       
{this.props.description}
     
   )
 }
}

Передача свойств дочерним компонентам является отличным способом передачи значений в ваших приложениях. Компоненты либо хранят данные (имеют состояние), либо получают данные через свои свойства.

Немного подробнее

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

Props по умолчанию

Если какие-либо значения отсутствуют при инициализации компонента, нам нужно указать значение по умолчанию. Сделать это можно например, так:

BlogPostInfo.propTypes = {
 title: PropTypes.string,
 description: PropTypes.string
}

BlogPostInfo.defaultProps = {
 title: '',
 description: ''
}

Передача свойств

Когда мы инициализируем компонент, мы передаем наши свойства следующим образом:

const desc = 'My blog post description'

Если мы работаем со строками, мы можем передать наш props в виде строки (как мы это делали выше с помощью 'title'. В противном случае мы используем переменные, как мы это сделали с приведенным выше описанием для desc.

Свойства для потомков

Свойство children немного отличается от других. Оно содержит значение всего, что передается в body, например:

 More words

В этом примере внутри BlogPostInfo мы можем получить доступ к «More words» через this.props.children.

Компоненты в Компонентах

Компоненты могут включать другие компоненты в свои выходные данные.

Достаточно создать компонент MyApp, который рендерит Greet несколько раз:

function Greet(props) {
 return 
Hello, {props.username}!
;
}

function MyApp() {
 return (
   

     
     
     
   
 );
}

ReactDOM.render(
 ,
 document.getElementById('root')
);

Свойства только для чтения!

Независимо от того, объявлен ли ваш компонент как функция или класса, он никогда не сможет изменять свои собственные свойства. Смотрите следующий пример:

function sum(a, b) {
 return a + b;
}

Это «чистая» функция, так как она не пытается изменить свои входные параметры и всегда будет возвращать один и тот же результат для одних и тех же параметров.

«Нечистая» функция - это функция, которая меняет свои собственные входные параметры:

function withdraw(account, amount) {
 account.total -= amount;
}

Каждый компонент должен действовать как чистая функция по отношению к своим свойствам.

Моя следующая статья будет посвящена «состоянию» в React. С состоянием наши компоненты могут изменять свои выходные данные в ответ на триггеры, такие как действия пользователя или сетевые ответы - без нарушения этого правила.

Заключение

Мы рассмотрели основы создания компонентов, а также увидели, как они вписываются в общую структуру наших приложений React. Мы также видели, как использовать props для придания свойств нашим компонентам. И мы рассмотрели некоторые из общих задач, с которыми мы, вероятно, столкнемся при работе с компонентами и свойствами.