Как реагировать если: Как вежливо ответить человеку, если он лезет не в своё дело

Содержание

Как вежливо ответить человеку, если он лезет не в своё дело

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

Эту статью можно послушать. Если вам так удобнее, включайте подкаст.

Дипломатичные ответы

Иногда неуместные вопросы поступают от совершенно посторонних людей, с которыми, тем не менее, незачем портить отношения. И уж тем более не стоит удовлетворять их любопытство. Достаточно вежливо, но твёрдо дать им понять, что развивать обсуждение затронутой темы вы не намерены. Вот как вы можете ответить:

  • Мне бы не хотелось об этом говорить.
  • Извините, но это личное.
  • Неважно. Ой, да ну какая разница.
  • Долго рассказывать.
  • Сложный вопрос. Я не могу на него так с ходу ответить.
  • Да что мы всё обо мне! Давайте лучше поговорим о вас.
  • Извините, этого я вам сказать не могу. Надеюсь, вы понимаете.

Кстати, фраза «надеюсь, вы понимаете» творит чудеса. Она даёт вашему оппоненту осознать, что вы считаете его вежливым и тактичным человеком, который сам знает, почему вы не можете поддержать разговор на затронутую им тему.

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

Ответы для особо любопытных

То, что для одних бестактность, для других может быть здоровым любопытством, в котором нет ничего зазорного. Такие люди даже не догадываются, что их расспросы вас чем-то задели. Они ждут искреннего ответа и наверняка повторят свой вопрос, если вы попытаетесь замять разговор. Намёками вы тоже ничего не добьётесь.

Например, если вы отреагируете на неуместный вопрос встречным многозначительным «А почему вы спрашиваете?», будьте готовы к тому, что это не сработает и человек не поймёт, что спросил лишнее.

Может получиться и так, что вы получите на это ошеломительный в своей простоте ответ: «Мне просто интересно». После чего от вас будут дальше ждать ответа. В таком случае придётся прямо сказать, что вы не хотите обсуждать эту тему.

На этом диалог может и не завершиться, потому что ваш собеседник совершенно искренне спросит, почему вы не хотите об этом говорить. И если у вас есть время и терпение, то будет нелишне действительно объяснить, почему вы считаете предмет разговора неуместным. Отвечать придётся просто и прямо:

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

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

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

Ответы с юмором

Первая реакция на бестактный вопрос — шок и возмущение. Однако задавший его, возможно, сделал это не затем, чтобы задеть вас или спровоцировать ссору, а просто не подумав. Чаще всего этим грешат друзья и близкие, которые уверены, что мы всегда правильно их поймём и не обидимся. Чтобы избежать конфликта в таких ситуациях, попробуйте отшутиться:

  • Это что, допрос? Я требую адвоката!
  • Сколько я получаю? А разве за работу дают не только еду?
  • Это секрет. Ты умеешь хранить секреты? Я тоже умею.
  • Я, конечно, могу тебе сказать, но после этого мне придётся тебя убить.
  • Замуж когда? Сегодня уже, наверное, не успею. Может, завтра.

Так вы перебросите мячик на половину поля вашего собеседника. Пусть теперь он думает, как реагировать на вашу шутку.

Спрашивали? Отвечаем!

Сколько ты зарабатываешь?

  • На жизнь хватает.
  • Спасибо, не жалуюсь.
  • Хотелось бы, конечно, побольше, но кому бы не хотелось, правда?

Когда поженитесь / детишек заведёте?

  • Всему своё время.
  • Когда будем готовы взять на себя такую ответственность.
  • Как только, так сразу.

А почему тебя уволили?

  • Долгая история. Расскажи лучше, как у тебя дела.
  • Ой, там всё так сложно, не хочется грузить тебя подробностями.
  • Потому что всё когда-нибудь заканчивается и наступает пора двигаться дальше.

Встречаешься с кем-нибудь?

  • Каждый день! Вот сегодня с тобой, например, встретились.
  • На одиночество не жалуюсь.
  • Расскажу как-нибудь потом.

Помимо уклончивых ответов, шуток и вежливых отказов, есть ещё один вариант — не говорить ничего. Можно просто молча улыбнуться и позволить вопросу повиснуть в воздухе. Скорее всего, ваш оппонент почувствует неловкость и сам захочет сменить тему.

Читайте также 🗯

Вас критикуют? Как отвечать на »наезды»: 8 ситуаций. Навыки общения

Содержание:

Одна из вещей, с которыми сложнее всего справиться, сохраняя ассертивное поведение, — это критика. Она может ранить ваши чувства и задевать самоуважение. Иногда критика настолько расстраивает, что вы принимаете даже несправедливые замечания и переживаете по этому поводу. Учимся правильно реагировать на критические замечания начальника и коллег.

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

Как реагировать на справедливую критику

Принять критику. Самое простое — согласиться с замечаниями без демонстрации чувства вины, оправданий или извинений. Мы все совершаем ошибки, и лучшее, что можно сделать, это признать ошибку, исправить ее, сделать нужные выводы и двигаться дальше. Говорят, что не ошибается тот, кто ничего не делает.

Руководитель: «Вы не слишком хорошо справились с заданием».
Вы: «Да, согласен. Попробую переделать».

Попросить дополнительную информацию. Еще один вариант — принять негативный отзыв, но сразу же попросить дополнительную информацию у критикующего. Задавайте любые уточняющие вопросы — абсолютно любые — по поводу услышанного. На самом деле совершенно не важно, о чем вы спрашиваете, — с помощью этого приема вы «разбавляете» критику и демонстрируете, что уверены в себе и контролируете ситуацию.

Руководитель: «Вы не очень хорошо провели встречу».
Вы: «Да, получилось не слишком эффективно. На ваш взгляд, проблемы возникли в начале встречи или позже?»

Что делать, если критика несправедлива?

В силу различных причин незаслуженная критика ранит сильнее, чем справедливые замечания. Ознакомьтесь с тремя видами реакции на несправедливую кри-тику, не забывая, что жизнь бывает несправедлива ко всем. Тогда неприятная ситуация пройдет менее болезненно.

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

Коллега: «Вы вечно опаздываете на встречи».
Вы: «Ну что вы, я не вечно опаздываю… Возможно, такое случилось один или два раза, но определенно я опаздываю не всегда».

Попросить дополнительную информацию. Вы можете дружелюбно и с энтузиазмом задавать уточняющие вопросы, чтобы получить дополнительную информацию, пока ваш критик не пожалеет, что он вообще поднял эту тему!

Избегать прямого ответа. Постарайтесь уклониться от прямого ответа, завуалируйте ситуацию, пусть она станет неясной; ничего не отрицайте и не подтверждайте, не давайте вашему критику информацию, за которую он мог бы зацепиться. Так его замечания не попадут в цель. Со стороны все выглядит, словно критика принята, но не оказала на вас практически никакого эффекта. Такое поведение отбивает охоту незаслуженно критиковать вас в будущем.

Немного практики, и вы сможете овладеть этим искусством. Такие слова, как «возможно», «вероятно», «может быть», сделают неопределенной любую тему. Или попробуйте отвечать, используя следующие фразы: «Возможно, вы правы, всякое случается…», «Сложно сказать наверняка…», «В ваших словах есть доля истины…»

Как быть со скрытой критикой?

Иногда коллеги или руководители высказывают замечания и претензии открыто, и с этим бывает довольно сложно справиться. Но время от времени все мы сталкиваемся со скрытой критикой — манипуляциями и непрямой агрессией. Порой люди даже не отдают себе отчета в том, что произносят оскорбительные и неприятные вещи. Вы знаете, как это бывает. Вот несколько примеров:

— Не беспокойтесь, оставьте все как есть. Я сам об этом позабочусь.
— Вы уверены, что ваш способ лучший?

— Разве вы еще не закончили отчет?

Комментарии подобного рода обычно произносят дружелюбно, иногда даже с улыбкой, но при этом возникает смутное ощущение, что вас раскритиковали, хотя вы в этом не вполне уверены. Такой вот «улыбающийся убийца». Вы теряетесь в поисках ответа, а тем временем момент упущен. Или, возможно, вы, инстинктивно чувствуя, что на вас нападают, демонстрируете раздражение и гнев. Однако собеседник тут же принимает изумленный вид и говорит что-то вроде:

— Что? Что я сказал? — Я вовсе не имел этого в виду… вы слишком остро реагируете.
— Вы все придумали… так обидчивы… у вас проблема с восприятием.

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

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

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

На неясное утверждение вы можете ответить не менее неопределенной фразой. Так вы завуалированно признаете скрытую критику, как в примерах 2 и 3.

Уклонение от прямого ответа «разоружит» вашего оппонента и даже разочарует, поскольку он не поймет, достигла ли его критика цели.

Вот примеры разных видов реакции на три случая скрытой критики, описанных ранее.

Скрытая критика Ваша реакция
Оставьте все как есть. Я сам об этом позабочусь Хорошо. Обычно я так не поступаю, но время поджимало — моя встреча с новым крупным клиентом затянулась дольше запланированного
Вы уверены, что ваш способ лучший? Да, ваш способ, возможно, был бы эффективнее, но Джерри попросил меня сегодня все сделать именно так
Разве вы еще не закончили этот отчет? Да, возможно, у меня это займет чуть больше времени, чем обычно. Но я не уверен

Sam durak! 21 способ достойно (и не очень) ответить на оскорбление по-английски

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

В английском даже есть выражение «kill someone with kindness» (убить добротой). Это значит, что вместо того, чтобы вступать в конфликт, вы высказываете человеку сочувствие и даже поддержку. Если вам такое поведение по душе, можно отвечать следующими фразами:

  • It seems like you might be having a bad day; I’m here if you need me. 
    Кажется, у тебя выдался плохой день; если тебе нужна поддержка, я рядом.
  • I don’t take it personally because normally you don’t say things like that.
    Я не принимаю твои слова на свой счет, потому что обычно ты не говоришь такого.
  • Diversity of thought is important. Thank you for your opinion.
    Очень важно сохранять разнообразие мнений. Спасибо за ваш комментарий.

Эта линия поведения особенно подойдет для ответа на так называемые backhanded compliments — комплименты с язвительным комментарием, вроде «This sweater looks great on you. It hides your belly nicely» («Этот свитер хорошо на тебе смотрится. Он очень хорошо прикрывает твой живот»).

Знаете это чувство, когда поздно придумал остроумный ответ на какую-то грубость? И никто на этот раз не узнал, какая вы на самом деле веселая и самодостаточная личность… Чтобы такого не происходило, есть несколько универсальных ответов на английском:

  • How do you know? 
    Откуда вы узнали?
  • Really? That’s it? 
    Правда? И это всё?
  • You know best.  
    Тебе виднее.
  • Fair enough. 
    Звучит справедливо.
  • You hate me? Welcome to the club! 
    Ты ненавидишь меня? Добро пожаловать в клуб!
  • Ouch. But I wish I cared. 
    Больно. Жаль, что мне без разницы.

Остряку, которого вы видите первый и последний раз в жизни, можно ответить: «Do me a solid, tell me more about it» («Сделай одолжение, расскажи поподробнее»). To do smb a solid — сленговое выражение, которое покажет, что вы готовы, если придется, выражаться не только благопристойными фразами из учебника. Чтобы выучить самый нужный английский сленг за 14 дней, присоединяйтесь к нашему бесплатному интенсиву.

Запишитесь на бесплатный интенсив по английскому сленгу

Скоро на имейл вам придет письмо с инструкцией. А пока запишитесь на бесплатное онлайн-занятие с преподавателем и получите в подарок еще 2 урока.

Получить 2 урока

Скоро на имейл вам придет письмо с инструкцией. А в течение часа мы позвоним и подберем удобное время занятия. Продуктивного дня 🙂

Ой, произошла ошибка обработки. Попробуйте еще раз чуть позднее.

Ой, произошла ошибка обработки. Скорее всего, такой имейл или телефон уже зарегистрирован.

Если ситуация не позволяет ни ответить с иронией, ни задушить добротой, то, пожалуй, чем нейтральнее будет ответ, тем лучше. Но для профилактики можно немного пристыдить обидчика в английском стиле — сдержанно и элегантными идиомами:

  • Sorry, what did you say?  
    Извините, что вы только что сказали?
  • I’m not going to continue this conversation.  
    Я не буду продолжать этот разговор.
  • My mother always said, if you don’t have anything nice to say, best not to say anything at all. 
    Моя мама мне всегда говорила, что если нет ничего хорошего, чтобы сказать, лучше промолчать.
  • People who live in glass houses shouldn’t throw stones. 
    Как аукнется, так и откликнется (дословно «людям, которые живут в стеклянных домах, не следует кидаться камнями»).
  • It takes one to know one. 
    Разве что вы судите по себе.

