1. Добавление журналов консоли для отображения выражений.

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

Примечание. вы должны использовать оператор или, потому что console.log возвращает undefined.

2. Отслеживайте вызов функции с помощью объекта Error.

Если вы не знаете, откуда вызывается функция, зарегистрируйте в ней объект Error, и вы получите трассировку стека в консоли:

Обратите внимание на третью строку в каждом журнале, одна вызывается из EnterPasscode.tsx строки 106, а другая - из appConfigSaga.ts строки 576.

3. Приставьте все журналы к префиксу, чтобы отфильтровать предупреждения.

React дает вам массу предупреждений и ошибок в консоли о ключах и устаревших функциях, но вам лень их исправлять?

Добавьте отдельную строку к каждому из ваших комментариев:

Затем отфильтруйте журналы по этой строке в консоли:

4. Добавление функций в окно

Хотите знать, что делает функция, не читая всю документацию? Просто добавьте его в window, и вы сможете поиграть с ним в консоли.

Я делаю это все время с moment, потому что никогда не могу вспомнить, какие функции что возвращают:

5. Троичные вопросительные знаки.

Хотите написать больше троичных вопросительных знаков? Большинство людей знают, что использование || и && - очень быстрый способ написания условий, но знаете ли вы, что есть еще ???

Это говорит, что если state?.bookings не определено, верните {}.

Почему бы просто не использовать ||?

В то время как || полезен для оценки того, является ли значение «ложным» (так что все, что оператор if считает ложным) ?? оценивает только то, что является null или undefined. Это в принципе немного строже.

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

Возьми?

6. Необязательное связывание [выраженных] свойств объекта.

Вы также можете использовать ? при доступе к свойствам объекта с помощью переменной…

Как ни странно, вы догадались, что синтаксис bookings?[id]. Я думаю, это потому, что дополнительный оператор цепочки на самом деле ?., а не просто ? сам по себе: MDN Optional Chaining.

7. console.group

console.group() очень полезен, когда React заставляет ваши журналы печататься снова и снова.

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

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

Теперь он группирует журналы по рендерингу:

8. Принудительно повторно рендеринг с помощью ключевого свойства.

Необходимо обновить компонент. Заставьте его выполнить повторный рендеринг, добавив к нему key.

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

Честно говоря, я еще не использовал это, но все же хорошо знать.