Как реагировать если: Как реагировать, если вы столкнулись с чужим агрессивным мнением

Содержание

Как реагировать, если вы столкнулись с чужим агрессивным мнением

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

Чужое мнение может касаться нас как минимум в двух аспектах. Первый — хейт и острая критика. Многие люди сейчас переполнены аффектом — очень интенсивными переживаниями, включая агрессию и ярость, которые захлестывают и с которыми они плохо справляются.

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

Getty Images

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

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

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

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

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

5 золотых правил критики на работе — Work.ua

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

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

Work.ua рассказывает об искусстве критиковать конструктивно и реагировать на замечания с достоинством.

Если критикуют вас

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

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

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

Если критикуете вы

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

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

Начните разговор с плюсов — отметьте ценные для вас достижения или качества человека: «Спасибо за оперативно предоставленные данные».

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

5 золотых правил критика

Безоценочность и конкретность. Не переходите на личности, избегайте обобщений вроде: «Вы всегда/никогда…» и говорите только о фактах: «В течение недели вы трижды опоздали».
Своевременность. Пенять человеку на то, что он облажался, нужно сразу же после совершения им ошибки. Если вы отложите разговор на потом, он может быть воспринят как банальные сведение счетов и злопамятность.
Открытость. Не критикуйте за глаза. Во-первых, это попахивает сплетнями. Во-вторых, всегда найдутся доброжелатели, которые передадут ваши слова по нужному адресу, да еще и в таком виде, что мама родная (читайте: вы) не узнает. Того и гляди, еще оправдываться придется: мол, вы имели в виду совсем другое.
Деликатность. Это хвалить принято при массовом стечении народа, а критиковать уместно наедине: прилюдная «порка» — верный путь к вражде с объектом критики.
Спокойствие и доброжелательность. Чувствуете, что готовы разорвать коллегу? Не затевайте разговор, пока не успокоитесь. Люди очень чутко (и в первую очередь) реагируют на тон сказанного, а уж затем на содержание.

Полное руководство по условному рендерингу в React | Vytenis A.

, опубликованные в

8 мин. Читать

18 сентября 2022

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

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

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

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

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

Методы условного рендеринга для этой части:

Оператор If-Else
Тернарная операция
Встроенная IF с логическим &вычислением& (оценка короткого замыкания)
Оператор Switch
Логическое ИЛИ || Оператор
Условный рендеринг с перечислениями
Компоненты высшего порядка
Использование переменных элементов
Использование выражений немедленно вызываемых функций (IIFE)
Использование расширенных библиотек JSX
Многоуровневое условное рендеринг

Оператор If-Else

Начнем с простейшего примера — if-else оператора. Он будет выполнять действия, содержащиеся в , если блокируется при выполнении условия или условий. Если это не так, он выполнит действия, содержащиеся в блоке else .

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

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

В заключение отметим, что техника if-else является самой простой среди прочих.

Тернарная операция

Условный оператор — единственный оператор JavaScript, который принимает три операнда. Это похоже на оператор if-else . Это позволяет нам создать if-else операторы более краткие. Шаблон по умолчанию выглядит следующим образом:

условие ? expr1 : expr2

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

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

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

Встроенная ЕСЛИ с логическим оператором && (оценка короткого замыкания)

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

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

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

Чтобы лучше объяснить этот оператор, приведем несколько примеров:

true && «Это отрендерит» вернет «Это отрендерит»
false && «Это не отрендерит» ничего не вернет

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

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

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

Я также покажу вам, как получать данные из API и отображать их с помощью оператора && . Следующий пример показывает вам именно это.

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

Оператор Switch

Как и в операторе if-else , того же результата можно добиться с помощью оператора switch, в котором можно указать разметку для различных условий. Если вам нужно более двух возможных результатов, было бы более практичным применить метод оператора switch.

Используя Switch, вы можете получить столько результатов, сколько захотите. И вместо того, чтобы возвращать null из компонента (который ничего не будет отображать), мы возвращаем компонент.

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

Более аккуратная версия будет выглядеть так:

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

Логическое ИЛИ || Оператор

Этот оператор возвращает значение true, если хотя бы одно значение внутри условного оператора равно true . Нам понадобится оператор && для рендеринга компонентов. Вот пример того, как это может работать:

Условный рендеринг с Enums

Enum — это объект Javascript, который используется для сопоставления пар ключ-значение. Самый простой пример перечисления:

Как и оператор Switch, перечисление может иметь несколько условных отображений:

Если тип еды суп, мы получим компонент и так далее. Стоит отметить, что свойство foodType внутри скобок [ ] позволяет нам извлекать значение из объекта.

Вы также можете использовать внешнее статическое перечисление:

Мы также можем использовать функцию для извлечения необходимого компонента:

В заключение, метод enum похож на оператор Switch, но более читабелен.

Компоненты высшего порядка ( HOC)

Компонент высшего порядка (HOC) — это продвинутая техника в React для повторного использования логики компонентов. Я не буду объяснять это сейчас, однако я напишу об этом статью, так что следите за мной, чтобы не пропустить.

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

Теперь мы можем использовать его, создав компонент:

Использование переменных элемента

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

Использование выражений немедленно вызываемых функций (IIFE)

В предыдущем методе вы обнаружили, что переменные могут содержать компоненты. Но что, если вы не хотите их создавать и делать все внутри оператора return? Вот где на помощь приходят IIFE. IIFE — это функция JavaScript, которая запускается, как только она определена. Пример со стрелочной функцией показан ниже.

Использование расширенных библиотек JSX