А если вас ничего не сдерживает, то можно ответить, как говорится, по полной. Нет, здесь мы вас не будем учить нецензурной лексике, но кроме нее есть множество других вариантов, например, ловко упомянуть маму обидчика (just like your mother told you — как тебе и говорила твоя мама). Среди других возможных ответов:

  • Same to you!  
    И тебе того же!
  • Back at you! 
    Сам такой!
  • If only closed minds came with closed mouths.  
    Если бы только ограниченные умы могли ограничивать то, что они говорят.
  • If ignorance is bliss, you must be the happiest person on the planet. 
    Если глупость — второе счастье, то ты самый счастливый человек на земле.
  • Please cancel my subscription to your issues. 
    Пожалуйста, отмени мою подписку на твои загоны.
  • Remember when I asked for your opinion? Me neither.  
    Подскажи, когда я спрашивал(а) твоего мнения? Я тоже не помню такого.

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

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

Аргументированная критика — это хорошо, она помогает развиваться и работать над ошибками. Но как быть, если шеф постоянно придирается без причины? Рассмотрим проблему более детально.

Причины придирок по мелочам

  • Помните, что ваш директор — живой человек, он имеет право испытывать неприязнь по отношению к конкретным людям. Есть вероятность, что вы просто ассоциируетесь у начальника с неприятным периодом в его жизни. В этом случае поможет рациональный подход: сядьте с ним за стол переговоров и спросите, чем вы заслужили такое отношение. Объясните, что вы по-настоящему любите свою работу и не заинтересованы в том, чтобы покидать «насиженное место». Главное — ведите разговор спокойно и неторопливо, без повышения голоса. Возможно, после такой беседы начальник сменит гнев на милость.
  • Обратите внимание на свой склад характера и линию поведения. Если начальник придирается именно к вам, значит, вы позволяете ему делать это. Возможно, сложившийся имидж не играет вам на руку.

    ВНИМАНИЕ! Вы постоянно избегаете конфликтов, молчите, когда вам грубят? Краснеете, стоит начальнику слегка повысить голос? Тогда, пожалуйста, не удивляйтесь, что директор выбрал вас в роли козла отпущения.

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

  • Бывают также начальники самодуры и садисты, которым доставляет удовольствие, когда окружающие страдают и ничего не могут с этим поделать. Заполучив власть, такие люди нередко злоупотребляют ею. Вполне возможно, что босс наслаждается, изматывая вас бесконечными придирками по поводу и без. К сожалению, с этой чертой характера сложно бороться, но все же меры принять можно.

Что делать если начальник-мужчина цепляется к женщине?

Более сложный случай, когда директор-мужчина придирается к женщине. Рассмотрим его отдельно.

  • Несмотря на то, что феминизм уже давно шагает по планете, в нашей стране большинство руководящих должностей занимают мужчины. Порой придирки по любому поводу могут быть обусловлены именно этим фактором. Главная причина, по которой босс может придираться к женщине, — это ощущение слабости «противника» и собственной безнаказанности.

    В

Как ответить на оскорбление — Советы психолога

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

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

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

Сначала, для того, чтобы понять как грамотно ответить на оскорбление, нужно отбросить все эмоции. Особенно страх. Иначе обидчик может почувствовать, что вы боитесь и тогда он продолжит сильнее вас оскорблять.

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

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

Хорошо подумайте, почему люди пытаются обижать людей, которые не похожи на них? На самом деле ответ прост — люди боятся. Боятся выглядеть слабее окружающих, тем самым оскорбляя и унижая вас. Не давайте слабину и не позволяйте оскорблять вас.

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

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

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

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

Нужно запомнить, что разные вещи конструктивная критика и оскорбления. Так, как критика подразумевает под собой помощь в устранении недостатков человека, а при оскорбление человек унижает чужое достоинство, демонстрируя при этом свое. Следовательно в оскорблениях нет ни капли правды и поэтому не стоит их принимать близко к сердцу и копаться в себе, тем самым вызывая грусть и плохие эмоции у себя.

Иногда обидчики используют не нормативную лексику, очень грубые фразы, чтобы сильнее обидеть. Бывает, что используют тонкие оскорбления, проявляющиеся через откровенный сарказм, насмешки. Для того, чтобы правильно ответить на слова обидчика, нужно понять, какие оскорбления летят в вашу сторону. Например, не нужно прямыми нецензурными словами отвечать на оскорбления, можно просто загрузить человека словами используя знания нейролингвистического программирования.

Бывает слишком эмоциональные личности, которые не знакомы вам, но пристали в общественном месте. Такие могут неадекватно себя повести и наброситься с кулаками. Поэтому, если вы почуяли, что человек не дружит с языком, то просто игнорируйте его. Зачем вам опускаться до того же уровня. Да и драка к хорошему точно не приведет.

Лучше всего спокойно реагировать равнодушным голосом либо игнорировать его. Получится, что вам все равно, что он думает и говорит. В итоге он быстро отстанет. Есть ситуации, когда можно отвечать с той же манерой, как и к вам обращаются. Вы лидер, вы любите себя.

Например, на работе с ухмылкой вам говорят, что вы такой нелепый, что рубашку помятую одели. Вы можете ответить в таком же духе: «Спасибо за заботу, а у тебя всю неделю мешки под глазами. С чем бы это связано?». И мило улыбайтесь.

Интересная вещь, когда вам пытаются дать отрицательную оценку вашей внешности или ваших действий, попробуйте поблагодарить человека. Это его явно поставит в тупик и он не найдет, что еще сказать. В серьезных компаниях бывают еженедельные совещания. Обычно совещания выглядят таким образом, что начальник собирает своих подчиняющихся и начинает отчитывать, иногда кричать и т.д.

Для тех, кому не приятно и обидно слышать крик босса, есть интересная вещь, которую легко проделать.

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

Эта замечательная психологическая вещь поможет тем, кто нервно относится к негативу начальника. Ведь шефу нельзя ответить оскорблением или наорать на него, но никто вам не сможет помешать не слушать его.

Если после отпуска ваш «любимый» коллега пытается вас под кольнуть на тему, что вы хорошо поправились, то согласитесь с ним улыбнувшись. Он может продолжить разговор вопросом, что вы будете делать с лишним весом? Скажите ему, что решили побыть полным и вам нравится еда из МакДональдс, а спортсмены вас не вдохновляют.

Как реагировать на оскорбления:

  1. Самое главное, быть умнее того, кто пытается вас обидеть.
  2. Не опускаться до уровня обидчика, не орать на него, не пускать прямые оскорбления — это лишь усугубит ситуацию.
  3. Помните, что тот, кто вас обижает, уже в проигрышном положении. Таких людей нужно искренне пожалеть, скорее всего их уже обидела жизнь.
  4. Права у всех одни.
  5. Отвечайте теми же методами.
  6. Вы сильная личность.
  7. Отключайте эмоции.
  8. Любите себя.

Запомните, что нету точного способа как правильно реагировать на оскорбления. Ведь это зависит от ситуации и от того, кто вас обижает. Но благодаря этой статье, можно понять, каким образом реагировать на обидчиков.

Рекомендуем посмотреть видео:

Как реагировать на постоянные жалобы и правильно общаться с нытиками

Нытьё — это вирус, смертельная, инфекционная, распространяющаяся как эпидемия болезнь. Я не хочу его слышать. Я не хочу обременять себя этими безудержными проявлениями эмоциональной ограниченности Питер Хег

Есть категория людей, которые постоянно жалуются. Им неправильно светит солнышко и живется хуже всех. У нытиков страшно спрашивать, как дела, потому что они не просто рассказывают, как все плохо, а делают это с упоением и часами. Ваши утешительные речи в стиле «все пройдет» воспринимаются в штыки. Общаться с такими пессимистами очень тяжело, но зачастую приходится, ведь это наши родные и близкие люди – мамы, подруги, родственницы. Как реагировать на постоянные жалобы? Как общаться с нытиками? Придется научиться нескольким приемам.

Почему люди становятся нытиками – скрытые выгоды

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

Думаете, нытику невыносимо плохо? Как бы не так. У него свои выгоды:
  • Оправдание неудач, лени и бездействия. Проще всего списать проблемы на мужа или жену, трудности после развода, партию, правительство и экономическую ситуацию в стране. Правда только в одном: нытик избегает ответственности за свою жизнь.
  • Облегчение. Нытик понимает, что является причиной своих неудач, но не хочет об этом думать. А рассказывает о трудностях, чтобы переложить часть ответственности на ваши плечи. Да, поздравляем, теперь вы виноваты. Не вздумайте отпираться и пытаться предложить реальный выход их ситуации!
  • Манипуляции через самобичевание. Нытик несчастен. Всем повезло, кроме него. Вот у вас есть работа, зарплата, семья и брак. У него тоже есть, но не такие. Вывод: никто не хочет общаться с неудачником. Услышав подобное, вы по доброте душевной начнете утешать, одобрять и даже предлагать материальную помощь. Этого от вас и ждут.

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

Как реагировать на постоянные жалобы – полезные советы

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

1 Задавайте конкретные вопросы. Например, спросите, что именно нытик сам сделал для решения проблемы, и какие ваши действия помогут улучшить ситуацию. Обычно этого достаточно, чтобы пессимист замолчал, ища ответы. Правда, иногда такие вопросы вызывают приступы раздражения в стиле «а что тут можно сделать». 2  Устанавливайте границы. Четко говорите, что не хотите обсуждать определенные темы, так как они вам неприятны. Учтите, вы можете заслужить репутацию бесчувственного человека. 3 Используйте «я-высказывания». Это может звучать так: «Мне не хочется сейчас говорить об этом, давай сменим тему. Не возражаешь?» Подобная лояльная формулировка поможет достучаться до собеседника и сообщить, что вам неприятен разговор, но не сам говорящий. 4 Проявляйте терпение. Если жалуется престарелый человек или ребенок, выслушайте и помогите разрешить ситуацию. Если реальной проблемы нет, а есть только плохое настроение и недовольство жизнью, слушайте вполуха, кивайте, но не вникайте. Собеседник будет удовлетворен (его слушают!), а вы не будете себя чувствовать урной для негатива. 5 Старайтесь не оставаться наедине с пессимистами. Как реагировать на постоянные жалобы, если речь о приятеле или коллеге? Просто избегайте «разговоров по душам», стройте беседу, в которой будут участвовать несколько человек. Это несложно, если вы в компании. 6 Переносите разговор на следующую встречу. Предлагайте сменить тему и вернуться к проблеме через неделю, если сложная ситуация не разрешится.

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

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

 

 

Полное руководство по React для 2020

Learning React — сложная задача. Кажется, есть чему поучиться сразу. Вы могли бы даже думаю, что «изучение React» означает, что вам нужно , а также узнать о Redux, Webpack, React Router, CSS в JS и куча прочего.

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

Вот что мы расскажем:

  1. Что такое React и почему его стоит изучить
  2. Как получить что-то на странице с компонентами и JSX
  3. Передача данных в компоненты с помощью props
  4. Делаем вещи интерактивными с помощью состояний и хуков
  5. Вызов API с использованием useEffect
  6. Развертывание автономного приложения React

Быстрое предупреждение: это руководство completeeete .Под этим я подразумеваю длинных . Я превратил это в полноценный бесплатный 5-дневный курс и сделал красивый PDF-файл, который вы можете читать на своем iPad или [на любом устройстве Android, которое сейчас круто]. Оставьте свой адрес электронной почты в поле, чтобы получить и то, и другое. (он длится 5 дней, но вы можете перейти вперед, когда захотите).

Успех! Теперь проверьте свою электронную почту.

Я хочу прояснить, что означает и , когда я говорю об изучении React: просто Ваниль Реагировать .Само собой. Это то, что мы собираемся здесь обсудить.

«Подождите … это хоть что-то полезно?»

Совершенно верно. Вы можете немного собрать старый добрый React и инструменты, которые он дает вам: просто JSX, реквизиты, состояние и передача некоторых данных около.

Вот небольшой клон Slack, который я собрал с помощью чистого ванильного React (и некоторых поддельные данные, чтобы он не выглядел как бесплодная пустошь):

Отлично, а?

«Но разве мне не понадобится Redux и прочее для реальных приложений? Поддельные данные не собираюсь резать.

