Mate60手機殼曝光 致敬自己的經典設計
8月3日消息，今天下午博主數碼閑聊站帶來了華為Mate60的第三方手機殼圖，可以讓我們在真機發布之前看看這款華為全新旗艦的大致輪廓。從曝光的圖片看，Mate 60背后攝像頭面積依然
在構建應用時，錯誤是不可避免的。即使采用最佳的代碼實踐，運行時也可能會出現意外錯誤，導致應用崩潰。因此，處理錯誤是非常重要的。本文就來看看如何在 React 中捕獲和處理錯誤，以及更強大的 React 錯誤處理方式！
那為什么要在 React 中捕獲錯誤呢？因為從 React 16 開始，React 生命周期中的錯誤如果未被停止，整個應用就會自行卸載，導致崩潰。在此之前，即使組件中存在一些小錯誤，它也會保留在屏幕上，但是現在，UI中某些無關緊要的部分，甚至是無法控制的某些第三方庫中的未捕獲錯誤，都可能導致頁面崩潰，出現白屏的現象，影響用戶體驗。所以，捕獲并處理 React 中的錯誤至關重要。
在JavaScript中，我們可以使用 try...catch 來捕獲錯誤，例如：
const fetchData = async () => { try { return await fetch("https://some-url-that-might-fail.com"); } catch (error) { console.error(error); return error; }};try...catch僅適用于命令式代碼，例如數據獲取；而不是適用于聲明式代碼，例如在組件中編寫的 JSX 就是聲明式代碼。那該如何在 React 中捕獲錯誤呢？幸運的是，在 React 16 中，引入了一個新概念：React Error Boundary。下面來看一下它是什么，以及如何使用。
React Error Boundary （錯誤邊界）是 React 應用中錯誤處理的一種方式。它是一個 React 組件，可以捕獲子組件樹中任何位置的 JavaScript 錯誤，并記錄這些錯誤，顯示一個備選 UI，而不是一個崩潰的組件樹（白屏）。它們就像一個 JavaScript 的 catch {} 塊，但是只針對組件。
在錯誤邊界引入之前，組件內部的錯誤會不斷傳播并最終導致白屏或錯誤的 UI，影響用戶體驗。但是，使用錯誤邊界，這些未處理的錯誤可以被有效地包含和管理。
我們可以在整個應用范圍內設置錯誤邊界，也可以在各個組件上進行更細粒度的控制。需要注意的是，錯誤邊界只會捕獲渲染時、生命周期方法和構造函數中的錯誤，但不會捕獲以下錯誤：
錯誤邊界是在 React v16 中引入的，要使用錯誤邊界，需要定義一個類組件，并添加以下生命周期方法之一或兩個：
下面來看一個 ErrorBoundary 類組件的例子，它實現了 getDerivedStateFromError() 和 componentDidCatch() 生命周期方法：
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // 更新 state，下一次渲染將展示備選 UI。 return { hasError: true }; } componentDidCatch(error, errorInfo) { console.log(error, errorInfo); } render() { if (this.state.hasError) { // 可以渲染任意自定義的備選 UI return <h1>出錯啦！</h1>; } return this.props.children; }}// 在組件中使用class App extends React.Component { render() { return ( <ErrorBoundary> <MyComponent /> </ErrorBoundary> ); }}這里定義了一個名為 ErrorBoundary 的錯誤邊界組件。它的構造函數初始化了狀態對象，并設置 hasError 屬性為 false，表示當前沒有發生錯誤。
在 render() 方法中，根據 hasError 的值來決定渲染原始子組件還是備選的 UI。如果 hasError 為 true，則渲染 <h1>出錯啦！</h1>，否則渲染原始子組件。在組件中使用錯誤邊界時，將需要進行錯誤邊界保護的組件包裹在 <ErrorBoundary> 組件中即可。
在React組件中，我們可以使用 Error Boundary 來包裹任何組件，這樣就不會因為一個小組件的崩潰，而導致整個組件崩潰，致使出現白屏。只有出現錯誤的組件處不能正常渲染，而是渲染備選 UI。也方便我們快速查找是哪個組件出了問題。
在實現 React 錯誤邊界時，可以根據實際情況使用以下三種設計模式。
這種方法涉及將單個組件包裝在錯誤邊界中。這提供了高度的細粒度，允許單獨處理每個組件中的錯誤。如果一個組件崩潰，錯誤邊界可以捕獲錯誤并阻止其向上傳播到組件樹。這意味著只有崩潰的組件受到影響，其余的應用可以繼續正常運行。
組件級錯誤邊界在有彼此隔離且不共享狀態的組件時特別有用。如果其中一個組件渲染失敗，它不會影響其他組件。然而，如果許多組件需要擁有自己的錯誤邊界，這種方法可能導致很多重復代碼。
布局級錯誤邊界位于組件樹中更高的位置，通常包裝相關組件組。當有密切相關的組件并共享一個公共狀態時，這是一個不錯的選擇。
當一個組件發生錯誤時，布局級別的錯誤邊界可以捕獲它并為整個組件組顯示一個錯誤消息或備用 UI。這可以成為處理影響應用整個部分的錯誤的一種好方法，例如側邊欄或儀表板等。
然而，布局級錯誤邊界比組件級粒度更大。一個組件的錯誤可能會影響整個組件組，即使其他組件可以正常工作。
頂層錯誤邊界位于組件樹的最頂部。它是一個通用的解決方案，可以處理應用中發生的任何錯誤。這種方法確保如果應用中的任何地方發生錯誤，都可以捕獲并進行優雅處理。
這可以防止整個應用在發生錯誤時崩潰。然而，頂層錯誤邊界是粒度最大的方法。一個錯誤可能會影響整個應用，而不僅僅是錯誤發生的組件或組件組。
上面我們提到，React Error Boundary 有一些限制，無法處理某些特殊情況。下面就介紹一個更強大的 React 錯誤處理方式：**react-error-boundary。**它是一個小型的 React 錯誤處理庫，它提供了增強的錯誤處理功能和更靈活的方法來處理 React 應用中的錯誤，使開發人員能夠創建更強大且用戶友好的錯誤處理機制。
react-error-boundary 使用了更現代化的方法，采用了 React Hooks 和函數組件，與當前 React 開發的趨勢更加一致。它使用了一個簡單的組件叫做 ErrorBoundary，可以用它來包裹潛在的容易出錯的代碼。
下面是 react-error-boundary 提供的 props：
react-error-boundary 提供的 ErrorBoundary 組件有一個叫做 fallbackRender的屬性，它接受一個函數或一個 React 元素，在捕獲到錯誤時顯示。此外，它還提供了一個 resetKeys 屬性，可以在特定 props 改變時重置組件的狀態。
react-error-boundary 的美妙之處在于避免了手動編寫類組件和處理狀態，在后臺完成了所有工作，使開發人員能夠專注于構建應用。下面來看一個在組件中使用 react-error-boundary 的例子：
import { ErrorBoundary } from 'react-error-boundary'function MyFallbackComponent({ error, resetErrorBoundary }) { return ( <div role="alert"> <p>出錯啦:</p> <pre>{error.message}</pre> <button onClick={resetErrorBoundary}>點擊重試</button> </div> )}function MyComponent() { // 可能會拋出 JavaScript 錯誤的一些組件邏輯}function App() { return ( <ErrorBoundary FallbackComponent={MyFallbackComponent} onReset={() => { // 重置應用狀態 }} resetKeys={['someKey']} > <MyComponent /> </ErrorBoundary> )}在這個例子中，當 ErrorBoundary 捕獲到錯誤時，會渲染 MyFallbackComponent。它顯示錯誤消息并提供一個按鈕來重置錯誤狀態并嘗試再次渲染該組件。onReset 屬性用于清理在拋出錯誤之前發生的副作用，而 resetKeys 屬性用于控制何時重置組件狀態。
ErrorBoundary 的onError 屬性是一個函數，每當捕獲到錯誤時都會被調用。可以使用該屬性將錯誤進行上報：
// 錯誤上報函數function logErrorToService(error, info) { // 錯誤上報邏輯... console.error("Caught an error:", error, info);}function App() { return ( <ErrorBoundary FallbackComponent={ErrorFallback} onError={logErrorToService} > <MyComponent /> </ErrorBoundary> );}react-error-boundary 最強大的功能之一是就是能夠重置錯誤邊界狀態，即清除錯誤并嘗試重新渲染組件樹。當錯誤可能是短暫的，例如由于臨時斷開連接而發生的網絡錯誤時，這是非常有用的。
可以使用提供給回退組件的 resetErrorBoundary 函數來重置錯誤邊界。例如，可以在按鈕點擊時調用此函數，允許用戶手動重試失敗的操作。
ErrorBoundary 可以接受一個 onReset 屬性，該屬性是一個函數，在錯誤狀態重置之前調用。此函數對于在錯誤后重新渲染之前執行任何清理或狀態重置操作非常有用。
resetKeys 屬性是一個值數組，當更改時，會觸發錯誤邊界的重置。當知道更改某些 props 或狀態值應該解決錯誤時，這非常有用。以下是如何使用這些屬性的例子：
import { ErrorBoundary } from 'react-error-boundary'function ErrorFallback({ error, resetErrorBoundary }) { return ( <div role="alert"> <p>出錯啦:</p> <pre>{error.message}</pre> <button onClick={resetErrorBoundary}>點擊重試</button> </div> )}function MyComponent({ someKey }) { // 可能會拋出 JS 錯誤的一些組件邏輯}function App() { const [someKey, setSomeKey] = React.useState(null) return ( <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => setSomeKey(null)} // 在這里重置應用狀態 resetKeys={[someKey]} // 當 someKey 更改時重置錯誤邊界 > <MyComponent someKey={someKey} /> </ErrorBoundary> )}在這個例子中，如果 MyComponent 中捕獲到錯誤，則渲染 ErrorFallback 組件，顯示錯誤消息和一個“點擊重試”按鈕。當點擊此按鈕時，它調用 resetErrorBoundary，觸發 onReset 函數并清除錯誤狀態，從而再次渲染 MyComponent。如果 someKey prop 更改，則錯誤邊界也會重置，提供了一種靈活的方式，根據應用程狀態的更改恢復錯誤。
react-error-boundary 還提供了一個 useErrorBoundary Hook，它是一個自定義的 React Hook，允許在函數組件的任何地方拋出錯誤。被拋出的錯誤將被最近的錯誤邊界捕獲，就像從類組件的生命周期方法或渲染函數中拋出錯誤時會被錯誤邊界捕獲一樣。
當處理異步代碼時，useErrorHandler Hook 特別有用，因為拋出的錯誤不會被組件的錯誤邊界捕獲。以下是使用 useErrorHandler 的例子：
import { useErrorHandler } from 'react-error-boundary'function MyComponent() { const handleError = useErrorHandler() async function fetchData() { try { // 獲取數據 } catch (error) { handleError(error) } } return ( ... );}function App() { return ( <ErrorBoundary FallbackComponent={ErrorFallback}> <MyComponent /> </ErrorBoundary> );}在這個例子中，MyComponent 使用 useErrorHandler 獲取一個可以用來處理錯誤的函數。∑ 函數是一個異步函數，用于獲取數據并捕獲錯誤。如果發生錯誤，它會傳遞給 handleError 函數，該函數會拋出錯誤，以便可以被 ErrorBoundary 捕獲。
useErrorHandler 提供了一種強大的方式來處理函數組件中的錯誤。它與 react-error-boundary 的 ErrorBoundary 組件無縫配合，使得在 React 中進行錯誤處理變得更加簡單明了。
react-error-boundary 包還提供了一個 withErrorBoundary HOC 的解決方案。它是一個高階組件，用于包裝將給定的組件，以捕獲該組件中的錯誤。這樣做的好處是，在不改變組件原始實現或向組件樹中添加額外 JSX 的情況下，為組件添加錯誤邊界。
import { withErrorBoundary } from 'react-error-boundary'function MyComponent() { // 組件邏輯}const MyComponentWithErrorBoundary = withErrorBoundary(MyComponent, { FallbackComponent: ErrorFallback, onError: logErrorToService, onReset: handleReset, resetKeys: ['someKey']});function App() { return <MyComponentWithErrorBoundary someKey={someKey} />}在這個例子中，使用 withErrorBoundary 將 MyComponent 包裝在一個錯誤邊界內。withErrorBoundary 的第二個參數是一個可選對象，可以在其中提供與 ErrorBoundary 組件相同的 props：FallbackComponent、onError、onReset 和 resetKeys。
這種高階組件（HOC）的方法是在不修改組件實現的情況下為組件添加錯誤邊界的一種優雅的解決方案，特別適用于無法使用 Hooks 的類組件。它展示了 react-error-boundary 在適應不同的編碼風格和 React 開發范式方面的靈活性。
看完了 react-error-boundary 的基本使用方式，我們來總結一下使用 react-error-boundary 的好處：
無論是使用類組件還是函數組件，react-error-boundary 都能滿足需求。它靈活的API包括組件、高階組件和自定義Hooks，提供了多種將錯誤處理集成到組件中的方式。此外，它支持自定義備用 UI、錯誤重置功能和錯誤報告，即使出現問題，也能確保順暢的用戶體驗。
在 React 應用中使用 react-error-boundary 可以實現更健壯的錯誤處理、更容易的調試。通過使用這個庫，可以花更少的時間管理錯誤，更多的時間專注于為構建出色的產品功能。
本文鏈接：http://www.tebozhan.com/showinfo-26-12754-0.html更強大的 React 錯誤處理方式！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 500 多個純 CSS 實現的 Loading 效果，炫酷！
下一篇： Kubernetes新手完全指南
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號