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, поэтому вы можете использовать это в компоненте из модуля, который вы не контролируете.
Честно говоря, я еще не использовал это, но все же хорошо знать.