Я тебя слышу. И я не собираюсь лгать: ты, наверное, захочешь узнать все в конце концов, прочее. Но в конечном итоге это . Не волнуйся о создании своего шедевра прямо сейчас. Просто беспокойтесь о получении краски на холсте. Даже если это всего 2 цвета, вы будете создавать что-то — что намного интереснее, чем изучение «предварительных условий» прежде чем заняться чем-нибудь веселым.

Вспомните, как в детстве учились ездить на велосипеде. Вы ехали на велосипеде оживленное шоссе, ведущее в город в первый день? Кто-нибудь протянул вам кегли для боулинга и скажите: «Вот, научись одновременно жонглировать.Это что делают профи в цирке! »

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

Маленькие победы продвигают вперед

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

Мы собираемся подарить вам крошечных побед с несколькими небольшими проектами и познакомим вас с основами React.

И когда я говорю, что у вас будет , в конце концов, доберется до Redux и прочего: Я не говорю о месяцах в будущем (иначе никогда).Всякий раз, когда вам понимаете React достаточно, чтобы думать: «Хорошо, я думаю, я понял», вы готов к большему. Если у вас уже есть опыт программирования, это, вероятно, вопрос дней или недель. Если вы начинаете все сначала, это может занять немного больше времени.

Что такое React?

React — это библиотека пользовательского интерфейса, созданная Facebook. Он помогает создавать интерактивные веб-приложения, состоящие из компонентов . Если вы знакомы с HTML, вы можете думать о компонентах как о причудливых настраиваемых тегах.Это в значительной степени то, что они собой представляют: многократно используемые фрагменты контента и поведения, которые можно разместить на веб-странице.

Компонент написан как простая функция JavaScript. И это настоящий JavaScript, а не язык шаблонов. React поддерживает специальный синтаксис JSX, который очень похож на HTML, но преобразован компилятором в настоящий код JavaScript.

Веб-страница состоит из компонентов, представленных в виде вложенной «древовидной» структуры. Так же, как элементы HTML могут содержать другие элементы, компоненты React могут содержать другие компоненты (и собственные элементы, такие как div s и button s).Но помните, что эти компоненты являются функциями, и им можно передавать данные для отображения.

Одной из определяющих особенностей React является идея одностороннего потока данных , и это была большая часть того, что отличало React, когда он впервые появился в 2013 году. В наши дни множество других библиотек (например, Vue, Svelte и Angular) также приняли шаблон одностороннего потока данных.

В модели одностороннего потока данных данные передаются только вниз дерева от компонента к его дочерним элементам. Как водопад: только вниз, а не вверх и не вбок. В отличие от некоторых других подходов (например, jQuery), где данные могут быть доступны глобально и вы можете «подключить их» в любом месте страницы, React более явный и более строгий. С помощью React вы передаете эти данные в компонент верхнего уровня, а тот передает их вниз и так далее.

React — отличный способ создания интерактивных интерфейсов пользователя, и он очень популярен прямо сейчас (и пользуется им уже несколько лет). Если вы хотите сделать карьеру фронтенд-разработчика, React — отличная библиотека для изучения.Разработчики React пользуются большим спросом.

Но это не единственный способ создания пользовательского интерфейса! Существует множество других библиотек. Vue.js и Angular — самые популярные альтернативы, и Svelte набирает обороты. И даже сейчас, в 2020 году, вы все еще можете создавать статические страницы с использованием простого HTML и CSS и динамические страницы с помощью простого JavaScript.

Что нужно знать, прежде чем изучать React?

Изучение «предварительных условий» — это скучно, но React основывается на идеях HTML и JavaScript. Хотя я не думаю, что важно бегать и осваивать HTML и JS в течение нескольких месяцев, прежде чем приступить к React, было бы большим подспорьем сначала иметь с ними некоторый опыт.

React — это библиотека поверх JS, и в отличие от многих других библиотек, которые представляют собой просто набор функций, React имеет собственный синтаксис «JSX», который смешивается. Без твердого понимания синтаксиса JS это может быть сложно чтобы определить, какие части кода относятся к «реакциям», а какие — к JavaScript. В конечном итоге это превращается в беспорядок в вашей голове, и становится все труднее понять, что Google. Реагировать будет намного проще, если вы сначала изучите простой JavaScript.

И, поскольку JSX в значительной степени вдохновлен HTML (со строгостью XML «вы должны закрыть все теги»), это будет большим подспорьем в понимании HTML.

React не имеет «предпочтительного» способа стилизации. Обычный CSS отлично работает (вы увидите, как его использовать позже в этом посте!), И есть множество библиотек CSS-in-JS, если вы хотите пойти по этому пути (стилизованные компоненты, вероятно, наиболее популярны). В любом случае вам нужно понимать, как CSS работает для эффективного стилизации страниц.

Очень много вопросов «как делать X в React» на самом деле являются вопросами JavaScript, HTML или CSS, но вы не можете знать, где находятся эти строки, не понимая и других технологий.

Это руководство познакомит вас с основами React, и я думаю, вы сможете извлечь из этого что-то, даже если не слишком знакомы с JS, HTML и CSS.

Привет, мир!

Давайте выведем на экран «Hello World» и поговорим о том, что делает код.

  1. Запустите пустой проект на CodeSandbox: перейдите сюда
  2. Задержите дыхание и удалите все содержимое файла index.js .
  3. Введите этот код:
  импортировать React из response;
импортировать ReactDOM из react-dom;

function Hi () {
  return 
Hello World!
; } ReactDOM. render (, document.querySelector ('# root'));

Теперь, прежде чем мы продолжим.

Вы скопировали и вставили приведенный выше код? Или ты его набрал?

Потому что на самом деле важно ввести в . Печатая его, вы усваиваете концепции и синтаксис в вашем мозгу. Если вы просто копируете и вставляете (или читаете и киваете вместе, или смотрите видео и киваете вместе), знания не сохранятся, и вы застрянете, глядя на пустой экран, например, «как эта импортирует вещь снова работает? ?? как мне запустить компонент React ?? »

Набор примеров и выполнение упражнений — это «странный трюк» в изучении React.Тренирует пальцы. Эти пальцы однажды поймут React. Помогите им;)

Хорошо, давайте поговорим о том, как работает этот код.

Импорт

Вверху есть 2 оператора импорта. Они втягивают библиотеки «react» и «react-dom».

  импортировать React из react;
импортировать ReactDOM из react-dom;  

С современным JavaScript ES6 (который представляет собой большую часть кода React, который вы увидите) библиотеки не доступны глобально; их нужно импортировать.

Это изменение, если вы привыкли к сценариям тегов и времен jQuery, и сначала это может показаться проблемой. Но явный импорт имеет действительно приятный побочный эффект: читая код, вы всегда можете определить, откуда берется переменная / класс / объект.

Например: См. ReactDOM.render внизу примера? Вместо того, чтобы читать это и спрашивать: «Что, черт возьми, такое ReactDOM, откуда это взялось?» вы можете посмотреть вверху и увидеть, что он импортирован из библиотеки «react-dom».Отлично.

Совершенно очевидно, откуда что-то взялось, когда файл крошечный, но явный импорт отлично подходит, когда вы работаете с большими файлами или файлами, которые вы не создавали.

Компонент Hi

Прямо под импортом находится функция под названием Hi . Это действительно простая функция JS. Фактически, все в этом файле, включая слово «return», является простым синтаксисом JS и не имеет ничего специфического для React.

  function Hi () {
  return 
Hello World!
; }

Что делает эту функцию компонентом , так это то, что она возвращает то, что может отобразить React.

Hello World!
— это синтаксис JSX , который выглядит и работает очень похоже на HTML. React вызывает функцию, получает JSX и отображает эквивалентный HTML-код в DOM.

Обратите внимание, что JSX — это , а не — строка. Это не return "

Hello World
"; . React также не превращает эти вещи напрямую в строки.

Перед запуском React код проходит дополнительный этап, который преобразует JSX в вызовы функций.

Hello World!
становится React.createElement ('div', null, 'Hello World!') .

Все это происходит за кадром. Babel — это инструмент, который выполняет преобразование, а в стандартной конфигурации приложения Create React, Webpack — это то, что запускает Babel).

Тот факт, что это не строка, может показаться незначительной деталью, но на самом деле это довольно круто: вы можете вставлять фрагменты кода JS в теги JSX, и React будет запускать их динамически. Мы увидим это через минуту.

Но как React узнает , где в DOM, чтобы разместить этот div на странице?

Рендеринг

Последняя строчка заставляет все это работать. Он инструктирует React вызвать функцию Hi , получает возвращенный JSX и вставляет соответствующие элементы HTML в документ под элементом с идентификатором «root». document.querySelector ("# root") работает аналогично jQuery $ ("root") , находя и возвращая этот элемент из документа.

  ReactDOM.render (, document.querySelector ('# root'));  

Babel скомпилирует это в код, который выглядит так:

  ReactDOM.render (
  React.createElement (Привет),
  document.querySelector ('# корень')
);  

Я хотел показать вам это по двум важным причинам:

  1. Этот код представляет собой чистый JavaScript. В конце концов, причудливый синтаксис JSX превращается в обычный JS. Возможно, вы раньше видели, как люди называют React «просто JavaScript»: именно это они имеют в виду.Вне синтаксиса JSX в приложениях React не так много кода, специфичного для React. Это замечательно, потому что означает, что не волшебство . Изучение React — это скорее изучение новых способов решения проблем, чем синтаксис.
  2. Вы не называете свои собственные компоненты; React выполняет . Обратите внимание, как мы передаем саму функцию Hi (также называемую ссылкой на эту функцию) в React.createElement . Мы не звоним по номеру по номеру Привет () , мы просто передаем его.Это тонкая вещь, но ее важно помнить: React отвечает за вызов функции вашего компонента. Он будет делать это во время рендеринга — другими словами, где-то в глубине функции ReactDOM.render , а не внутри React.createElement .

Идея о том, что React отвечает за вызов ваших компонентов, означает, что он может запускать некоторый код установки / удаления до и после. Вы поймете, почему это важно, когда мы немного поговорим о хуках.

Ваша очередь!

Теперь, когда у вас есть проект, можете поиграть 🙂

Убедитесь, что вы на самом деле попробовали этих упражнений. Даже если они кажутся действительно простыми. Даже если вы на 99% уверены, что знаете, как это сделать, докажите это себе, напечатав и увидев рабочий результат.

  • Измените текст «Hello World!» сказать «Привет, <ваше имя>!»
  • Выделите свое имя жирным шрифтом, заключив его в тег . Он работает так же, как HTML.
  • Внутри
    под своим именем добавьте некоторые другие элементы HTML. Заголовки, упорядоченные и неупорядоченные списки и т. Д. Узнайте, как это работает. Как он обрабатывает пробелы? Что произойдет, если вы забудете закрыть тег?
  • Я уже упоминал, что вы можете поместить настоящий JS-код внутрь JSX. Попробуйте это: внутри div вставьте JS-выражение в одинарные фигурные скобки, например {5 + 10} .
  • Хотите стилизовать его с помощью CSS? Вместо использования свойства «class», как в HTML, используйте «className».Затем создайте файл src / index.css со стилями и добавьте строку import './index.css' в начало index.js. Да, вы можете импортировать CSS в JS. Сорта. Это Webpack, творит чудеса за кулисами.

На этом этапе, если вы уже знаете немного HTML и немного CSS, вы знаете достаточно о React, чтобы воспроизвести практически любой статический веб-сайт! 🎉

Втисните весь HTML в один компонент, импортируйте файл CSS, измените его стиль и, эй, вы делаете веб-страницы, как в 1995 году.Не так уж плохо для вашего первого дня!

Поиграйте с ним и посмотрите, что у вас получится. Оставьте комментарий со ссылкой на ваш проект, если сделаете что-нибудь крутое 🙂

Обучение такими небольшими кусками, как этот, на более эффективно для закрепления знаний (по сравнению с изучением всего и попытками запомнить все)

Прочтите немного, а затем напишите код для практики. Сделайте это несколько раз, и вы сможете безболезненно освоить React.

Далее мы поговорим о том, как отображать динамические данные с помощью компонентов React.

Динамические и многоразовые компоненты

Давайте сделаем следующий шаг и узнаем, как сделать компоненты React динамичными и многоразовыми.

Прежде чем мы поговорим о том, как это сделать в React, давайте посмотрим, как это сделать с помощью простого JavaScript . Это может показаться немного простым, но потерпите меня. Допустим, у вас есть эта функция:

  function greet () {
  вернуть «Привет, Дэйв»;
}  

Вы можете ясно видеть, что он всегда возвращает «Привет, Дэйв» .

