React и TypeScript: Практическое руководство. Быстрый старт - страница 14

Пример:

)

}

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

Например, вместо props можно использовать data, parameters, options или любое другое имя, которое вам кажется более подходящим для вашей ситуации. Важно помнить, что выбранное вами имя аргумента будет использоваться для доступа к пропсам внутри компонента, поэтому оно должно быть понятным и соответствовать содержанию.

Пример с использованием другого имени для аргумента:

)

}

При использовании компонента:

<PersonInfoname=«Алиса» age= {30} />

Стоит помнить, что использование слова «props» для аргумента функции компонента – это стандартная практика в сообществе React, и она делает ваш код более читаемым и понятным для других разработчиков, знакомых с React. Большинство разработчиков ожидают видеть props как стандартное имя для пропсов, и это может упростить совместную работу над проектами.

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

State – это специальный объект внутри компонента, который используется для хранения и отслеживания изменяющихся данных. Стейт позволяет компоненту «запоминать» данные и перерисовывать себя, когда эти данные меняются.

Пример: Если у вас есть компонент «Счетчик», то стейт может содержать текущее значение счетчика. Когда пользователь нажимает на кнопку увеличения счетчика, стейт изменяется, и компонент обновляется, чтобы отобразить новое значение счетчика.

count в данном случае представляет начальное состояние (значение), которое мы указываем в useState, и setCount – это функция, которую мы используем для обновления этого состояния. В нашем случае, increment вызывает setCount, чтобы увеличить значение count.

Итак, обощим:

Пропсы (Props) – это данные, которые вы передаете в компонент извне, как параметры.

Стейт (State) – это данные, которые компонент «запоминает» и использует для отслеживания изменений и перерисовки себя.

Пропсы используются для передачи информации, такой как текст, числа, функции или объекты, от одного компонента к другому. Пропсы делают компоненты в React многоразовыми и настраиваемыми.

Вот основные аспекты работы с пропсами в React:

– Передача данных. Пропсы позволяют родительскому компоненту передавать данные в дочерний компонент. Эти данные могут быть переданы в виде атрибутов (параметров) при использовании компонента в JSX.

– Нестрогое чтение (доступ). Дочерний компонент может получить доступ к пропсам, используя props (для функциональных компонентов) или this.props (для классовых компонентов).