2 added
2 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>В реальных React-приложениях компонентов значительно больше. Часть из них - самостоятельные, часть используется только в составе других.</p>
1
<p>В реальных React-приложениях компонентов значительно больше. Часть из них - самостоятельные, часть используется только в составе других.</p>
2
<p>Один из способов компоновки компонентов вам уже известен - children. Причём нет никакой разницы, являются ли потомки встроенными в React компонентами или это отдельно написанные компоненты.</p>
2
<p>Один из способов компоновки компонентов вам уже известен - children. Причём нет никакой разницы, являются ли потомки встроенными в React компонентами или это отдельно написанные компоненты.</p>
3
<p>В некоторых ситуациях внутрь компонента нужно передавать только определённые, специально созданные под него компоненты. Например, компонент Card до текущего момента был реализован так, что он на вход мог принимать только пропсы:</p>
3
<p>В некоторых ситуациях внутрь компонента нужно передавать только определённые, специально созданные под него компоненты. Например, компонент Card до текущего момента был реализован так, что он на вход мог принимать только пропсы:</p>
4
<p>В реальности это решение так себе. Кастомизация отсутствует полностью, можно передать только то, что изначально задумано, и то в формате строк. Ни о каком сложном содержимом не может быть и речи. Правильный подход выглядел бы так:</p>
4
<p>В реальности это решение так себе. Кастомизация отсутствует полностью, можно передать только то, что изначально задумано, и то в формате строк. Ни о каком сложном содержимом не может быть и речи. Правильный подход выглядел бы так:</p>
5
<p>Такой подход позволяет заменять компоненты внутри Card на любые другие.</p>
5
<p>Такой подход позволяет заменять компоненты внутри Card на любые другие.</p>
6
<p>В тех ситуациях, когда композиция не требуется, можно просто брать и использовать любые сторонние компоненты внутри своих.</p>
6
<p>В тех ситуациях, когда композиция не требуется, можно просто брать и использовать любые сторонние компоненты внутри своих.</p>
7
-
<p><a>https://codepen.io/hexlet/pen/XavMgZ</a></p>
7
+
<p><a>Попрактиковаться</a></p>
8
<p>Вкладывать можно сколько угодно раз и какие угодно компоненты. Но здесь кроется одна опасность. Желание построить идеальную архитектуру толкает разработчиков заранее планировать то, как разбить приложение на компоненты и сразу их реализовать. Важно понимать, что вложенность сама по себе - это усложнение понимания, так как придётся постоянно прыгать из одного компонента в другой. Кроме того, жёсткая структура свяжет вас по рукам и ногам, рефакторинг просто так не сделаешь, и желание его делать сильно поубавится из-за любви к своему решению. Будьте прагматичны. Оптимальный путь добавлять новые компоненты - это следить за моментом, когда вам становится сложно в текущем компоненте из-за объёмов и количества переменных, с которыми приходится иметь дело одномоментно. И даже в этом случае часто достаточно выделить дополнительные функции рендеринга внутри самого компонента, например так: renderItem.</p>
8
<p>Вкладывать можно сколько угодно раз и какие угодно компоненты. Но здесь кроется одна опасность. Желание построить идеальную архитектуру толкает разработчиков заранее планировать то, как разбить приложение на компоненты и сразу их реализовать. Важно понимать, что вложенность сама по себе - это усложнение понимания, так как придётся постоянно прыгать из одного компонента в другой. Кроме того, жёсткая структура свяжет вас по рукам и ногам, рефакторинг просто так не сделаешь, и желание его делать сильно поубавится из-за любви к своему решению. Будьте прагматичны. Оптимальный путь добавлять новые компоненты - это следить за моментом, когда вам становится сложно в текущем компоненте из-за объёмов и количества переменных, с которыми приходится иметь дело одномоментно. И даже в этом случае часто достаточно выделить дополнительные функции рендеринга внутри самого компонента, например так: renderItem.</p>
9
<h2>Состояние</h2>
9
<h2>Состояние</h2>
10
<p>Один из самых частых вопросов у тех, кто только начинает знакомиться с React, связан с тем, как распределять состояние по компонентам. Короткий ответ: никак. Почти во всех ситуациях разделение состояния усложнит код и работу с ним. Правильный подход - создать корневой компонент, который содержит всё состояние внутри себя, а все нижележащие компоненты получают свои данные как пропсы. Само состояние должно быть максимально плоским, как реляционная база данных. Тогда можно спокойно применять нормализацию и безболезненно выполнять обновления.</p>
10
<p>Один из самых частых вопросов у тех, кто только начинает знакомиться с React, связан с тем, как распределять состояние по компонентам. Короткий ответ: никак. Почти во всех ситуациях разделение состояния усложнит код и работу с ним. Правильный подход - создать корневой компонент, который содержит всё состояние внутри себя, а все нижележащие компоненты получают свои данные как пропсы. Само состояние должно быть максимально плоским, как реляционная база данных. Тогда можно спокойно применять нормализацию и безболезненно выполнять обновления.</p>
11
<p>Иногда могут возникать ситуации, когда необходимые в глубине свойства приходится протаскивать сквозь множество промежуточных компонентов, которые сами эти пропсы не используют. Это еще одна причина стараться не увлекаться глубокой вложенностью. С другой стороны, в следующем курсе вы познакомитесь с Redux, который во многом решает эту проблему (и много других).</p>
11
<p>Иногда могут возникать ситуации, когда необходимые в глубине свойства приходится протаскивать сквозь множество промежуточных компонентов, которые сами эти пропсы не используют. Это еще одна причина стараться не увлекаться глубокой вложенностью. С другой стороны, в следующем курсе вы познакомитесь с Redux, который во многом решает эту проблему (и много других).</p>
12
<h2>Колбеки</h2>
12
<h2>Колбеки</h2>
13
<p>Из сказанного выше возникает еще одна сложность: что, если событие возникает в глубинном компоненте, у которого нет своего состояния? Без использования Redux, по сути, только один выход. Корневой компонент должен пробрасывать колбеки во внутренние компоненты, а те, в свою очередь, пробрасывают их дальше по необходимости.</p>
13
<p>Из сказанного выше возникает еще одна сложность: что, если событие возникает в глубинном компоненте, у которого нет своего состояния? Без использования Redux, по сути, только один выход. Корневой компонент должен пробрасывать колбеки во внутренние компоненты, а те, в свою очередь, пробрасывают их дальше по необходимости.</p>
14
-
<p><a>https://codepen.io/hexlet/pen/XavRWy</a></p>
14
+
<p><a>Попрактиковаться</a></p>