А если бы вы еще кого поприветствовали? Вы должны передать их имя в качестве аргумента :

.
  function greet (name) {
  вернуть «Привет» + имя;
}  

Теперь вы можете поприветствовать любого, кого хотите, просто позвонив по номеру greet и указав его имя! Потрясающие. (Я предупреждал, что эта часть была базовой)

Использование реквизита в качестве аргумента компонента React

Если вы хотите настроить компонент React таким же образом, принцип тот же: передайте аргумент с вашим динамическим материалом, а затем компонент может делать с этим все что угодно.

Давайте заменим компонент Hi более ранним, чтобы иметь возможность здороваться с кем угодно. Если у вас все еще открыта вкладка CodeSandbox, отлично — если нет, начните с этой и пишите код. Вот исходный компонент:

  function Hi () {
  return 
Hello World!
; }

Добавьте параметр props и замените World на {props.name} :

  function Hi (props) {
  return 
Привет, {реквизит.имя}!
; }

Что здесь происходит? Ну, сначала он просто отображает «Привет», потому что мы еще не передаем имя. Но помимо этого…

Когда React визуализирует компонент, он передает props компонента (сокращение от «properties») в качестве первого аргумента, как объекта. Объект props — это простой объект JS, где ключи — это имена свойств, а значения — это значения этих свойств.

Тогда вы можете спросить, откуда берутся реквизиты? Как их передать? Хороший вопрос.

Передача опоры компоненту

Вы, разработчик, можете передать свойства компоненту при его рендеринге. И в этом приложении мы визуализируем компонент Hi в последней строке:

  ReactDOM.render (, document.querySelector ('# root'));  

Нам нужно передать свойство с именем «name» с именем человека, которого мы хотим поприветствовать, например:

  ReactDOM.render (, document.querySelector ('# root'));  

После внесения этого изменения в приложении теперь отображается «Hello Dave!» Потрясающие!

Передача реквизита очень похожа на установку атрибутов в теге HTML.Большая часть синтаксиса JSX заимствована из HTML.

В реквизитах есть классная особенность: в них можно передавать все, что угодно. Вы не ограничены строками или не пытаетесь угадать, что он сделает с вашей строкой ( cough Angular1). Помните, как раньше, 30 секунд назад, мы помещали JS-выражение в одинарные фигурные скобки? Что ж, вы можете сделать то же самое со значением свойства:

.
    

Вы можете передавать логические значения, числа, строки (как мы видели), функции и даже объекты.Синтаксис объекта выглядит немного странно («что ?? почему здесь двойные фигурные скобки ??»), но подумайте о нем как о одинарных фигурных скобках, окружающих {object: "literal"} , и все будет в порядке.

Не все — строка

Важно отметить: не передавайте каждое свойство в виде строки, заключенной в кавычки. Иногда это то, чего вы хотите, но не всегда. Обдумайте, к какому типу вы переходите, потому что это будет тот же тип!

Например, один из них передает строку «false», а другой передает логическое значение false :

   

Они будут иметь очень разные эффекты, поскольку строка «false» будет интерпретирована как правдивая — вероятно, не то, что вы хотите здесь.

Это отличие от HTML (где все является строкой) и некоторых других фреймворков, таких как Angular и Svelte, которые преобразуют строку в собственное значение JS. React вообще не анализирует свойства — они проходят через них нетронутыми, как и аргументы функций.

Приемная стойка

Внутри компонента, который получает несколько свойств, каждое из них будет отдельным свойством переданного объекта «props». Например, если у нас есть компонент с именем «HiFullName», который принимает два свойства, например:

    

Тогда внутреннее устройство этого компонента может выглядеть примерно так:

  function HiFullName (props) {
  возвращение (
    
Привет, {реквизит.firstName} {props.lastName}!
); }

Между прочим, весь этот синтаксис — это React (в частности, JSX). Это не JavaScript для ES6. Это напоминает мне, что я хотел показать вам пару битов синтаксиса ES6, который упростит запись и чтение ваших компонентов.

Несколько битов ES6

Большинство компонентов, которые вы видите в дикой природе, не принимают аргумент, называемый «реквизит». Вместо этого они используют деструктурирующий синтаксис ES6 для извлечения значений из объекта props, который выглядит следующим образом:

  function Hi ({name}) {
  return 
Здравствуйте, {name}!
; }

Единственное, что здесь изменилось, так это то, что аргумент props стал похож на объект {name} .Это деструктурирующий синтаксис JavaScript (добавлен в ES6), а не React.

Здесь говорится: «Я ожидаю, что первым аргументом будет объект. Пожалуйста, извлеките из него свойство «name» и передайте его мне как переменную с именем «name» ».

Это избавляет вас от необходимости писать props.with повсюду, и дает ясно понять, наверху, что props ожидает этот компонент. Полезно для документации.

Еще один фрагмент синтаксиса ES6, который я хочу вам показать, и на этом мы закончили.(Чтобы не перегружать вас синтаксисом или чем-то еще, но вы, вероятно, увидите такой пример кода, и я хочу, чтобы вы были к нему готовы.) Это const и стрелочная функция :

  const Hi = ({name}) => {
  return 
Здравствуйте, {name}!
; }

const объявляет константу, а стрелочная функция — это все, что находится после первого знака равенства.

Сравните этот код с версией «функции» выше.Вы видите, что произошло? Вот трансформация, одно изменение за раз:

  // Обычная функция:
function Hi ({name}) {
  return 
Здравствуйте, {name}!
; } // Константа, содержащая анонимную функцию: const Hi = function ({name}) { return
Здравствуйте, {name}!
; } // Превращаем "функцию" в стрелку: const Hi = ({имя}) => { return
Здравствуйте, {name}!
; } // Необязательный шаг 3: снятие скобок, в результате чего // "return" неявно, поэтому мы можем удалить и это.Оставив родителей // для удобства чтения: const Hi = ({имя}) => (
Здравствуйте, {name}!
) // Необязательный шаг 4: Если компонент очень короткий, вы можете поместить // все это в одной строке, без скобок: const Hi = ({name}) =>
Здравствуйте, {name}!
;
Твоя очередь

Теперь вы знаете, как передать свойства в компонент, чтобы сделать его динамичным и многоразовым! Выполните эти упражнения, чтобы опробовать несколько новых вещей с реквизитом. (Помните: действительно важно выполнять упражнения!)

  • Напишите новый компонент MediaCard , который принимает 3 свойства: title, body и imageUrl.Внутри компонента визуализируйте заголовок в теге

    , тело в теге

    и передайте imageUrl в тег img, например . Можете ли вы вернуть сразу все три вещи? Или их нужно обернуть в другой элемент?

  • Визуализируйте MediaCard с помощью вызова ReactDOM.render и передайте необходимые реквизиты. Можете ли вы передать элемент JSX в качестве значения свойства? (совет: заключите его в одинарные фигурные скобки). Попробуйте выделить некоторые части основного текста жирным шрифтом, не изменяя реализацию MediaCard.
  • Создайте компонент с именем Gate, который принимает 1 свойство с именем isOpen. Когда isOpen имеет значение true, сделать визуализацию компонента «открытой», а когда isOpen имеет значение false, сделать визуализацию «закрытой». Подсказка: вы можете выполнять условную логику внутри JSX с помощью тернарного оператора (вопросительный знак,?) Внутри одинарных фигурных скобок, например: {speed> 80? "Опасность!" : "вероятно хорошо"} (оценивается как «опасность!», если скорость больше 80, и «вероятно хорошо» в противном случае).

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

Очень легко продолжать читать, чувствуя, что все кристально чистое…

А потом, когда вы идете писать код самостоятельно… * POOF *, знания пропадают.

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

Далее мы рассмотрим, как сделать ваше приложение интерактивным с состоянием .

Использование состояния в компонентах React

Нам больше не нужно просто сказать «привет», мы отправляемся в захватывающие новые неизведанные воды: включает и выключает свет ! 🎉 Я знаю, это очень интересно.Я все равно взволнован.

На данный момент у нас…

  • написано крошечное дружественное приложение React
  • настроил это приложение так, чтобы он мог приветствовать буквально любого во всем мире
  • , надеюсь, выполнил некоторые из упражнений, которым я подчинялся (шучу!) (Но серьезно. Выполняйте упражнения.)
  • узнал, что React не так уж и страшен, но пока что он довольно статичен.

В этом следующем разделе мы откажемся от статических страниц и научимся использовать , состояние .

Наш проект будет страницей, на которой пользователь сможет включать и выключать свет, нажимая кнопку. И под «огнями» я имею в виду цвет фона (но, эй, если вы подключите это к Интернету вещей в своем доме, я точно хочу услышать об этом!).

Создать новый проект

Мы начнем с совершенно нового проекта. Зайдите сюда: https://codesandbox.io/s/new, сотрите содержимое index.js и введите:

  импортировать React из react;
импортировать ReactDOM из react-dom;

Банкетный зал() {
  возвращение (
    
комната освещена
); } ReactDOM.render (<Комната />, document.getElementById ('root'));

Это то, чего вы раньше не видели. Просто компонент Room , отображающий некоторый JSX. Но он ужасно яркий. Давай выключим свет.

Сделать компонент с отслеживанием состояния

Не знаю, знаете ли вы, что такое выключатели света, но они могут находиться в одном из двух состояний: ВКЛ или ВЫКЛ. Удобно, что React имеет функцию под названием state , которая позволяет компонентам отслеживать значения, которые могут измениться — идеальное место для хранения состояния нашего источника света.

Чтобы добавить состояние к нашему компоненту Room , мы можем либо превратить его в компонент класса , либо добавить состояние непосредственно к функции с помощью хуков . Мы вызовем хук useState React , чтобы создать часть состояния для хранения значения светового переключателя:

  function Room () {
  const [isLit, setLit] = React.useState (истина);

  возвращение (
    
комната освещена
); }

Мы добавили вызов в React.useState вверху, передавая в начальном состоянии true . Он возвращает массив с двумя записями: первая - это само значение состояния (так что isLit будет истинным), а вторая - функция для изменения состояния.

Мы используем деструктуризацию массива , синтаксис [isLit, setLit] , чтобы разделить эти две записи и дать им имена. Кстати, этот синтаксис - это JavaScript для ES6, а не для React. Точно так же, как если бы мы записали это так:

  const state = React.useState (правда);
const isLit = состояние [0];
const setLit = состояние [1];  

Синтаксис деструктуризации стал короче.

Вы также можете импортировать useState

Быстро в сторону! Вы часто увидите useState, импортированную прямо из React, например:

  импортировать React, {useState} из «реагировать»;  

После этого вы можете напрямую позвонить по номеру useState (нет необходимости квалифицировать его с помощью React.useState ):

  константа [isLit, setLit] = useState (true);  

Любой способ подходит, но чаще его импортируют.Я сделал это другим способом, чтобы показать, что это работает в обоих направлениях, и чтобы не прерывать пример, заставляя вас изменить существующий import , а теперь я пошел и добавил целый раздел, в котором вас прерывают. Тем не мение. Вперед!

Как работает useState

То, как мы используем React.useState , может выглядеть немного странно.

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

Итак ... как React может запоминать состояние между вызовами компонента?

Перед тем, как React вызовет ваш компонент, он устанавливает массив для отслеживания того, какие хуки вызываются. Когда вы вызываете useState в

React Tutorial: Обзор и пошаговое руководство

Я слышал о React с тех пор, как впервые начал изучать JavaScript, но признаюсь, что взглянул на него один раз, и это меня напугало. Я увидел то, что выглядело как связка HTML, смешанного с JavaScript, и подумал: , разве это не то, чего мы пытались избежать? Что такого особенного в React?

Вместо этого я сосредоточился только на изучении ванильного JavaScript и работе с jQuery в профессиональной среде.После нескольких неудачных попыток начать работу с React я, наконец, начал это понимать и начал понимать, почему я могу использовать React вместо ванильного JS или jQuery.

Я попытался объединить все, что узнал, в красивое введение, которым хочу поделиться с вами, так что вот оно.

Предварительные требования

Есть несколько вещей, которые вы должны знать заранее, прежде чем начинать экспериментировать с React. Например, если вы никогда раньше не использовали JavaScript или DOM, я бы лучше познакомился с ними, прежде чем пытаться заняться React.

Вот то, что я считаю предпосылками для React.

Голы
  • Узнайте об основных концепциях React и связанных с ними терминах, таких как Babel, Webpack, JSX, компоненты, свойства, состояние и жизненный цикл.
  • Создайте очень простое приложение React, демонстрирующее вышеуказанные концепции.