Существует множество библиотек, созданных для упрощения React. Библиотека «JSX Control Statements» — это подключаемый модуль Babel, который расширяет JSX, добавляя условные операторы и циклы. Пример с этой библиотекой приведен ниже:

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

Многоуровневая условная визуализация

Вы также можете вложить условную визуализацию.

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

Несколько решений одной проблемы могут сильно повлиять на ваш проект. Это повлияет на читабельность и эффективность кода. Вот несколько советов и правил, как выбрать технику условного рендеринга:

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

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

Всегда следует отдавать предпочтение простоте и удобочитаемости, другими словами, не переусердствовать.

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

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

→ Подробнее

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

Помогите своей команде:

→ Micro-Frontends

→ Design Systems

→ 90 014 Совместное использование кода и повторное использование

→ Монорепозитории

5 способов реализации условного рендеринга в React | by Chidume Nnamdi 🔥💻🎵🎮

Плюсы и минусы различных реализаций условного рендеринга в React.

Chidume Nnamdi 🔥💻🎵🎮

Читать

Опубликовано в

Чтение: 5 мин.

· 90 003

20 мая 2020 г.

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

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

Попробуйте использовать концентраторы компонентов, такие как Bit.dev, для публикации, документирования и организации ваших компонентов. Таким образом, все ваши компоненты будут доступны для повторного использования во всех ваших проектах.

Пример: изучение компонентов React, опубликованных на Bit.dev
Мы можем применить условную логику if-else к JSX в React. Помните, что JSX компилируется в JS перед выполнением, поэтому мы буквально пишем код JS.
Пример
var globalVar = truefunction App() {
if(globalVar) {
return
If Rendering

} else {
return
Else Rendering

}
}
Производительность
Операторы if-else могут привести к напрасному повторному рендерингу в React. Это может не ощущаться в небольших и средних приложениях, но снижение производительности будет весьма заметным в больших приложениях с сотнями или тысячами компонентов.
Рассмотрим следующий пример:
render() {
if(props.showA) {
возврат (

)
}
возврат (

)
}
Компоненты A, B, C монтируются в зависимости от условия.
Если реквизит showA верен — A, B, C визуализируются. Если свойство showA имеет значение false, то A пропускается и визуализируются только B и C.
Проблема здесь связана с алгоритмом сравнения React. Этот алгоритм используется React, чтобы знать, когда следует избегать ненужных рендеров.
При начальном значении showA компоненты визуализируются в соответствии с их структурой A -> B -> C. Пока showA имеет значение true и их реквизиты не изменяются, React не будет повторно отображать.
Но структура рендеринга изменится, когда showA станет ложным. Структура будет B -> C. Теперь React увидит структуру, отличную от предыдущей, и повторно отобразит (размонтирует и перемонтирует) компоненты B и C, даже если их реквизиты/состояние остались прежними. и не требовал повторного рендеринга. Это потраченный впустую повторный рендеринг.
Тернарный оператор — это сокращенная форма условия if-else. В первой части указывается условие, во второй части — возвращаемое значение, если оно истинно, а в последней части — возвращаемое значение, если оно ложно.
состояние ? true_cond : false_cond
Пример
let cond = truefunction App() {
return (
{cond ?

If Rendering

:

Else Rendering

}
)
}
Переменные элемента содержат элементы JSX, поэтому их можно использовать в любом месте компонента React. Переменные элемента упрощают чтение и понимание вашего кода, потому что они избавляют вас от множества операторов возврата в вашем компоненте.
Стандартный способ реализации:
function App(props) {
if(props.loggedIn) {
return
Выполнен вход

} else {
return
Не зарегистрирован In

}
}
У нас есть несколько операторов возврата в вышеуказанном компоненте. Мы используем if-else в JSX для условной визуализации части пользовательского интерфейса.
Мы можем использовать переменную элемента для хранения элемента, который будет возвращен при каждом результате условного оператора.
Пример
function App(props) {
let element
if(props.loggedIn) {
element =
Вошел в систему

} else {
element =
Не вошел в систему

}
возвращаемый элемент
}
Мы используем переменную element для хранения конечного элемента, который будет отображаться на основе оценки оператора if-else.
Используя переменные элементов, мы делаем наш код намного чище и легче для чтения.
Производительность
Проблемы здесь те же, что и в пункте if-else выше.
Оператор AND используется для проверки истинности как левого, так и правого выражений.
левое_выражение && правое_выражение
Если выражение разрешается в ИСТИНА, оператор И возвращает оценку правильного выражения.
Пример:
(true && "nnamdi")
// "nnamdi"(true && 1234)
// 1234
С другой стороны, если выражение принимает значение FALSE, то оператор AND возвращает FALSE:
(false && "nnamdi")
// false (false && 1234)
// false
Если это так, мы можем использовать этот оператор AND для условного рендеринга JSX в React.
Пример
function App(props) {
return (

{
props.loggedIn &&

Вы вошли как {props.data.username}

}
< /div>
)
}
Мы используем оператор AND в JSX. Фигурные скобки позволяют нам добавлять и оценивать выражения JS в JSX.
Производительность
Хотя по сути это не отличается от двух предыдущих способов условного рендеринга, выражение JSX с оператором AND (&&) считается лучшим вариантом, поскольку оно заставляет вас возвращать ту же структуру при условном возврате и рендеринге элементы.
Мы можем настроить компонент так, чтобы он возвращал значение null вместо выражения JSX, чтобы он оценивался, но ничего не отображал.
Когда компонент возвращает нуль, React не может смонтировать компонент.

function App(props) {
if(props.noRender)
return null
return (

App Component

)
}

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