ReactJS - Stateless Components: A Beginner's Guide

Привет, будущие маги React! Сегодня мы отправимся в увлекательное путешествие в мир компонентов React, конкретно focusing на безъ��态ных компонентах. Не волнуйтесь, если вы новички в программировании; я буду вашим дружелюбным проводником, объясняя все шаг за шагом. Так что возьмите杯 кофе (или чая, если это ваш выбор) и погружайтесь с нами!

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

Прежде чем мы поговорим о безъ��态ных компонентах, давайте поймем, что такое компоненты в React. Представьте компоненты как кубики LEGO. Так же, как вы можете построить сложные структуры из простых LEGO деталей, вы можете создавать сложные веб-приложения, используя компоненты React.

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

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

1. Состоятельные компоненты (классовые компоненты)
2. Безъ��态ные компоненты (функциональные компоненты)

Сегодня мы сосредоточимся на безъ��态ных компонентах, но briefly touch на состоятельные компоненты, чтобы понять разницу.

Состоятельные компоненты: Краткий обзор

Состоятельные компоненты, также известные как классовые компоненты, resemble Swiss Army knives в React. Они могут многое делать, включая управление своим состоянием. Вот пример:

import React, { Component } from 'react';

class Greeting extends Component {
constructor(props) {
super(props);
this.state = { name: 'World' };
}

render() {
return <h1>Hello, {this.state.name}!</h1>;
}
}

В этом примере Greeting - это состоятельный компонент, который управляет своим состоянием name. Но иногда нам не нужно столько возможностей, и здесь на помощь приходят безъ��态ные компоненты!

Безъ��态ные компоненты: Простота в ее лучшем виде

Безъ��态ные компоненты, также называемые функциональными компонентами, resemble эффективных работников в React. Они делают одну работу и делают ее хорошо: отрисовывают UI на основе полученных props. Давайте посмотрим на пример:

const Greeting = (props) => {
return <h1>Hello, {props.name}!</h1>;
};

Не ли это замечательно? Этот компонент делает ту же работу, что и наш предыдущий классовый компонент, но с гораздо меньшим количеством кода. Это как разница между использованием молотка и обычного молотка для подвешивания рамки для картины - иногда проще лучше!

Why Use Stateless Components?

1. Простота: Они легче читаются и пишутся.
2. Производительность: Они немного быстрее, так как React не нужно устанавливать управление состоянием.
3. Тестированность: С меньшим количеством подвижных частей они легче тестируются.
4. Повторное использование: Они более сфокусированы, что делает их легче повторно использовать.

Создание вашего первого безъ��态ного компонента

Давайте создадим простой безъ��态ный компонент для предпросмотра записи в блоге:

const BlogPostPreview = ({ title, excerpt, author }) => {
return (
<div className="blog-post-preview">
<h2>{title}</h2>
<p>{excerpt}</p>
<span>By {author}</span>
</div>
);
};

Вот что происходит:

• Мы определяем функцию под названием BlogPostPreview.
• Она принимает объект в качестве аргумента, который мы немедленно разворачиваем, чтобы получить title, excerpt и author.
• Функция возвращает JSX, который описывает, что должен отрисовывать компонент.

Чтобы использовать этот компонент:

const App = () => {
return (
<div>
<BlogPostPreview
title="React is Awesome!"
excerpt="Learn why React is taking the web development world by storm."
author="Jane Doe"
/>
</div>
);
};

Props: Кровь безъ��态ных компонентов

Props (кратко от properties) - это то, как мы передаем данные в наши безъ��态ные компоненты. Они resembleingredients, которые вы даете шеф-повару - компонент берет эти props и "варит" их в美味的 UI!

Давайте создадим более сложный пример: карточка профиля пользователя.

const ProfileCard = ({ name, job, avatar, socialLinks }) => {
return (
<div className="profile-card">
<img src={avatar} alt={`${name}'s avatar`} />
<h2>{name}</h2>
<p>{job}</p>
<div className="social-links">
{socialLinks.map((link, index) => (
<a key={index} href={link.url}>
{link.platform}
</a>
))}
</div>
</div>
);
};

Здесь мы используем более сложные props, включая массив ссылок на социальные сети. Давайте разберем это:

• Мы разворачиваем name, job, avatar и socialLinks из props.
• Мы используем эти значения для заполнения нашего JSX.
• Для socialLinks мы используем функцию map, чтобы создать ссылку для каждой социальной платформы.

Чтобы использовать этот компонент:

const App = () => {
const socialLinks = [
{ platform: 'Twitter', url: 'https://twitter.com/johndoe' },
{ platform: 'LinkedIn', url: 'https://linkedin.com/in/johndoe' }
];

return (
<ProfileCard
name="John Doe"
job="React Developer"
avatar="https://example.com/avatar.jpg"
socialLinks={socialLinks}
/>
);
};

Лучшие практики для безъ��态ных компонентов

Вот несколько советов, чтобы сделать ваши безъ��态ные компоненты великолепными:

1. Держите их сфокусированными: Каждый компонент должен делать одну вещь хорошо.
2. Используйте prop-types: Хотя это не covered в этом руководстве, prop-types помогают ловить ошибки, проверяя типы props.
3. Используйте значения по умолчанию для props: Предоставляйте значения по умолчанию для props, когда это имеет смысл.
4. Разворачивайте props: Это делает ваш код чище и легче читается.

Заключение

Поздравляю! Вы только что сделали свои первые шаги в мир безъ��态ных компонентов React. Помните, как и при обучении любому новому навыку, практика makes perfect. Попробуйте создавать свои безъ��态ные компоненты, экспериментируйте с разными props и, самое главное, получайте удовольствие!

В следующем уроке мы углубимся в то, как использовать эти компоненты для создания реального приложения. Пока что, счастливого кодирования!

Метод	Описание
props	Объект, содержащий свойства, переданные в компонент
useState	Хук, позволяющий добавлять состояние в функциональные компоненты
useEffect	Хук для выполнения побочных эффектов в функциональных компонентах
useContext	Хук для подписки на React контекст без introduction nesting
useReducer	Хук для управления более сложной логикой состояния в функциональных компонентах
useCallback	Хук для memoizing функций для оптимизации производительности
useMemo	Хук для memoizing дорогостоящих вычислений
useRef	Хук для создания mutable ссылок, persisting через рендеры

Credits: Image by storyset