Вот исходный код и живая демонстрация конечного результата.

Что такое React?

  • React - это библиотека JavaScript, одна из самых популярных, с более чем 100 000 звезд на GitHub.
  • React - это не фреймворк (в отличие от Angular, который более самоуверен).
  • React - проект с открытым исходным кодом, созданный Facebook.
  • React используется для создания пользовательских интерфейсов (UI) во внешнем интерфейсе.
  • React - это вид уровня приложения MVC (Model View Controller)

Одним из наиболее важных аспектов React является то, что вы можете создавать компонентов , которые похожи на настраиваемые многоразовые HTML-элементы, для быстрого и эффективного создания пользовательских интерфейсов.React также упрощает хранение и обработку данных, используя состояние и свойства .

Мы рассмотрим все это и многое другое в статье, так что приступим.

Настройка и установка

Есть несколько способов настроить React, и я покажу вам два, чтобы вы получили хорошее представление о том, как это работает.

Статический файл HTML

Этот первый метод не является популярным способом настройки React, и мы не будем использовать его в остальной части нашего руководства, но он будет знаком и легко понять, если вы когда-либо использовали библиотеку, такую ​​как jQuery, и это наименее страшный способ начать работу, если вы не знакомы с Webpack, Babel и Node.js.

Начнем с создания базового файла index.html . Мы собираемся загрузить три CDN в голову - React, React DOM и Babel. Мы также собираемся создать div с идентификатором root , и, наконец, мы создадим тег script , в котором будет жить ваш пользовательский код.

index.html

  

  
    

     Привет, React! 

    
    
    
  

  
    

Я загружаю последние стабильные версии библиотек на момент написания этой статьи.

  • React - API верхнего уровня React
  • React DOM - добавляет методы, специфичные для DOM
  • Babel - компилятор JavaScript, который позволяет нам использовать ES6 + в старых браузерах

Точкой входа для нашего приложения будет корневой элемент div , названный по соглашению. Вы также заметите тип сценария text / babel , который является обязательным для использования Babel.

Теперь давайте напишем наш первый блок кода React. Мы собираемся использовать классы ES6 для создания компонента React под названием App .

index.html

  class App расширяет React.Component {
  
}  

Теперь мы добавим метод render () , единственный необходимый метод в компоненте класса, который используется для визуализации узлов DOM.

index.html

  class App расширяет React.Component {
  render () {
      возвращение (
          
      );
  }
}  

Внутри возвращаемого значения мы собираемся поместить то, что выглядит как простой элемент HTML. Обратите внимание, что здесь мы не возвращаем строку, поэтому не используйте кавычки вокруг элемента.Он называется JSX , и мы скоро узнаем о нем больше.

index.html

  class App расширяет React.Component {
  render () {
    return 

Привет, мир!

} }

Наконец, мы собираемся использовать метод React DOM render () для рендеринга созданного нами класса App в корневом div в нашем HTML.

index.html

  ReactDOM.render (<Приложение />, document.getElementById ('корень'))  

Вот полный код нашего индекса .html .

index.html

  

  
    

     Привет, React! 

    
    
    
  

  
    
} } ReactDOM.render (<Приложение />, document.getElementById ('корень'))

Теперь, если вы просмотрите свой index.html в браузере, вы увидите созданный нами тег h2 , отображаемый в DOM.

Круто! Теперь, когда вы это сделали, вы можете видеть, что React не так уж и страшен для начала.Это всего лишь несколько вспомогательных библиотек JavaScript, которые мы можем загрузить в наш HTML.

Мы сделали это в демонстрационных целях, но с этого момента мы собираемся использовать другой метод: Create React App.

Создать приложение React

Метод, который я только что использовал для загрузки библиотек JavaScript в статическую HTML-страницу и рендеринга React и Babel на лету, не очень эффективен, и его сложно поддерживать.

К счастью, Facebook создал приложение Create React App, среду, в которой предварительно настроено все необходимое для создания приложения React.Он создаст сервер разработки в реальном времени, использует Webpack для автоматической компиляции React, JSX и ES6, автоматически префикс файлов CSS и использует ESLint для тестирования и предупреждения об ошибках в коде.

Чтобы настроить create-response-app , запустите следующий код в своем терминале, на один каталог выше, чем вы хотите, чтобы проект жил.

  npx create-react-app react-tutorial  

После завершения установки перейдите во вновь созданный каталог и запустите проект.

  cd react-tutorial && npm start  

После того, как вы запустите эту команду, появится новое окно по адресу localhost: 3000 с вашим новым приложением React.

Приложение

Create React очень хорошо подходит для начинающих, а также для крупномасштабных корпоративных приложений, но оно не идеально подходит для каждого рабочего процесса. Вы также можете создать свою собственную настройку Webpack для React.

Если вы посмотрите в структуру проекта, вы увидите каталог / public и / src , а также обычные node_modules , .gitignore , README.md и package.json .

В / общедоступном наш важный файл — index.html , который очень похож на статический файл index.html , который мы создали ранее — только корневой div . На этот раз библиотеки или скрипты не загружаются. Каталог / src будет содержать весь наш код React.

Чтобы увидеть, как среда автоматически компилирует и обновляет ваш код React, найдите строку, которая выглядит так в / src / App.js :

  Для начала отредактируйте src / App.js и сохраните его для перезагрузки.  

И заменить его любым другим текстом. После сохранения файла вы заметите, что localhost: 3000 компилируется и обновляется с новыми данными.

Удалите все файлы из каталога / src , и мы создадим наш собственный шаблонный файл без лишних слов. Мы просто сохраним index.css и index.js .

Для индекса .css , я просто скопировал и вставил содержимое примитивного CSS в файл. Если хотите, можете использовать Bootstrap или любую другую CSS-структуру, которую хотите, или вообще ничего. Просто мне легче работать.

Теперь в index.js мы импортируем React, ReactDOM и файл CSS.

SRC / index.js

  импортировать React из react
импортировать ReactDOM из React-dom
import './index.css'  

Давайте снова создадим наш компонент App .Раньше у нас был только

, но теперь я также добавляю элемент div с классом. Вы заметите, что мы используем className вместо class . Это наш первый намек на то, что здесь пишется код JavaScript, а не HTML.

SRC / index.js

  class App расширяет React.Component {
  render () {
    возвращение (
      

Привет, React!

) } }

Наконец, мы отрендерим приложение в корень, как и раньше.

SRC / index.js

  ReactDOM.render (<Приложение />, document.getElementById ('корень'))  

Вот наш полный index.js . На этот раз мы загружаем Component как свойство React, поэтому нам больше не нужно расширять React.Component .

SRC / index.js

  import React, {Component} from 'react'
импортировать ReactDOM из React-dom
import './index.css'

class App extends Component {
  render () {
    возвращение (
      

Привет, React!

) } } ReactDOM.render (<Приложение />, document.getElementById ('корень'))

Если вы вернетесь к localhost: 3000 , вы увидите «Hello, React!» как раньше. Теперь у нас есть начало приложения React.

Инструменты разработчика React

Существует расширение React Developer Tools, которое значительно упростит вам жизнь при работе с React. Загрузите React DevTools для Chrome или любой другой браузер, в котором вы предпочитаете работать.

После установки при открытии DevTools вы увидите вкладку для React.Щелкните по нему, и вы сможете просматривать компоненты по мере их написания. Вы все еще можете перейти на вкладку «Элементы», чтобы увидеть фактический вывод DOM. Сейчас это может показаться не таким уж важным, но по мере того, как приложение становится более сложным, его необходимость в использовании возрастает.

Теперь у нас есть все инструменты и настройки, необходимые для начала работы с React.

JSX: JavaScript + XML

Как вы видели, мы использовали то, что выглядит как HTML в нашем коде React, но это не совсем HTML.Это JSX , что означает JavaScript XML.

С помощью JSX мы можем писать то, что выглядит как HTML, а также можем создавать и использовать наши собственные XML-подобные теги. Вот как выглядит JSX, присвоенный переменной.

JSX

  const heading = 

Привет, React

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

Нет JSX

  const heading = React.createElement ('h2', {className: 'site-heading'}, 'Hello, React!')  

JSX на самом деле ближе к JavaScript, а не к HTML, поэтому при его написании следует учитывать несколько ключевых отличий.

  • className используется вместо class для добавления классов CSS, поскольку class является зарезервированным ключевым словом в JavaScript.
  • Свойства и методы в JSX - это camelCase - onclick станет onClick .
  • Самозакрывающиеся теги должны заканчиваться косой чертой, например

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

  const name = 'Таня'
const heading = 

Привет, {name}

JSX легче писать и понимать, чем создавать и добавлять множество элементов в обычном JavaScript, и это одна из причин, по которой люди так любят React.

Компоненты

На данный момент мы создали один компонент - компонент App . Почти все в React состоит из компонентов, которые могут быть компонентами класса или простыми компонентами .

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

Удалите класс приложения из индекса .js , вот так.

SRC / index.js

  импортировать React из react
импортировать ReactDOM из React-dom
импортировать приложение из './App'
import './index.css'

ReactDOM.render (<Приложение />, document.getElementById ('корень'))  

Мы создадим новый файл с именем App.js и поместим туда компонент.

src / App.js

  import React, {Component} from 'react'

class App extends Component {
  render () {
    возвращение (
      

Привет, React!

) } } экспорт приложения по умолчанию

Мы экспортируем компонент как App и загружаем его в индекс .js . Не обязательно разделять компоненты на файлы, но приложение начнет становиться громоздким и выходящим из-под контроля, если вы этого не сделаете.

Компоненты класса

Создадим еще один компонент. Мы собираемся создать таблицу. Сделайте Table.js и заполните его следующими данными.

SRC / Table.js

  import React, {Component} from 'react'

class Table extends Component {
  render () {
    возвращение (
      <таблица>
        
          
             Имя 
             Работа 
          
        
        
          
             Чарли 
             Дворник 
          
          
             Mac 
             Вышибала 
          
          
             Ди 
             Начинающая актриса 
          
          
             Деннис 
             Бармен 
          
        
      
    )
  }
}

экспорт таблицы по умолчанию  

Этот компонент, который мы создали, является компонентом пользовательского класса.Мы используем специальные компоненты с заглавной буквы, чтобы отличать их от обычных элементов HTML. Вернемся к App.js , мы можем загрузить таблицу, сначала импортировав ее в:

src / App.js

  импорт Таблица из ./Table  

Затем загрузив его в render () из App , где раньше у нас было «Hello, React!». Я также изменил класс внешнего контейнера.

src / App.js

  import React, {Component} from 'react'
импортировать таблицу из './Таблица'

class App extends Component {
  render () {
    возвращение (
      
<Таблица />
) } } экспорт приложения по умолчанию

Если вы проверите свою рабочую среду, вы увидите, что Таблица загружена.

Теперь мы увидели, что такое компонент пользовательского класса. Мы могли бы использовать этот компонент снова и снова. Однако, поскольку данные жестко запрограммированы в нем, на данный момент это не слишком полезно.

Простые компоненты

Другой тип компонента в React - это простой компонент , который является функцией. Этот компонент не использует ключевое слово class . Давайте возьмем нашу Table и сделаем для нее два простых компонента - заголовок таблицы и тело таблицы.

Мы собираемся использовать стрелочные функции ES6 для создания этих простых компонентов. Во-первых, заголовок таблицы.

SRC / Table.js

  const TableHeader = () => {
  возвращение (
    
      
         Имя 
         Работа 
      
    
  )
}  

Потом тело.

SRC / Table.js

  const TableBody = () => {
  возвращение (
    
      
         Чарли 
         Дворник 
      
      
         Mac 
         Вышибала 
      
      
         Ди 
         Начинающая актриса 
      
      
         Деннис 
         Бармен 
      
    
  )
}  

Теперь наш файл Table будет выглядеть так.Обратите внимание, что компоненты TableHeader и TableBody находятся в одном файле и используются компонентом класса Table .

SRC / Table.js

  const TableHeader = () => {...}
const TableBody = () => {...}

class Table extends Component {
  render () {
    возвращение (
      <таблица>
        <Заголовок таблицы />
        
      
    )
  }
}  

Все должно появиться так, как было раньше.Как видите, компоненты могут быть вложены в другие компоненты, а простые и классовые компоненты могут быть смешаны.

Компонент класса должен включать render () , а возврат может возвращать только один родительский элемент.

В заключение, давайте сравним простой компонент с классовым компонентом.

Простой компонент

  const SimpleComponent = () => {
  return 
Пример
}

Компонент класса

  class ClassComponent расширяет Component {
  render () {
    return 
Пример
} }

