«Терпение и настойчивость - величайшие качества, гарантирующие успех»… iC
Реактивное программирование
Я сидел неуклюже, глядя на ткацкие станки бесконечных строк React, не зная, куда идти ... У меня была отметка, чтобы дополнить мои поверхностные знания о React, создав приложения и, возможно, отличный сайт. То, что встретило эту захватывающую идею, стало более сложным, чем React Routing ...
Но подождите минутку, я сделал паузу, чтобы полностью убедиться в уровне моих знаний о React, прежде чем начать свой проект White Elephant в качестве команды Super Eagle, возглавляемой группой блестяще уставших мальчиков, которые собирались получить свои супер-зеленые крылья. снял их и отправил домой морским транспортом. У меня не было такого опыта с моей новой девушкой Реагировать. Таким образом, мысль была верной на перерыв. Я действительно знал React?
this.state
Я начал с ответа на вопрос: что такое на самом деле this.state. Оказалось, что ответ был туманным и тусклым, хотя я знал, что это аналог this.props, я еще не был уверен в этом состоянии.
Я оказался в состоянии безгражданства; с помощью моего лучшего друга google.com мне пришлось очистить паутину и пролить больше света на это загадочное состояние.
В каком я состоянии
React - прекрасная и мощная библиотека, прекрасная скорость, которую она обеспечивает с виртуальной DOM и повторным рендерингом элементов в DOM, а не всей страницы, довольно уникальна. Связь довольно проста: - › вы передаете свойства от родительских компонентов дочерним компонентам, и это однонаправлено. Таким образом, дети не имеют права изменять полученные реквизиты и не имеют возможности передать их своим родителям. Меня очень удивило такое поведение, которое дает React ... что, если мне нужно изменить «собственное» свойство компонента, нужно ли мне перейти от родительского компонента, который может жить на несколько слоев выше того, где я был в данный момент?
Не только я был вовлечен во взаимодействие глубоко вложенных компонентов, поскольку другие стажеры сталкивались с теми же проблемами. Потратив время на то, чтобы добраться до корня этого, я обнаружил, что состояние было таким же дружелюбным, как и мой наставник chibueze ukaegbu. Мне очень не хватает его присутствия здесь, на Фабрике.
Повышение уровня государства
В отличие от props, состояние компонента полностью обрабатывается дочерним компонентом. Родительский компонент не нужно информировать, его это даже не заботит. Состояние предназначено для контроля детей ...
Пример:
Когда мы вчера праздновали Шалом Мэтьюз и @grace, что оказалось их днем рождения ... наши инструкторы (родительский компонент) не обязательно были озабочены пением и танцами, ни были ли они озабочены фотографиями и краткими разговорами о празднующих… потому что это было «состояние» вещей для нас, стажеров… их заботили только те «реквизиты», которые приходили. Например, торт и вино …
Хорошая вещь в React заключается в том, что состояние и свойства могут взаимодействовать особым образом, как показывает нам наш видеоинструктор Эндрю Мид в своей React tutorial.
Как добраться до 404
Получив некоторый уровень закрепления за состояниями и реквизитами, мы перешли на React Router в качестве инструктора Mr. Мэтью проводит нас через создание главной страницы, страницы продукта и страницы 404. Не знал, что маршрутизация может быть очень интересной. Если вы хотите попасть на страницу 404, вы можете написать что-то вроде этого:
Эта строка ‹Route path =” / * ”component = {my404} /› перенесет, казалось бы, потерянного пользователя на вашу красиво оформленную страницу 404 и изящно вернет пользователя обратно в известные страны, если разработчик будет добр. достаточно, чтобы записать это.
Функциональные компоненты без сохранения состояния
Имя обмануло меня. У меня на этом перекрестке была предустановлена паутина. Что, черт возьми, это функциональные компоненты без сохранения состояния. Я спросил, как мои растущие мысли обращаются к моему приятелю google.com, и поверьте мне, я не выделил 5 строк в полученных мною результатах; потому что я не был готов к информации. Но сейчас? мне приятно писать об этом.
Большинство наших компонентов React построены на основе классов следующим образом:
В приведенном выше примере мы создали компонент Menu, основанный на классе компонентов React. По сути, мы создаем подкласс Menu от React.Component, который вы, очевидно, должны импортировать в начале своего скрипта. Написание компонентов с отслеживанием состояния пригодится, когда необходимо управлять состояниями, и при этом компонент должен быть основан на классах.
Компоненты, созданные с помощью этого метода, имеют большие преимущества, особенно при тестировании нашего приложения React, поскольку их легче тестировать. Я хотел бы обратить внимание на то, что происходит за кулисами. Для движка очень дорого обходится считывание базы кода модуля React для генерации компонентов класса. Это делает его довольно медленным. Но вы, наверное, не заметили бы.
Таким образом, введение функциональных компонентов без сохранения состояния важно. Когда у нас есть компоненты, которые просто используют свойства и не нуждаются в управлении состоянием, мы могли бы легко преобразовать этот компонент в функциональный компонент без состояния. или напишите так ab initio.
Прежде чем мы перейдем к синтаксису и конструкции, важно отметить, что функциональный компонент без сохранения состояния
- просто компонент, который является функцией.
- быстрее, чем компоненты на основе классов
- неявно или неявно возвращает значение
- нельзя использовать встроенный экспорт по умолчанию как мы использовали выше
Хорошо, давайте сами построим
В приведенном выше примере мы неявно возвращаем div с именем класса = ‘menu’. Обратите внимание, что последней мы использовали экспорт по умолчанию.
Если вашему компоненту меню нужны какие-то реквизиты для работы, все, что вам нужно сделать, это передать реквизиты в качестве параметра функции.
const Menu = (props) => {
// happy hacking…
}
Обучение - для сильных! Никогда не прекращайте учиться и не бросайте ни одну тему, которая кажется сложной в данный момент.
Здесь, в LearnFactory, мы скоро откроем путь к базе данных. Это должно быть нашей следующей остановкой, я очень рад перейти к monogdb, mongoose и nodejs ...
Большое спасибо PEN GOD Eazi, чье литературное состояние более чем вдохновляет! С ним писать еще веселее. И семье, которая делает программирование увлекательным, держите фабрику освещенной от радости и заставляйте забыть вздохи ужасных ошибок @myTeamMates здесь, в LearnFactory Nigeria
Мастер пера Иази пишет…
Эндрю Чудо МАСТЕРУ КОДА за его уникальный и изысканный способ воплотить написание кода в жизнь и его врожденную способность эффективно передавать строки кода, не моргая глазом.
Учиться у него было потрясающе, теперь я могу справляться с самыми сложными задачами React с энтузиазмом и легкостью. В эти дни я иду домой в полном восторге, избавляясь от мучительных дней тревог.
Перед тем, как встретить этого удивительного фанатика, я, страстный любитель музыки и симфоний, с моим забавным наушником, наслаждаясь потоком музыки, восхищался талантом Эндрю и страстью к музыке, я бы подумал о том, чтобы купить большую красную гарнитуру, как у него. приложил к моим ушам, сидя за большим красным ноутбуком, как он стучал по моим клавишам, наслаждаясь потоком мелодий.
Это был прекрасный опыт! Сохраняйте спокойствие и продолжайте кодировать… искры фанатизма
Просто негоду (посмотрите), что мы делаем; мы выпускаем гиков и выдающихся программистов ...
Подготовиться к следующему раунду стажировки; скоро будут открываться приложения. Да, ты был прав, :)
Удачного дня
iC
Главный CodeSmith
