[[441862]]

1. 在渲染表達(dá)式里面使用console.log

如果你想在渲染一個(gè)組件時(shí)打印它的參數(shù)，而你又不想轉(zhuǎn)換它。你可以將console.log與||一起用。

2. 使用 Error 對(duì)象跟蹤函數(shù)調(diào)用棧

如果你不知道從何處調(diào)用了函數(shù)，你可以在函數(shù)中打印一個(gè) Error 對(duì)象，你將在控制臺(tái)中獲得堆棧跟蹤：

注意每個(gè)日志的第三行，一個(gè)是從EnterPasscode.tsx第 106 行調(diào)用的，另一個(gè)是從appConfigSaga.ts第 576 行調(diào)用的。

3. 為所有日志添加前綴用于過(guò)濾

React 是否在你的控制臺(tái)中為你提供了大量關(guān)于 key 和 deprecations 的警告和錯(cuò)誤，但你懶得修復(fù)它們?

為你的每個(gè) console 添加一個(gè)特定的字符串：

然后在控制臺(tái)中按該字符串過(guò)濾日志：

4. 向 window 對(duì)象添加屬性

想知道一個(gè)函數(shù)的方法而不想閱讀所有文檔?只需將它添加到 window 對(duì)象, 然后你就可以在控制臺(tái)中使用它。我一直這樣做，因?yàn)槲矣肋h(yuǎn)記不起 moment 返回了哪些函數(shù)：

5. 空值合并運(yùn)算符

大多數(shù)人都知道使用 || 和 && 是一種編寫條件判斷的快捷運(yùn)算符。但是你知道??嗎?空值合并操作符(??)是一個(gè)邏輯操作符，當(dāng)左側(cè)的操作數(shù)為 null 或者 undefined 時(shí)，返回其右側(cè)操作數(shù)，否則返回左側(cè)操作數(shù)。

這表示，如果state?.bookings 是undefined 則返回{}。

為什么不直接使用||?

而||對(duì)于評(píng)估一個(gè)值是否為"假"非常有用，??只評(píng)估是null或者undefined。這很有用，因?yàn)槟憧赡苷谠L問(wèn)值為 false 的屬性……

6. 可選鏈操作符?

可選鏈操作符是訪問(wèn)嵌套對(duì)象屬性的安全方式。這意味著在訪問(wèn)一長(zhǎng)串對(duì)象屬性時(shí)，我們不必進(jìn)行多次空檢查。當(dāng)嘗試訪問(wèn)可能不存在的對(duì)象屬性時(shí)，可選鏈操作符將會(huì)使表達(dá)式更短、更簡(jiǎn)明。

7. console.group

當(dāng) React 導(dǎo)致你的日志一遍又一遍地打印時(shí)，console.group 是非常有用的。

假設(shè)我有一個(gè)有循環(huán)的函數(shù)。如果我記錄每次循環(huán)迭代的結(jié)果，我會(huì)得到大量日志，不僅是循環(huán)記錄每次迭代，而且 React 還在組件重新渲染時(shí)一遍又一遍地調(diào)用該函數(shù)：

如果我想找出迭代開(kāi)始和結(jié)束的位置這將花費(fèi)我很多精力。一種更簡(jiǎn)單的方法是用console.group 和 console.groupEnd 包住我的函數(shù)。

現(xiàn)在它對(duì)每個(gè)渲染的 console 進(jìn)行了分組：

8. 使用 key 屬性強(qiáng)制重新渲染

需要強(qiáng)制刷新一個(gè)組件?可以通過(guò)添加一個(gè) key 來(lái)實(shí)現(xiàn)。

從技術(shù)上來(lái)說(shuō)，你可以通過(guò)改變 props 來(lái)實(shí)現(xiàn)。但是 key 是每一個(gè)組件都有個(gè)屬性，因此你可以在任何組件上使用它，而不必關(guān)系內(nèi)部實(shí)現(xiàn)。

本文完?？煸谀愕拇a中試試這些小hack吧！