Обратите внимание, что если return содержится в одной строке, скобки не нужны.

Стойка

Прямо сейчас у нас есть классный компонент Table , но данные жестко закодированы. Одно из главных достоинств React - это то, как он обрабатывает данные с помощью свойств, называемых props , и состояния. Теперь мы сосредоточимся на обработке данных с помощью свойств.

Во-первых, давайте удалим все данные из нашего компонента TableBody .

SRC / Table.js

  const TableBody = () => {
  вернуться 
}  

Затем давайте переместим все эти данные в массив объектов, как если бы мы вводили API на основе JSON.Нам нужно будет создать этот массив внутри нашего render () .

src / App.js

  class App расширяет компонент {
  render () {
    константные символы = [
      {
        имя: 'Чарли',
        работа: «Дворник»,
      },
      {
        имя: 'Mac',
        работа: "Вышибала",
      },
      {
        имя: 'Ди',
        работа: «Аспринговая актриса»,
      },
      {
        имя: 'Деннис',
        работа: "Бармен",
      },
    ]

    возвращение (
      
<Таблица />
) } }

Теперь мы собираемся передать данные дочернему компоненту (, таблица ) со свойствами, вроде того, как вы могли бы передавать данные, используя атрибуты data- .Мы можем называть свойство как угодно, если это не зарезервированное ключевое слово, поэтому я выберу characterData . Данные, которые я передаю, представляют собой переменную с символами, и я заключу ее в фигурные скобки, поскольку это выражение JavaScript.

src / App.js

  возврат (
  
<Таблица characterData = {characters} />
)

Теперь, когда данные передаются в Table , мы должны работать над доступом к ним с другой стороны.

SRC / Table.js

  class Table extends Component {
  render () {
    const {characterData} = this.props

    возвращение (
      <таблица>
        <Заголовок таблицы />
        
      
    )
  }
}  

Если вы откроете React DevTools и проверите компонент Table , вы увидите массив данных в свойстве. Хранящиеся здесь данные известны как виртуальный DOM , который представляет собой быстрый и эффективный способ синхронизации данных с реальной DOM.

Однако этих данных пока нет в реальной модели DOM. В Table мы можем получить доступ ко всем реквизитам через this.props . Мы передаем только один реквизит, characterData, поэтому мы будем использовать this.props.characterData для получения этих данных.

Я собираюсь использовать сокращение свойства ES6 для создания переменной, содержащей this.props.characterData .

  const {characterData} = this.props  

Поскольку наш компонент Table на самом деле состоит из двух более мелких простых компонентов, я собираюсь передать его в TableBody , снова через props.

