3.2　錯誤處理

React 16之前，組件在運(yùn)行期間如果執(zhí)行出錯，就會阻塞整個應(yīng)用的渲染，這時候只能刷新頁面才能恢復(fù)應(yīng)用。React 16引入了新的錯誤處理機(jī)制，默認(rèn)情況下，當(dāng)組件中拋出錯誤時，這個組件會從組件樹中卸載，從而避免整個應(yīng)用的崩潰。這種方式比起之前的處理方式有所進(jìn)步，但用戶體驗(yàn)依然不夠友好。React 16還提供了一種更加友好的錯誤處理方式——錯誤邊界（Error Boundaries）。錯誤邊界是能夠捕獲子組件的錯誤并對其做優(yōu)雅處理的組件。優(yōu)雅的處理可以是輸出錯誤日志、顯示出錯提示等，顯然這比直接卸載組件要更加友好。

定義了componentDidCatch(error, info)這個方法的組件將成為一個錯誤邊界，現(xiàn)在我們創(chuàng)建一個組件ErrorBoundary：

然后在App中使用ErrorBoundary：

點(diǎn)擊更新按鈕后，Profile接收到的屬性user為null，程序會拋出TypeError，這個錯誤會被ErrorBoundary捕獲，并在界面上顯示出錯提示。注意，使用create-react-app創(chuàng)建的項(xiàng)目，當(dāng)程序發(fā)生錯誤時，create-react-app會在頁面上創(chuàng)建一個浮層顯示錯誤信息，要觀察ErrorBoundary的正確效果，需要先關(guān)閉錯誤浮層。

本節(jié)項(xiàng)目源代碼的目錄為/chapter-03/react16-error-boundary。