Reactjs?錯(cuò)誤邊界優(yōu)雅處理方法demo
正文
每當(dāng)你的react應(yīng)用在任何react功能或類(lèi)組件中遇到任何javascript錯(cuò)誤時(shí),都會(huì)破壞整個(gè)應(yīng)用,這對(duì)你的終端用戶來(lái)說(shuō)是一種糟糕的體驗(yàn)。React 16 引入了錯(cuò)誤邊界 ,以擺脫你的應(yīng)用程序中的這種糟糕體驗(yàn)。有了錯(cuò)誤邊界 ,你現(xiàn)在可以優(yōu)雅地處理并讓用戶知道,每當(dāng)你的應(yīng)用程序遇到錯(cuò)誤時(shí),就會(huì)出現(xiàn)問(wèn)題。
在這篇文章中,我們將學(xué)習(xí)如何通過(guò)實(shí)現(xiàn)錯(cuò)誤邊界來(lái)處理這些錯(cuò)誤 ,并看看它們的作用。
首先,在vs code或任何其他IDE中創(chuàng)建一個(gè)新的react應(yīng)用程序,我個(gè)人更喜歡VS Code。
什么是錯(cuò)誤邊界?
錯(cuò)誤邊界也是反應(yīng)組件,它可以幫助你捕捉被錯(cuò)誤邊界包裹的組件中的錯(cuò)誤,并顯示一個(gè)回退 UI(當(dāng)捕捉到錯(cuò)誤時(shí)顯示的UI,而不是崩潰的應(yīng)用程序)。
錯(cuò)誤邊界可以捕捉
- 渲染錯(cuò)誤
- 生命周期錯(cuò)誤
- 構(gòu)造器錯(cuò)誤
錯(cuò)誤邊界不能捕捉
- 事件處理程序中的錯(cuò)誤
- 異步代碼中的錯(cuò)誤
- 服務(wù)器端渲染中的錯(cuò)誤
- 錯(cuò)誤邊界中的錯(cuò)誤 (Duhh!)
錯(cuò)誤邊界的實(shí)現(xiàn)
要使一個(gè)類(lèi)組件成為錯(cuò)誤邊界組件,你只需要定義**靜態(tài)的getDerivedStateFromError()和componentDidCatch()**生命周期方法。
讓我們創(chuàng)建一個(gè)新的類(lèi)組件并使其成為一個(gè)錯(cuò)誤邊界,讓我們滾動(dòng)
export default class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { error: null, errorInfo: null }; } componentDidCatch(error, errorInfo) { // use lifecycle to catch errors in any components below and re-render fallback UI this.setState({ error: error, errorInfo: errorInfo, }); } render() { if (this.state.errorInfo) { // Fallback UI return ( <div> <h2>Something went wrong.</h2> <details style={{ whiteSpace: "pre-wrap" }}> {this.state.error && this.state.error.toString()} <br /> {this.state.errorInfo.componentStack} </details> </div> ); } // without error render normally in happy flow return this.props.children; } }
用錯(cuò)誤邊界包住組件
現(xiàn)在我們可以用錯(cuò)誤邊界來(lái)包裝我們的整個(gè)應(yīng)用程序,或者包裝我們的子組件,以便在特定的組件上顯示后退的用戶界面,讓我們看看這個(gè)動(dòng)作吧
// Wrapping child component <ErrorBoundary> <ComponentThatThrowsError /> </ErrorBoundary>
// Wrapping our entire application <ErrorBoundary> <App /> </ErrorBoundary>
拋出一個(gè)錯(cuò)誤
讓我們在useEffect中拋出一個(gè)錯(cuò)誤,看看我們的錯(cuò)誤邊界是否能抓住。
const ComponentThatThrowsError = () => { const [counter, setCounter] = useState(0); useEffect(() => { if (counter === 5) { throw new Error("Something went wrong"); } }, [counter]); return ( <div> <p>Parent Component Counter</p> <button className="btn" onClick={() => { setCounter(counter + 1); }} > {counter} </button> </div> ); };
當(dāng)計(jì)數(shù)器的值等于5時(shí),我們就拋出了一個(gè)錯(cuò)誤。
晃動(dòng)你的叔叔
我們可以看到,一旦子組件的計(jì)數(shù)器達(dá)到5,應(yīng)用程序就會(huì)為該組件渲染回退的用戶界面,而當(dāng)主錯(cuò)誤邊界捕捉到一個(gè)錯(cuò)誤時(shí),它就會(huì)渲染出白色的屏幕,顯示出出錯(cuò)的情況。
總結(jié)
我們?cè)谶@一章中講了很多,我希望這對(duì)你來(lái)說(shuō)不算太多。你學(xué)到了如何創(chuàng)建錯(cuò)誤邊界,以及為什么和在哪里使用它們。它們?nèi)绾问鼓愕膽?yīng)用程序的體驗(yàn)更好。
以上就是Reactjs 錯(cuò)誤邊界優(yōu)雅處理方法demo的詳細(xì)內(nèi)容,更多關(guān)于Reactjs 錯(cuò)誤邊界的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
使用 React hooks 實(shí)現(xiàn)類(lèi)所有生命周期
react 自 16.8 開(kāi)始,引入了 Hooks 概念,使得函數(shù)組件中也可以擁有自己的狀態(tài),并且可以模擬對(duì)應(yīng)的生命周期,這篇文章主要介紹了使用 React hooks 怎么實(shí)現(xiàn)類(lèi)里面的所有生命周期,需要的朋友可以參考下2023-02-02React實(shí)現(xiàn)評(píng)論的添加和刪除
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)評(píng)論的添加和刪除,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10使用Ant Design Anchor組件的一個(gè)坑及解決
這篇文章主要介紹了使用Ant Design Anchor組件的一個(gè)坑及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04react項(xiàng)目自行配置熱更新的實(shí)現(xiàn)
本文主要介紹了react項(xiàng)目自行配置熱更新的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11React+Ant Design開(kāi)發(fā)環(huán)境搭建的實(shí)現(xiàn)步驟
這篇文章主要介紹了React+Ant Design開(kāi)發(fā)環(huán)境搭建的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04Express+React+Antd實(shí)現(xiàn)上傳功能(前端和后端)
這篇文章主要介紹了Express+React+Antd實(shí)現(xiàn)上傳功能(前端和后端),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04React實(shí)現(xiàn)前端選區(qū)的示例代碼
本文主要介紹了React實(shí)現(xiàn)前端選區(qū)的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05