SRC / Table.js

  class Table extends Component {
  render () {
    const {characterData} = this.props

    возвращение (
      <таблица>
        <Заголовок таблицы />
         

Как эффективно использовать контекст React

Как создавать и предоставлять поставщиков и потребителей контекста React

Текущие доступные переводы:

In Управление состоянием приложения с помощью React, Я говорю о том, как сочетание локального состояния и контекста React может помочь вам хорошо управлять состоянием в любом приложении React.Я показал несколько примеров и хочу Назовите несколько вещей об этих примерах и о том, как вы можете создать контекст React потребителей эффективно, так что вы избежите некоторых проблем и улучшите разработчика опыт и ремонтопригодность объектов контекста, которые вы создаете для своего приложение и / или библиотеки.

Примечание, обязательно прочтите Управление состоянием приложения с помощью React и следуйте советам, которые не следует искать в контексте для решения каждая проблема разделения штата, которая встречается у вас на столе.Но когда тебе нужно охватите контекст, надеюсь, этот пост в блоге поможет вам узнать, как это сделать эффективно. Также помните, что контекст НЕ должен быть глобальным для все приложение, но может быть применено к одной части вашего дерева, и вы можете (и вероятно, должно) иметь в вашем приложении несколько логически разделенных контекстов.

Сначала давайте создадим файл по адресу src / count-context.js , и мы создадим наш контекст там:

 

1

2import * as React from 'react'

3

4const CountStateContext = React.createContext ()

5const CountDispatchContext = React.createContext ()

Во-первых, у меня нет начального значения для CountStateContext . Если я требуется начальное значение, я бы назвал React.createContext ({count: 0}) . Но я не включайте значение по умолчанию, и это сделано намеренно. Значение по умолчанию только полезен в такой ситуации:

 

1function CountDisplay () {

2 const {count} = React.useContext (CountStateContext)

3 return

{count}

4}

5

6ReactDOM.render (, document.getElementById ('⚛️'))

Поскольку у нас нет значения по умолчанию для нашего CountStateContext , мы получим ошибка в выделенной строке, где мы разрушаем возвращаемое значение useContext . Это потому, что наше значение по умолчанию - undefined , и вы не можете разрушить undefined .

Никому из нас не нравятся ошибки во время выполнения, поэтому ваша реакция коленного рефлекса может заключаться в добавлении значение по умолчанию, чтобы избежать ошибки времени выполнения.Однако какой смысл в контексте? если у него не было реальной стоимости? Если он просто использует значение по умолчанию, был предоставлен, то он не может принести много пользы. 99% времени, когда вы будет создавать и использовать контекст в вашем приложении, вы хотите, чтобы ваш потребители контекста (те, которые используют useContext ) для визуализации внутри провайдера что может дать полезную ценность.

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

Документы React предположить, что указание значения по умолчанию "может быть полезно при тестировании компонентов в изоляция, не оборачивая их ". Хотя это правда, что это позволяет вам сделать это, Я не согласен с тем, что это лучше, чем оборачивать компоненты необходимыми контекст. Помните, что каждый раз, когда вы делаете в тесте то, чего не делаете сделать в своем приложении, вы уменьшите степень уверенности, которую может дать тест вы. Для этого есть причины, но это не так. один из них.

Примечание. Если вы используете Flow или TypeScript, отсутствие значения по умолчанию может быть действительно раздражает людей, которые используют React.useContext , но я покажу вам как вообще избежать этой проблемы ниже. Продолжай читать!

Что это за штука CountDispatchContext ? Я играл некоторое время в контексте и общение с друзьями в Facebook, которые поиграйте с ним подольше, и я могу сказать вам, что самый простой способ избежать проблем с контекстом (особенно, когда вы начинаете вызывать , отправляйте в эффекты) заключается в разделении состояния и отправки в контексте.Останься со мной здесь!

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

Компонент настраиваемого поставщика

Хорошо, продолжим. Чтобы этот контекстный модуль был полезен на всех , нам нужно использовать Provider и предоставьте компонент, который предоставляет значение. Наш компонент будет используется следующим образом:

 

1function App () {

2 return (

3

4

5

6

7)

8}

9

10ReactDOM.render (, document.getElementById ('⚛️'))

Итак, давайте создадим компонент, который можно использовать следующим образом:

 

1

2import * as React from 'react'

3

4const CountStateContext = React.createContext ()

5const CountDispatchContext = React.createContext ()

6

7function countReducer (состояние, действие) {

8 switch (action.type) {

9 {case 'increment':

10 return {count: state.count + 1}

11}

12 case 'декремент': {

13 return {count: state.count - 1}

14}

15 по умолчанию: {

16 выдать новую ошибку (`Необработанное действие type: $ {action.type} `)

17}

18}

19}

20

21function CountProvider ({children}) {

22 const [state, dispatch] = React.useReducer (countReducer , {count: 0})

23 return (

24

25

26 {children}

27

28

29) 30}

31

32export {CountProvider}

ПРИМЕЧАНИЕ: это надуманный пример, над которым я намеренно переусердствовал. покажет вам, на что будет похож более реальный сценарий. Это не значит это должно быть так сложно каждый раз! Не стесняйтесь использовать useState , если это соответствует вашему сценарию. Кроме того, некоторые провайдеры будут короткими и просто, как это, и другие будут НАМНОГО больше участвовать во многих крючки.

Custom Consumer Hook

Большинство API-интерфейсов для контекстного использования, которые я видел на практике, выглядят примерно так: это:

 

1импорт * как React из 'react'

2import {SomethingContext} из 'some-context-package'

3

4функция YourComponent () {

5 const something = React.useContext (SomethingContext)

6}

Но я думаю, что это упущенная возможность улучшить взаимодействие с пользователем. Вместо этого, я думаю, это должно быть так:

 

1import * as React from 'react'

2import {useSomething} from 'some-context-package'

3

4function YourComponent () {

5 const something = useSomething ()

6}

Это дает вам то преимущество, что вы можете делать несколько вещей, которые я покажу вам в реализация сейчас:

 

1

2import * as React from 'react'

3

4const CountStateContext = React.createContext ()

5const CountDispatchContext = React.createContext ()

6

7function countReducer (state, action) {

8 switch (action.type) {

9 case 'increment': {

10 return { count: state.count + 1}

11}

12 case 'декремент': {

13 return {count: state.count - 1}

14}

15 по умолчанию: {

16 выдать новую ошибку (`Тип необработанного действия: $ {action.type} `)

17}

18}

19}

20

21 function CountProvider ({children}) {

22 const [state, dispatch] = React.useReducer (countReducer, {count: 0} )

23 return (

24

25

26 {children}

27

29)

30}

31

32 function useCountState () {

33 const context = React.useContext (CountStateContext)

34 if (context === undefined) {

35 throw new Error ('useCountState должен использоваться в CountProvider')

36}

37 return context

38}

39

40function useCountDispatch () {

41 const context = React.useContext (CountDispatchContext2)

if (context === undefined) {

43 throw new Error ('useCountDispatch должен использоваться в CountProvider')

44}

45 контекст возврата

46}

47

48export {CountProvider, useCountState, useCountDispatch }

Во-первых, пользовательские хуки useCountState и useCountDispatch используют React.useContext , чтобы получить предоставленное значение контекста из ближайшего ГрафПровайдер . Однако, если значение отсутствует, мы выдаем полезную ошибку сообщение, указывающее, что ловушка не вызывается в функциональном компоненте который отображается в CountProvider . Это определенно ошибка, поэтому сообщение об ошибке ценно. #FailFast

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

Если вы вообще можете использовать хуки, пропустите этот раздел.Однако если вам нужно для поддержки React < 16.8.0, или вы думаете, что контекст должен использоваться компоненты класса, то вот как вы могли бы сделать что-то подобное с API на основе рендеринга для потребителей контекста:

 

1function CountConsumer ({children}) {

2 return (

3

4 {context => {

5 if (context === undefined) {

6 throw new Error ('CountConsumer должен использоваться в CountProvider')

7}

8 возвращать дочерние элементы (контекст)

9}}

10

11)

12}

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

TypeScript / Flow

Я обещал показать вам, как избежать проблем с пропуском defaultValue при использовании TypeScript или Flow. Угадай, что! Делая то, что я предлагаю, вы по умолчанию избежать проблемы! На самом деле это вообще не проблема.Оцените это:

 

1

2import * as React from 'react'

3

4type Action = {

Как изучить React.js в 2020 году

Как изучить React - одно из приоритетных направлений для много разработчиков JavaScript в этом году. Недавний опрос State of JS показал, что многие разработчики довольны React для создания современных веб-приложений. Однако из-за его популярности и спроса на работу, все еще есть много разработчиков JavaScript, которые хотят изучить React.В этом руководстве я хочу дать новичкам исчерпывающий обзор того, как подойти к изучению React, не отвлекаясь и не отвлекаясь на другие темы.

Learn React [Быстро || Быстро || Легко]

Нет возможности выучить что-то легким путем. Ты должен быть терпеливым. Это касается и разработчиков. Лично мне нравится быть разработчиком, потому что всегда будет чему поучиться. Если вам интересно, вы не разочаруетесь, став разработчиком.Обучение - это всегда вызов, задача отточить свои навыки, если вызов и умение находятся в равновесии. Вот почему нужно время, чтобы изучить React.

Однако у React нет крутой кривой обучения, если следовать одному простому правилу: изучать React, только React шаг за шагом и не позволять себе отвлекаться от других технологий на этом пути. JavaScript и React постоянно развиваются, потому что оба остаются инновационными и хотят оставаться актуальными и в будущем; так что сначала учитесь и не отставайте от них, прежде чем изучать что-то еще.Я слышал истории успеха от разработчиков, которые прошли путь от незнания React до предложения работы в React в компании от нескольких дней до нескольких месяцев. На работе они получили возможность узнать больше обо всех других модных технологиях, которые идут вместе с React.

«Мне предстояло собеседование при приеме на работу, где меня попросили завершить проект в React. Я сел в субботу и проработал The Road to Learn React, а в воскресенье я завершил свой проект, оставив достаточно времени. мое интервью в среду.За один уик-энд мне стало комфортно работать независимо в React с 0% до 80% ». (Источник)

Есть несколько технических стеков, которые люди хотят изучить с помощью React прямо сейчас. Я хочу подобрать несколько из них и дайте краткое объяснение, почему не стоит объединять их с React во время его изучения:

  • Изучите React с TypeScript? Ни в коем случае, сначала изучите React, прежде чем преобразовывать JavaScript в типизированный язык. Не только Ванильный код JavaScript будет набираться с помощью TypeScript, а также ваших компонентов React и всего, что с ними связано.Это станет беспорядком и подавляющим, если вы не изучите сам React с нуля. Кроме того, 99% учебных пособий и курсов по React написаны не на TypeScript, поэтому это усложняет задачу.

  • Изучите React с Redux? Redux - популярная библиотека управления состоянием для JavaScript. Опять же, сначала изучите React и его встроенное управление состоянием, прежде чем обращаться к сложной внешней библиотеке управления состоянием, которая предназначена для использования в крупномасштабных и сложных приложениях.В React уже есть множество инструментов для обработки состояния в вашем приложении. Подавляющему большинству приложений React даже не нужен Redux или какая-либо другая библиотека управления состоянием. Сначала узнайте, как работать с состоянием в React, прежде чем использовать другую библиотеку для решения этой проблемы. Redux усложняет React для начинающих.

  • Научитесь реагировать с Гэтсби? Gatsby.js в последнее время стал довольно популярным. Это идеальное решение для создания статических веб-сайтов, таких как личные веб-сайты, блоги и целевые страницы.Однако у Gatsby есть свои собственные знания, такие как GraphQL, его большая система плагинов и проблемы, возникающие с приложениями React, отображаемыми на стороне сервера. Так что не путайте Gatsby.js с тем, что ему легче изучать React. Это упрощает написание статических веб-сайтов с помощью React, но не позволяет изучать сам React.

Это были лишь некоторые вещи, которые новички в React связывают с React, когда начинают с ним работать. Их определенно больше. Однако они не облегчат процесс обучения.Напротив, вам придется выучить две вещи вместо одной. Так что сначала начните с React, прежде чем изучать что-либо на его основе. Изучите одно за раз.

Предварительные требования для React

Поскольку React - это библиотека JS, нет никакого способа обойтись без изучения JavaScript. Вы не можете изучить React без JavaScript или вообще без знания JavaScript. По сравнению с другими интерфейсными решениями, React широко использует JavaScript.

Сначала выучите React или JavaScript?

Вы должны понимать хотя бы основы JavaScript, часто называемого JavaScript ES5, и хорошо разбираться в HTML и CSS.React также использует синтаксис JavaScript, чаще всего называемый JavaScript ES6 и выше (ES7, ES8, ES9). Вот почему для изучения React имеет смысл освоиться хотя бы с JavaScript ES6.

Есть много людей, которые рекомендуют изучить веб-разработку и изучить основы JavaScript в качестве предварительного условия перед изучением React. Навыки, которые они рекомендуют приобрести, выходят далеко за рамки того, что необходимо для создания базовых приложений с React.js. Вот пара из них:

  • Функции являются первоклассными гражданами в JavaScript
  • bind (), apply () и call ()
  • области и закрытие
  • this
  • Методы объекта
  • Методы массива
  • Прототипное наследование -> Класс ES6
  • Обратные вызовы и обещания
  • Цикл событий
  • Пузыри событий
  • Регулярные выражения
  • Обработка ошибок
  • JavaScript ES6 и выше
  • Подъем, мемоизация
  • Декларативное против императивного программирования
  • Функциональное против объектного- ориентированное программирование

Однако я считаю неправдой обладать всеми этими знаниями.Напротив, новичков, плохо знакомых с JavaScript, React и веб-разработкой, могут разочаровать. Вы не хотите торчать в стране «областей действия и замыканий», в то время как вместо этого вы можете создавать реальные проекты, которые мотивируют вас продолжать работу. Момент «Ага» для схватывания замыканий наступит по пути. Лично я не знал примерно половины вещей из списка, когда начинал изучать React, и мне все еще приходится искать регулярные выражения в Интернете, потому что я не особо беспокоюсь о них; и я до сих пор помогаю компаниям с их проектами на JavaScript.

Я считаю, что большая часть JavaScript может быть изучена в процессе изучения React , потому что затем вы испытываете его в контексте при создании веб-приложений. Это захватывающе, и это то, что движет нами как людьми. Так что будьте воодушевлены во время обучения и не задерживайтесь слишком долго с основами, если вы не можете увидеть цель, даже не применив их в реальном сценарии. Начни строить реальные проекты. Оставайтесь любопытными! Двигайтесь вперед и назад между JavaScript и React, пока изучаете React.

Изучить React или jQuery?

Исторически jQuery заполнял пробел между обычным JavaScript и современными библиотеками / фреймворками, такими как React, Angular и Vue. Ранний JavaScript был не так эффективен в браузере и других предметах, как сейчас. Вот почему возникла реальная потребность в jQuery. Однако современный JavaScript может справиться со всем сам. Отсюда моя рекомендация: не беспокойтесь о jQuery.

Если вы работаете над большим приложением, которое использует React на своей новой работе, скорее всего, вы столкнетесь с jQuery в унаследованных областях приложения.Но нормально тогда не разбираться в jQuery и просто поискать в Интернете, что вам нужно для выполнения работы. В качестве альтернативы попробуйте перенести код с jQuery на React в качестве возможности для обучения. Вот как я делал это на своей последней работе, потому что я стал разработчиком JavaScript в первые дни Angular, но мне никогда не приходилось изучать jQuery до такой степени, чтобы владеть им. Вместо этого я сосредоточился на предстоящем путешествии с Angular, который затем стал React.

Зачем мне изучать React?

Почему вы вообще хотите изучать React? Новички знают обо всех блестящих современных библиотеках JavaScript, но часто не задаются вопросом, зачем они им нужны.Они могут только знать, что пользуются огромным спросом со стороны компаний и рабочих мест. Однако иногда имеет смысл отказаться от вопроса: Зачем мне это нужно?

Это относится не только к React, но и ко всем другим библиотекам и фреймворкам, которые вы узнаете в своей жизни как разработчик. Какую проблему это решает для меня? Слишком часто люди ставят библиотеки на вершину своего технического стека, не испытывая при этом проблемы. Вот почему я считаю, что реализация идентичного приложения с использованием ванильного JavaScript и React - отличный опыт обучения.Он демонстрирует вам, какую проблему решает новая библиотека. Тот же метод можно применить при принятии решения, хотите ли вы изучить React или другое решение, такое как Vue или Angular. Создайте базовое приложение с решениями по вашему выбору и сравните свой опыт разработки. Какое из решений вам подошло?

Изучите React.js шаг за шагом

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

Учитесь с помощью React Docs

Ссылка на документацию библиотеки как новичка в веб-разработке может быть пугающей. Но я твердо верю, что это лучший способ узнать что-то новое. На вашем карьерном пути к тому, чтобы стать разработчиком, вы привыкнете узнавать что-то новое с помощью документации по новой вещи, так почему бы не привыкнуть к этому сейчас? Он дает определенные преимущества для изучения документации, основанной на документации:

  • Руководство для начинающих
  • Отсутствие коммерческого интереса
  • Самоуверенный способ ведения дел
  • , тщательно продуманный основными участниками и сообществом
  • Последние материалы и обновления для новых версий
  • Ссылки на API

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

Изучите React с помощью проектов

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

Например, есть люди, которые хотят изучать React, создавая игры. Думаю, вы найдете множество реализаций React Tic Tac Toe.Реализуйте игру в React самостоятельно и сравните свое решение с другими решениями. Вы будете учиться на своих ошибках и научитесь сравнивать свой исходный код с реализацией других.

Learn React by Doing

Learn React by Making - одна из наиболее распространенных рекомендаций, которые вы слышите от других разработчиков, она применима практически ко всему в жизни, потому что каждая задача представляет собой новую задачу для роста React Developer. Кроме того, слишком легко пассивно потреблять видеокурсы, книги и учебные пособия.Пачкайте руки и реализуйте что-нибудь самостоятельно. Застрять на проблеме, впасть в отчаяние, обдумать проблему, оторвавшись от экрана, в конце концов решить проблему и пожинать плоды. Это основная структура обучения чему-либо.

Учитесь React Every Day

Примите решение придерживаться программирования каждый день. Вы можете принять участие в конкурсе «100 дней кода», написать об этом в Twitter или на своем сайте. Сделайте это повседневной привычкой. Только придерживаясь этого какое-то время, проявляя настойчивость и кодируя каждый день, вы в конечном итоге станете разработчиком React.Это марафон, а не спринт.

Изучите React публично

Лучший способ узнать что-то новое - это изучить это публично. Ознакомьтесь с отзывами других разработчиков React, демонстрируя свои достижения. Если вы достигли определенного рубежа в своем проекте React, покажите его другим и попросите их отзывы. Это пара широко известных платформ для обмена идеями о React:

Вы не только получите отзывы от людей, но и углубитесь в React, присоединившись к обсуждениям.Станьте частью сообщества. Еще один отличный способ узнать что-то новое самому - объяснить это кому-то другому. Может быть, вы на шаг впереди других новичков в React и можете им помочь. Ознакомьтесь с React Beginner Thread в React Subreddit , где вы можете помочь другим разработчикам React решить их проблемы.

Научитесь использовать React

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

Изучите и поймите React. В конце концов, не нужно много создавать компонент React, который возвращает JSX, использовать компонент React в другом компоненте React при их расположении в иерархии компонентов, передавать данные от компонента к компоненту с помощью свойств и создавать компоненты. интерактивно с государством. В этом суть React. Изучите React глубоко, применяя полученные навыки в своем проекте, а не потребляя бесконечное количество контента.

Настройка React для начинающих

Как начать собственно кодирование проекта React? Если у вас нет установленного редактора / терминала или IDE и вы просто хотите проверить, как React чувствует себя в кодовой среде, проверьте онлайн-редактор кода под названием CodeSandbox. Поиграйте с React и проверьте, нравится ли он вам. Однако, если вы хотите научиться разрабатывать приложения React на своем локальном компьютере, ознакомьтесь с этими руководствами по установке MacOS и Windows, чтобы они работали на вашем компьютере:

Оба руководства содержат минимальный набор рекомендуемых инструментов, которые помогут вам начать работу с React. :

  • Выполнение JavaScript с помощью Node и NPM: Пока Node.js позволяет запускать JavaScript вне браузера, NPM (диспетчер пакетов узлов) позволяет устанавливать в проект библиотеки, такие как React. Вам понадобятся оба инструмента практически для любого другого современного проекта JavaScript.
  • Разработка с помощью Visual Studio Код: Популярная легкая среда IDE, которая является идеальным решением для разработчиков React. Visual Studio Code (VS Code) поставляется с редактором для изучения разработки на React и терминалом (командной строкой) для запуска вашего проекта React и установки для него библиотек.
  • Учитесь с помощью create-react-app: Готовое решение от Facebook и команды React, которое поможет вам начать работу с легким стартовым проектом React с нулевой конфигурацией. 99% учебных пособий по React построены поверх этого начального проекта, чтобы вы могли начать работу с React. Вы можете сосредоточиться только на изучении React, в то время как обо всех инструментах позаботится приложение create-react-app.
  • Форматирование с Prettier: Оптимизированный модуль форматирования кода, который автоматически форматирует ваш код в среде разработки.Он поставляется с простой настройкой и интеграцией для популярных редакторов (VS Code). Пока вы изучаете веб-разработку на React, он показывает вам, как форматировать код React.

Изучите Advanced React

После того, как вы изучите основы React с компонентами React, свойствами / состоянием и синтаксисом React JSX для возврата действительного HTML в JavaScript, вы сможете глубже погрузиться в расширенные концепции и шаблоны React. Вот несколько важных из них, которые не исчезнут так быстро:

Обладая этими продвинутыми технологиями React, вам должно быть комфортно погружаться в более крупные приложения React, где вы чаще найдете эти концепции и методы.Из-за React Hooks другие компоненты более высокого порядка и компоненты Render Prop могут меньше использоваться в будущем, но вы все равно должны довольно часто видеть их в течение следующего года.

Изучите React Online

После того, как вы изучите документацию React, чтобы узнать об основах и некоторых расширенных концепциях и шаблонах, и после того, как вы начали самостоятельно создавать приложение React, обязательно ознакомьтесь с другими ресурсами React в Интернете. Обратите внимание, что я упоминаю об этом очень поздно в этом руководстве, потому что часто новички в React застревают в бесконечной истории о простом потреблении контента для изучения React.На что я хочу обратить внимание: начните производить, разрабатывая приложения React самостоятельно или описывая свои знания. Ключевым моментом здесь является обучение на практике. Каждую проблему можно найти в Интернете. А затем, если вы хотите узнать больше о React, ознакомьтесь со всеми другими ресурсами, чтобы изучить React в Интернете. Я рекомендую не только использовать один вид учебных материалов, но и разнообразить свои учебные ресурсы:

  • Руководства по React
  • Книги по React
  • Видео по React (YouTube, Twitch, онлайн-курсы)
  • Веб-разработка или подкасты React
  • Интерактивные курсы

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

«Изначально, когда я впервые обратился к React, я купил курс Udemy у другого учителя. Однако после нескольких видеороликов я обнаружил, что очень теряюсь. Учитель из этой высоко оцененной серии сначала старался не усложнять задачу, но потом Ослепляет вас трудностями для понимания концепций и кода и неспособностью хорошо информировать о том, что происходит. (Источник)

Если вы любите читать, просмотрите онлайн-руководства и книги по React. Печатные книги также являются хорошими ресурсами для изучения React в автономном режиме. Несмотря на то, что многие люди опасаются, что книги устареют слишком быстро, я могу только утверждать, что большинство книг издаются самостоятельно, и автору требуется всего 1 день, чтобы выложить новую версию в Интернете (даже на Amazon). Я считаю, что в настоящее время обновление видео занимает больше времени, чем письменный контент.

Если вам нравится смотреть, посмотрите онлайн-курсы отдельных разработчиков на YouTube, Udemy и их собственных платформах.Однако опять же не зацикливайтесь только на просмотре контента. Найдите контент, в котором вы вынуждены применить свои знания.

Если вы просто хотите быть в курсе последних новостей React, подкасты - отличный способ оставаться на опережение. Вы услышите, как разработчики, находящиеся на переднем крае развития технологий, всегда выпускают что-то новое для изучения. Также подкасты - отличный способ продолжить изучение React во время поездок на работу или во время тренировок в тренажерном зале. По крайней мере, так я это делаю.

В Интернете есть множество бесплатных высококачественных обучающих ресурсов React, доступных каждому.Если кто-то спрашивает меня о том, чтобы стать разработчиком React, я часто сразу же отправляю его на FreeCodeCamp. Независимо от того, какой учебный ресурс вы выберете, постарайтесь оставаться прагматичным, применяя полученные знания самостоятельно. Не просто пассивно потребляйте контент. Будьте активны и поставьте перед собой задачу отточить свои навыки.

Дорожная карта Learn React

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


Вот и все с моей стороны. Оставайтесь любопытными, делайте это каждый день, пачкая руки, сообщайте об этом публично и бегите марафон, а не спринт. Испытайте себя, чтобы улучшить свои навыки разработчика и стать разработчиком React в этом году!

Как преобразовать компонент класса React в компонент функции

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

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

Функциональные компоненты намного менее подробны и требуют меньше шаблонов. Они (на мой взгляд) немного более гибкие с хуками и кастомными хуками, и они (обычно) немного более производительны.

В чем разница между компонентами класса и компонентами функций?

Ну, попросту говоря, один класс, а другой - класс... функция!

Возьмите эти примеры ниже. Первый - это компонент класса, второй - функциональный компонент. Они оба делают одно и то же.

  // Пример компонента класса

class MyComponent расширяет React.Component {
  
  render () {
    return 

Привет, {this.props.name} } } // Пример функционального компонента function MyComponent (props) { return

Здравствуйте, {props.name}

}

Оба компонента принимают свойство (имя) и отображают `Hello, {name} `.Это очень простой пример, но мы уже видим некоторые отличия.

Компонент класса должен расширять класс React Component и указывать метод render . В то время как компонент функции - это просто функция, а метод рендеринга - это просто возвращаемое значение функции.

Зачем преобразовывать компонент класса в функциональный компонент

Если у вас немного более старая кодовая база и вы хотите реорганизовать некоторые из ваших компонентов в функциональные компоненты, то вы попали в нужное место!

Осторожно! Не все компоненты класса можно преобразовать в функции! Все еще есть случаи, когда вам нужно использовать компонент класса.Но в 99% случаев вы будете в порядке с функциональным компонентом.

Когда нельзя использовать функциональный компонент?

В некоторых случаях функциональный компонент просто не работает. Мы быстро обсудим пару, а может быть и больше! Считайте себя предупрежденным.

Если вам нужен конструктор

Если вам действительно действительно нужен конструктор, вам будет плохо. Конструктор запускает один раз и только один раз перед первым рендерингом компонента.В настоящее время я не нашел ловушки, которая заменила бы эту функциональность (знаете об одном? Сообщите мне!)

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

Если вам нужно расширить компонент

В Javascript классы могут расширять другие классы, таким образом наследуя прототип родителя. Фактически, если вы создаете компонент класса, у вас будет для расширения базового компонента из React.Это более или менее невозможно с функциональными компонентами, поэтому я бы не стал пытаться

Компоненты более высокого порядка

Вы можете создать HOC (компонент более высокого порядка) с функцией, однако часто может быть немного проще использовать класс. Но будьте осторожны, на ваше усмотрение.

Побочные эффекты объединенных обновлений состояния

this.setState больше не доступен в функциональном компоненте. Вместо этого мы используем хук useState , который возвращает переменную состояния и функцию обновления.Если у вас есть какой-то своеобразный паттерн, когда вы обновляете сразу несколько переменных состояния и вам нужно запустить определенный побочный эффект, это может оказаться трудным (не невозможным) с функциональным компонентом.

В качестве примера, если вы сделаете это

  class MyComponent extends React.Component {
  
  onSomeEventHandler (newName) {
    
    this.setState ({
      counter: this.state.counter + 1,
      имя: newName
    }, () => {
      console.log ('Счетчик И имя обновлены!')
    })
    
  }
   
}  

Вам будет сложно точно воспроизвести эту функциональность с помощью функционального компонента.

Быстрые шаги для преобразования в функциональный компонент

1. Измените класс на функцию

Измените

  class MyComponent extends React.Component {
  // ...
}  

до

  function MyComponent (props) {
  // ...
}  

2. Удалите метод рендеринга

Удалите метод рендеринга, но сохраните все после & включая возврат . Сделайте это последним утверждением в вашей функции.

Из номера

  //...
  render () {
    
    return (

Привет, мир

); } // ...

To

  function MyComponent (props) {
  // ...

  return (

Привет, мир

); } // конец функции

3. Преобразуйте все методы в функции

Методы класса не будут работать внутри функции, поэтому давайте преобразуем их все в функции (замыкания).

From

  class MyComponent extends React.Component {
  
  onClickHandler (e) {
    //...
  }
  
}  
  function MyComponent {
  
  const onClickHandler = (e) => {
    // ...
  }
  
}  

4. Удалите ссылки на this

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

Изменить

  clas MyComponent (props) extends React.Component {
  
  // ...
  
  mySpecialFunction () {
    console.log ('вы нажали кнопку!')
  }
  
  onClickHandler (e) {
    этот.mySpecialFunction ();
  }
  
  
  render () {
    возвращение (
      

Здравствуйте, {this.props.name}

); } }

To

  function MyComponent (props) {
  
  // ...
  
  const mySpecialFunction = () => {
    console.log ('вы нажали кнопку!')
  }
  
  const onClickHandler = (e) => {
    mySpecialFunction ();
  }
  
  возвращение (
    

Здравствуйте, {реквизит.имя}

); }

5. Удалить конструктор

Простое удаление конструктора немного сложно, поэтому я разберем его дальше.

1. useState

Вместо

  конструктор (props) {
  супер (реквизит);
  // Устанавливаем начальное состояние
  this.state = {
    счетчик: 0,
    название: ""
  }
}  

Используйте хук useState

  function MyComponent (props) {
  
  константа [счетчик, setCounter] = useState (0);
  const [имя, setName] = useState ("");
  
}  
2.Удаление привязки обработчика событий

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

  конструктор (подпорки) {
  this.onClickHandler = this.onClickHandler.bind (это);
}  

Эти строки можно просто удалить. (В любом случае, какой грубый, слишком многословный синтаксис).

6. Замените this.setState

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

Заменить это;

  class MyComponent расширяет React.Component {
  
  onClickHandler (e) {
    this.setState ({count: this.state.count + 1})
  }
  
}  

С этим;

  function MyComonent {
  
  const [количество, setCount] = useState (0)
  
  const onClickHandler = e => {
    
    setCount (счетчик + 1);
    
  }
  
}  

7. useEffect для побочных эффектов обновления состояния

Помните, как this.setState мог принимать обратный вызов, который запускался после обновления состояния? Наша функция обновления useState не делает этого.Вместо этого мы должны использовать хук useEffect. Однако это не работает точно так же! useEffect срабатывает всякий раз, когда изменяются его зависимости.

Если вы это сделаете;

  this.setState ({counter: this.state.counter + 1}, () => {
  console.log ('Счетчик обновлен!')
})  

Сделайте это вместо этого

  const [counter, setCounter] = useState (0)

useEffect (() => {
  console.log ('счетчик изменен!')
}, [counter])  

8. Замените методы жизненного цикла хуками

ComponentDidMount

Вместо использования метода componentDidMount используйте ловушку useEffect с пустым массивом зависимостей.

  useEffect (() => {
  console.log ('компонент установлен!')
}, []) // обратите внимание на пустой массив здесь  
ComponentWillUnmount

Вместо использования метода componentWillUnmount для очистки перед удалением компонента из дерева React, верните функцию из хука useEffect с пустым массивом зависимостей;

  useEffect (() => {
  console.log ('компонент установлен')
  
  // возвращаем функцию для выполнения при размонтировании
  return () => {
    приставка.log ('компонент будет отключен')
  }
}, []) // обратите внимание на пустой массив  
ComponentDidUpdate

Если вы не передадите ничего в качестве второго аргумента для useEffect, он будет срабатывать каждый раз при обновлении компонента. Поэтому вместо использования componentDidUpdate используйте;

  useEffect (() => {
  
  console.log ('компонент обновлен!')
  
}) // уведомление, без второго аргумента  

Примеры компонентов, преобразованных в функции

Пример 1 - простое состояние

Замените это

  import React, {Component} from 'react';

class MyComponent расширяет Component {
  
  constructor (props) {
    
    супер (реквизит);
    
    этот.state = {
      count: props.count || 0
    }
    
    this.onClickHandler = this.onClickHandler.bind (это);
    
  }
  
  onClickHandler (e) {
    
    this.setState ({
      count: this.state.count + 1;
    })
    
  }
  
  render () {
    возвращение (
      
Количество: {this.state.count}

Подсчитайте isis: {this.state.count}

); } }

С этим импортом

  React {useState} из response;

function MyComponent (props) {
  
  const [count, setCount] = useState (props.счет || 0);
  
  const  

Введение в хуки в React

Если вы читали Twitter, то, вероятно, знаете, что хуки - это новая функция React, но вы можете спросить , как мы на самом деле их используем? В этом посте мы собираемся показать вам несколько примеров того, как использовать хуки.

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

Мотивация за крючками

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

Обычно с этим обычно справляются:

  • компоненты высшего порядка или
  • Комплекс рендеринга

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

Hooks призван решить все эти проблемы, позволяя вам писать функциональные компоненты, которые имеют доступ к таким функциям, как состояние, контекст, методы жизненного цикла, ссылка и т. Д.без написания компонента класса.

Крючки Alpha

Прежде чем мы углубимся, важно отметить, что API хуков еще не доработан.

Кроме того, официальные документы очень хороши, и мы рекомендуем вам прочитать их, в частности, потому что они раскрывают мотивы хуков.

Содержание

Прочитать позже?

Этот пост действительно копается в крючках, и его выполнение займет около часа.Если вы предпочитаете сохранить его на потом, мы можем доставить его в ваш почтовый ящик, чтобы обработать его в удобное для вас время. Напишите письмо ниже, и мы отправим вам 8 примеров кода и эту статью в формате PDF.

Никакого спама и легко отказаться от подписки.

Как хуки сопоставляются с классами компонентов

Если вы знакомы с React, один из лучших способов понять хуки - это посмотреть, как мы воспроизводим привычное поведение в «классах компонентов» с помощью хуков.

Напомним, что при написании классов компонентов нам часто требуется:

.