ReactJS - Проверка props: Пособие для начинающих

Привет, будущие разработчики React! Сегодня мы погрузимся в один из самых важных концептов в React: проверка props. Не волнуйтесь, если вы новички в программировании; я проведу вас через это шаг за шагом, так же, как я делал это для countless студентов на протяжении многих лет моего преподавания. Давайте отправимся в это захватывающее путешествие вместе!

Что такое props?

Before мы перейдем к проверке, давайте быстро освежим в памяти, что такое props. В React, props (сокращение от properties) — это способ передать данные от родительского компонента к дочернему компоненту. Представьте их как аргументы, которые вы передаете функции. Они только для чтения и помогают сделать ваши компоненты более динамичными и многоразовыми.

Зачем проверять props?

Представьте, что вы строите дом. Вы бы не хотели, чтобы кто-то случайно использовал бумагу вместо кирпичей, верно? Точно так же, в React, мы хотим быть уверенными, что правильный тип данных передается в наши компоненты. Вот где на помощь приходит проверка props.

Проверка props помогает нам:

1. Catch bugs рано
2. Сделать наш код более читаемым
3. Действовать как документация для других разработчиков

Теперь давайте погрузимся в то, как мы можем реализовать проверку props в React!

PropTypes

React имеет встроенную функцию под названием PropTypes, которая позволяет нам проверять props, которые получают наши компоненты. Это как если бы у вас был строгий, но дружелюбныйouncer у входа в ваш компонент, проверяющий, имеет ли каждый (каждый prop) правильные документы для входа.

Установка PropTypes

Для начала, нам нужно установить PropTypes. В вашем терминале, выполните:

npm install prop-types

Once установлен, мы можем импортировать его в наш файл компонента:

import PropTypes from 'prop-types';

Использование PropTypes

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

import React from 'react';
import PropTypes from 'prop-types';

function Greeting({ name }) {
return <h1>Привет, {name}!</h1>;
}

Greeting.propTypes = {
name: PropTypes.string
};

export default Greeting;

В этом примере, мы говорим React, что prop name должен быть строкой. Если кто-то попытается передать число или любой другой тип, React покажет警告 в консоли.

Доступные валидаторы

PropTypes предоставляет разнообразие валидаторов. Давайте посмотрим на некоторые из самыхcommon:

Валидатор	Описание
PropTypes.string	Проверяет, что prop является строкой
PropTypes.number	Проверяет, что prop является числом
PropTypes.bool	Проверяет, что prop является булевым значением
PropTypes.array	Проверяет, что prop является массивом
PropTypes.object	Проверяет, что prop является объектом
PropTypes.func	Проверяет, что prop является функцией

Давайте увидим это в действии с более сложным примером:

import React from 'react';
import PropTypes from 'prop-types';

function UserProfile({ name, age, isStudent, hobbies, address, onUpdate }) {
return (
<div>
<h2>{name}</h2>
<p>Возраст: {age}</p>
<p>Студент: {isStudent ? 'Да' : 'Нет'}</p>
<p>Хобби: {hobbies.join(', ')}</p>
<p>Город: {address.city}</p>
<button onClick={onUpdate}>Обновить профиль</button>
</div>
);
}

UserProfile.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
isStudent: PropTypes.bool,
hobbies: PropTypes.array,
address: PropTypes.shape({
city: PropTypes.string,
country: PropTypes.string
}),
onUpdate: PropTypes.func
};

export default UserProfile;

Давайте разберем это:

1. name: PropTypes.string.isRequired: Этот prop должен быть строкой и является обязательным.
2. age: PropTypes.number: Этот prop должен быть числом, но не является обязательным.
3. isStudent: PropTypes.bool: Этот prop должен быть булевым значением.
4. hobbies: PropTypes.array: Этот prop должен быть массивом.
5. address: PropTypes.shape({...}): Этот prop должен быть объектом с определенной структурой.
6. onUpdate: PropTypes.func: Этот prop должен быть функцией.

Продвинутые валидаторы

PropTypes также предоставляет более продвинутые валидаторы:

1. PropTypes.oneOf

Этот валидатор проверяет, является ли prop одним из определенного набора значений:

ColorPicker.propTypes = {
color: PropTypes.oneOf(['red', 'green', 'blue'])
};

2. PropTypes.oneOfType

Этот валидатор проверяет, соответствует ли prop одному из нескольких типов:

AgeDisplay.propTypes = {
age: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
])
};

3. PropTypes.arrayOf

Этот валидатор проверяет, является ли prop массивом определенного типа:

NumberList.propTypes = {
numbers: PropTypes.arrayOf(PropTypes.number)
};

4. PropTypes.objectOf

Этот валидатор проверяет, является ли prop объектом с значениями определенного типа:

Scores.propTypes = {
scores: PropTypes.objectOf(PropTypes.number)
};

Пользовательские валидаторы

Иногда встроенные валидаторы не suffice. Тогда на помощь приходят пользовательские валидаторы! Вот пример:

function AgeValidator(props, propName, componentName) {
if (props[propName] < 0 || props[propName] > 120) {
return new Error(`Invalid prop ${propName} supplied to ${componentName}. Age must be between 0 and 120.`);
}
}

Person.propTypes = {
age: AgeValidator
};

Этот пользовательский валидатор ensures, что возраст находится между 0 и 120.

Заключение

Проверка props — это как если бы у вас был дружелюбный робот-ассистент, который проверяет вашу работу за вас. Она помогает catch bugs рано, делает ваш код более robust, и служит документацией для других разработчиков (включая будущего вас!).

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

Надеюсь, это руководство помогло вам понять проверку props в React. Продолжайте практиковаться, продолжайте программировать и, самое главное, продолжайте наслаждаться! Если вы когда-либо почувствуете, что зашли в тупик, просто вспомните: даже самые сложные приложения React создаются один prop за раз. У вас получится!

Credits: Image by storyset