что такое props в react
Способы передачи данных между компонентами в React
Авторизуйтесь
Способы передачи данных между компонентами в React
В React есть несколько способов передачи данных между компонентами: Render props / props, Context, React-Redux / Redux.
В этой статье вы узнаете об этих способах подробно. В каждом из них вы научитесь добиваться двух вариантов взаимодействия:
Render props / props
Один из самых простых способов передачи данных в компоненты — это props (свойства).
Что такое prop?
Как известно, разметка в компонентах рендерится так:
Это отобразится как C component
C фактически отображается в P, так как P является его родительским компонентом. Кроме того, P может отобразить C следующим образом:
P добавляет дополнительные свойства в тег элемента C. Это очень похоже на
В случае выше будет создан HTMLDivElement :
Имя атрибута будет установлено в объект props вот так:
и передастся классу компонента C с помощью React.
React основан на JSX, поэтому разметка в P будет скомпилирована в таком виде:
Первый параметр — это элемент для рендеринга, а второй содержит атрибуты элемента (в виде объектного литерала). CreateElement возвращает литерал, содержащий первый и второй параметры.
При рендеринге React проверяет, является ли этот литерал на самом деле элементом или же классом. Если это класс, React создаёт его экземпляр, используя ключевое слово new, затем передает этот экземпляр в объект props и вызывает метод render.
Приведённый выше код показывает, что фактически делает React для рендеринга компонента или элемента.
Примечание: фрагмент выше не полный, он нужен, чтобы продемонстрировать, как компоненты получают аргумент props.
Таким образом P удаётся отправить данные в C.
Но как C теперь может отправлять данные обратно в родительский класс P? Это делается с помощью render props.
Что такое render props? Это концепция, посредством которой функция может быть передана дочерним компонентам в качестве свойства (props). Строка, объект, число или массив могут быть переданы через props дочерним компонентам. Это реализовано следующим образом:
Здесь функция () =>
Итак, теперь вы знаете, что такое render props (или свойства для рендеринга). Давайте посмотрим, как дочерние компоненты могут использовать их для связи с родительскими.
Что происходит в этом фрагменте? У компонента P метод вывода связан с его экземпляром. bind(this) говорит JS запустить функцию внутри области видимости класса, объекта или функции. Вывод здесь выполняется за пределами класса P, но он по-прежнему может ссылаться на все свойства и методы, определённые в P.
Таким образом, метод вывода передаётся в компонент класса C, чтобы получить аргумент props через свойство func.
Теперь C успешно связался со своим родителем P. Можно изменить код, чтобы C отправлял данные в P.
Как вы видите, значение P отправилось из его дочернего элемента C.
Props и render props — это одно и то же, но они имеют разные концепции. Render props в основном используется для разделения логики рендеринга между компонентами. Но в данном случае этот метод был использован для передачи данных от дочернего компонента к родительскому.
Context
Для большинства разработчиков передача props глубоко вложенным компонентам в дереве была бы утомительной. React предоставляет способ определять глобальные данные в одном месте и получать к ним доступ из любого места в приложении.
Context (контекст) как раз используется в React для обмена данными между глубоко вложенными компонентами.
Чтобы сообщить React о намерении передать context от родительского компонента остальным его дочерним элементам, нужно определить два атрибута в родительском классе:
Родительский компонент определяет context, который React использует для передачи данных глобально своим дочерним элементам.
Как теперь сделать так, чтобы дочерние элементы могли передавать данные своим родителям?
Дочерние компоненты могут изменять значение context, который будет отражаться во всех вложенных компонентах, включая и родительский компонент.
React-Redux/Redux
Это своего рода “ремейк” способа Context в React. Redux — это простая библиотека управления свойствами приложения, которая позволяет легко хранить эти свойства в одном месте и изменять их из любого места.
React-Redux был создан, чтобы сделать Redux легко совместимым с приложениями React.
Поскольку состояние определяется в одном месте, родительские компоненты могут устанавливать или обновлять его значение, а дочерние могут это фиксировать: связь Родитель-Наследник.
Аналогично дочерние компоненты могут устанавливать или обновлять значение состояния в хранилище, и оно также будет фиксироваться родительскими компонентами: связь Наследник-Родитель.
Заключение
В этом материале вы увидели, как происходит взаимодействие между компонентами React и какими способами можно этого достичь:
В первом разделе вы увидели использование props и render props, они работают с помощью HTML-подобных атрибутов. Context использует центральное хранилище, которое родитель и потомки могут как читать, так и обновлять. React-Redux и Redux делают то же самое, что и Context, компоненты выполняют чтение/запись из центрального хранилища.
Для дальнейшего освоения React вам может быть полезен данный материал.
2.5 Компоненты и свойства
Компоненты позволяют разделить UI на независимые, повторно используемые части и работать с каждой из них отдельно.
Концептуально, компоненты похожи на JavaScript-функции. Они принимают произвольные данные (называемые props) и возвращают React-элементы, которые описывают то, что должно появиться на экране.
2.5.1 Компоненты-функции и компоненты-классы
Самый простой способ объявить компонент – это написать JavaScript-функцию:
Эта функция является корректным React-компонентом, потому что она принимает единственный объект props с данными в качестве аргумента и возвращает React-элемент. Такие компоненты называются «функциональными», так как они и есть JavaScript-функции.
Компонент можно объявить другим способом. Для этого нужно использовать ES6-класс:
Два приведенных выше компонента являются эквивалентными с точки зрения React. Но пока мы будем использовать функциональные компоненты, так как они короче.
2.5.2 Отрисовка компонентов
Ранее, мы наталкивались лишь на React-элементы, которые представляли собой DOM-теги:
Тем не менее, элементы могут быть представлены пользовательскими(кастомными) компонентами:
Например, этот код отрисовывает на странице «Hello, Sara»:
Давайте прорезюмируем то, что произошло в этом примере:
Hello, Sara
Hello, Sara
Всегда именуйте свои компоненты с большой буквы.
Например,
2.5.3 Композиция компонентов
Компоненты могут ссылаться на другие компоненты в своём выводе (результате отрисовки). Это позволяет нам использовать ту же самую абстракцию компонента для любого уровня детализации. Кнопка, форма, диалог, экран: в React-приложении все эти сущности выражены компонентами.
Как правило, новые React-приложения имеют единственный компонент App на самом верху иерархии. Тем не менее, если вы интегрируете React в уже существующее приложение, вы можете начать снизу вверх с маленького компонента, такого как Button и постепенно двигаться вверх по иерархии отображения.
2.5.4 Извлечение компонентов
Не бойтесь разделять компоненты на более мелкие компоненты.
Рассмотрим пример с компонентом Comment :
Он принимает author (объект), text (строка) и date (дата) как свойства, и описывает комментарий на социальном веб-сайте.
Данный компонент довольно сложно изменить из-за его вложенности. Также тяжело повторно использовать и его составные части. Давайте извлечем из него несколько небольших компонентов, упростив исходный компонент.
Для начала давайте извлечем из него компонент Avatar :
Мы рекомендуем именовать props с точки зрения компонента, а не контекста, в котором он будет использован.
Сейчас мы можем немного упростить компонент Comment :
Это позволяет нам еще больше упростить компонент Comment :
Извлечение компонентов по началу может показаться рутинной работой. Однако набор универсальных, переиспользуемых, отлаженных компонентов с лихвой окупит все усилия в больших приложениях, экономя массу времени.
2.5.4 Свойства props – только для чтения
Такие функции называются «чистыми». Потому что они не изменяют свои аргументы и всегда возвращают одинаковый результат для одних и тех же аргументов.
В противоположность им, следующая функция не является чистой, потому что она изменяет свои аргументы:
React является очень гибким, но он имеет одно строгое правило:
Конечно, UI приложения – динамический и изменяется со временем. В следующем разделе мы познакомимся с новой концепцией «состояния». Состояние позволяет React-компонентам изменять их вывод со временем в ответ на действия пользователя, ответы сети или что-то другое, не нарушая данное правило.
Components and Props
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a detailed component API reference here.
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
Function and Class Components
The simplest way to define a component is to write a JavaScript function:
This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “function components” because they are literally JavaScript functions.
You can also use an ES6 class to define a component:
The above two components are equivalent from React’s point of view.
Function and Class components both have some additional features that we will discuss in the next sections.
Rendering a Component
Previously, we only encountered React elements that represent DOM tags:
However, elements can also represent user-defined components:
When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object “props”.
For example, this code renders “Hello, Sara” on the page:
Let’s recap what happens in this example:
Hello, Sara
Hello, Sara
Note: Always start component names with a capital letter.
React treats components starting with lowercase letters as DOM tags. For example,
To learn more about the reasoning behind this convention, please read JSX In Depth.
Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.
For example, we can create an App component that renders Welcome many times:
Typically, new React apps have a single App component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like Button and gradually work your way to the top of the view hierarchy.
Don’t be afraid to split components into smaller components.
For example, consider this Comment component:
It accepts author (an object), text (a string), and date (a date) as props, and describes a comment on a social media website.
This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it. Let’s extract a few components from it.
First, we will extract Avatar :
We recommend naming props from the component’s own point of view rather than the context in which it is being used.
We can now simplify Comment a tiny bit:
Next, we will extract a UserInfo component that renders an Avatar next to the user’s name:
This lets us simplify Comment even further:
Props are Read-Only
Whether you declare a component as a function or a class, it must never modify its own props. Consider this sum function:
Such functions are called “pure” because they do not attempt to change their inputs, and always return the same result for the same inputs.
In contrast, this function is impure because it changes its own input:
React is pretty flexible but it has a single strict rule:
All React components must act like pure functions with respect to their props.
Of course, application UIs are dynamic and change over time. In the next section, we will introduce a new concept of “state”. State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.
Рендер-пропсы
Термин «рендер-проп» относится к возможности компонентов React разделять код между собой с помощью пропа, значение которого является функцией.
Компонент с рендер-пропом берёт функцию, которая возвращает React-элемент, и вызывает её вместо реализации собственного рендера.
Такой подход, в частности, применяется в библиотеках React Router, Downshift и Formik.
В этой статье мы покажем, чем полезны и как писать рендер-пропсы.
Использование рендер-пропа для сквозных задач
Компоненты — это основа повторного использования кода в React. Однако бывает неочевидно, как сделать, чтобы одни компоненты разделяли своё инкапсулированное состояние или поведение с другими компонентами, заинтересованными в таком же состоянии или поведении.
Например, следующий компонент отслеживает положение мыши в приложении:
Когда курсор перемещается по экрану, компонент отображает координаты (x, y) внутри
Возникает вопрос: как мы можем повторно использовать это поведение в другом компоненте? То есть если другому компоненту необходимо знать о позиции курсора, можем ли мы как-то инкапсулировать это поведение, чтобы затем легко использовать его в этом компоненте?
Теперь компонент инкапсулирует всё поведение, связанное с обработкой событий mousemove и хранением позиций курсора (x, y), но пока не обеспечивает повторного использования.
Для начала вы можете отрендерить внутри метода render компонента следующим образом:
Этот подход будет работать для конкретного случая, но мы не достигли основной цели — инкапсулировать поведение с возможностью повторного использования. Теперь, каждый раз когда мы хотим получить позицию мыши для разных случаев, нам требуется создавать новый компонент (т. е. другой экземпляр ), который рендерит что-то специально для этого случая.
Вот здесь рендер-проп нам и понадобится: вместо явного указания внутри компонента, и трудозатратных изменений на выводе рендера, мы предоставляем функцию в качестве пропа, с которой мы используем динамическое определение того, что нужно передавать в рендер-проп.
Иными словами, рендер-проп — функция, которая сообщает компоненту что необходимо рендерить.
Эта техника позволяет сделать легко портируемым поведение, которое мы хотим повторно использовать. Для этого следует отрендерить компонент с помощью рендер-пропа, который сообщит, где отрендерить курсор с текущим положением (x, y).
Таким образом, рендер-пропы позволяют реализовать любой из описанных выше паттернов.
Использование пропсов, отличных от render (как название передаваемого свойства)
И запомните, проп children не обязательно именовать в списке «атрибутов» вашего JSX-элемента. Вместо этого, вы можете поместить его прямо внутрь элемента!
Эту технику можно увидеть в действии в API библиотеки react-motion.
Поскольку этот метод не совсем обычен, вы, вероятно, захотите явно указать, что children должен быть функцией в вашем propTypes при разработке такого API.
Будьте осторожны при использовании рендер-проп вместе с React.PureComponent
Чтобы решить эту проблему, вы можете определить проп как метод экземпляра, например так:
Компоненты и свойства
Компоненты позволяют разделить пользовательский интерфейс на независимые, повторно используемые части и работать с каждой из частей отдельно. На этой странице представлено введение в идею компонентов. Здесь вы можете найти подробный справочник API по компоненту.
Концептуально компоненты похожи на функции JavaScript. Они принимают произвольные входные данные (называемые «props» или свойствами) и возвращают React-элементы, описывающие, что должно появиться на экране.
Функциональные и классовые компоненты
Самый простой способ определить компонент — написать JavaScript-функцию:
Данная функция — корректный компонент React, потому что он принимает один аргумент-объект «props» (который обозначает свойства) с данными и возвращает элемент React. Такие компоненты мы называем «функциональными», потому что они являются буквально функциями JavaScript.
Вы также можете использовать класс из ES6 для определения компонента:
Два вышеуказанных компонента эквивалентны с точки зрения React.
У классов есть дополнительные возможности, которые мы обсудим в следующих разделах. До этого момента мы будем использовать функциональные компоненты из-за их краткости.
Раньше мы сталкивались только с элементами React, представляющие DOM-теги:
Однако элементы также могут быть пользовательскими компонентами:
Когда React видит элемент, представляющий пользовательский компонент, он передаёт JSX-атрибуты этому компоненту в виде единственного объекта. Мы называем этот объект «props».
Например, этот код отображает «Привет, Сара» на странице:
Давайте посмотрим, что происходит в этом примере:
Hello, Sara
Hello, Sara
Примечание: Всегда именуйте компоненты с заглавной буквы.
React обрабатывает компоненты, начинающиеся со строчных букв, как DOM-теги. Например,
Вы можете больше узнать о причинах, лежащих в основе этого соглашения здесь.
Компоненты могут ссылаться на другие компоненты в своём выводе. Это позволяет использовать одну и ту же абстракцию компонента для любого уровня детализации. Кнопка, форма, диалоговое окно, экран: в приложениях React все они обычно являются компонентами.
Не бойтесь разделять компоненты на более мелкие компоненты.
Например, рассмотрим этот компонент Comment :
Он принимает author (объект), text (строка) и date (дата) в качестве свойств и описывает комментарий на сайте социальных сетей.
Этот компонент может быть сложно изменить из-за вложенности, а также трудно повторно использовать отдельные его части. Давайте извлечём из него несколько компонентов.
Сначала мы извлечём Avatar :
Мы рекомендуем называть свойства объекта props с точки зрения самого компонента, а не контекста, в котором он используется.
Теперь мы можем чуть-чуть упростить Comment :
Это позволяет нам упростить Comment ещё больше:
Свойства объекта props доступны только для чтения
Независимо от того, объявляете ли компонент как функцию или класс, он не должен изменять свои свойства. Рассмотрим эту функцию sum :
Такие функции называются «чистыми», потому что они не пытаются изменить свои аргументы и всегда возвращают один и тот же результат для одних и тех же входных данных.
Напротив, функция ниже — не чистая, потому что она изменяет свои входные данные:
React довольно гибкий, но имеет одно строгое правило:
Все React-компоненты должны вести себя как чистые функции в плане своих свойств.
Конечно, пользовательские интерфейсы приложений динамичны и меняются со временем. В следующем разделе мы представим новую концепцию «состояние». Состояние позволяет компонентам React изменять свой вывод с течением времени в ответ на действия пользователя, сетевые ответы и что-либо ещё без нарушения правила выше.