[Комментарий для участия в лотерее] Поговорим о компонентах и разработке компонентов

Эта статья была применена к периферийным подаркам Nuggets, значок Nuggets*2 используется для лотереи в области комментариев, и вы можете участвовать, комментируя.Подробности

предисловие

По мере того, как фронтенд-разработка становится все более стандартизированной и сложной, чтобы предотвратить избыточность кода, упростить обслуживание и улучшить читабельность, разработка фронтенд-компонентов стала тенденцией. Итак, давайте сейчас подробно поговорим об этом, что такое разработка компонентов? Как спроектировать и инкапсулировать компонент для повышения эффективности вашей работы.

Почему компонентная разработка? Что такое компонентная разработка?

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

Принципы компонентной разработки

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

Кукольные компоненты и смарт-компоненты

Фактически, сообщество React будет примерно разделено на два компонента:

кукольные компоненты: Судя по названию, похож на марионетку, по внешнему проникновениюpropsЧтобы отобразить соответствующее представление, независимо от того, откуда берутся данные.
Умные компоненты: как правило, он оборачивает компонент марионетки, получает данные с помощью запросов и других методов, а затем передает их компоненту марионетки для управления его отрисовкой.

<智能组件>
    <木偶组件 />
</智能组件>

функциональный компонент

Объединение функциональных компонентов в ReactHooksВ основном, текущий мейнстрим и будущее направление развития.

Функциональный компонент не имеет состояния, без него не может быть инстанцирован, внутреннего жизненного цикла нет, фактически он просто принимает некоторыеpropsФункция, вы можете просто понимать функциональный компонент как функцию, которая определяет некоторые формальные параметры, принимает некоторые фактические параметры и выполняет некоторые действия внутри функции для обработки некоторых вещей.

Выяснить отношения между компонентами

<grandpa>
    <father>
        <grandson />
    </father>
</grandpa>

Здесь мы написали три компонента, чтобы кратко представить и разобраться

grandpaхочу датьgrandsonтогда счастливые деньгиgrandpaдавать напрямуюgrandsonЦелевая трансляция:broadcastВ этот моментfatherПросто не отправляйте данные.
grandpaхочу купить мясоfatherДатьgrandsonЧтобы сделать тушеную свинину, тогда связь заключается в том, что данные передаются слой за слоем и обрабатываются соответствующим образом и, наконец, предоставляютсяgrandson.
grandsonДатьgrandpaподарите тогдаgrandsonдавать напрямуюgrandpa Целевое распространение:dispatch

Дорогие друзья, вы можете обсудить свой опыт в компонентной разработке и пакетных компонентах в комментариях, и есть шанс выиграть красивый приз! Требования к лотерее области комментариев:

С 10 сентября, если в области комментариев взаимодействует более 10 человек (исключая самого автора), автор может нарисовать 2 значка Nuggets на свое имя (официально ответственность несут Nuggets).
С 10 сентября, если в области комментариев взаимодействует более 10 человек (без учета самого автора), а количество комментариев превышает 20 (включая самого автора), сам автор получает дополнительный подарок в виде золотых самородков.
Самая популярная область комментариев (количество комментариев + полные данные) ТОП 1-5: 1 комплект значков или 1 футболка Nuggets ITT

Уведомление о счастливом розыгрыше

Это событие официально поддерживается Nuggets, подробности можно узнать здесь.nuggets.capable/post/700064…Список опубликован мной.

С 10 сентября, если в области комментариев взаимодействует более 10 человек (исключая самого автора), автор может нарисовать 2 значка Nuggets на свое имя (официально ответственность несут Nuggets).

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

Нравится и поддержите, оставьте в руке стойкий аромат, и будьте почитаемы, шевелите своими ручонками, чтобы заработать состояние, спасибо, что оставили свои следы.

Прекрасная рекомендация в прошлом

Холст Восхождение на Пит-Роуд [Методы]

Не разбираетесь в сео-оптимизации? Статья, которая поможет вам понять, как сделать SEO-оптимизацию

Холщовая дорога для скалолазания [Свойства]

[Практическая глава] Руководство по разработке мини-программы WeChat и практика оптимизации

Поговорим о мобильной адаптации

Практика оптимизации производительности интерфейса

Разговор о раздражающих регулярных выражениях

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

Не понимаете виртуальный DOM Vue? Эта статья поможет вам полностью получить виртуальный DOM

Рекомендации, связанные с Git

Простое введение в Git

git реализует автоматическое нажатие

Как я использую git на работе

Рекомендации, связанные с интервью

Front-end Swastika — Основы

Внешний вид 4D-зоны — расширенный

Для получения дополнительной информации см.:Домашняя страница