Reactjs?錯誤邊界優(yōu)雅處理方法demo
正文
每當(dāng)你的react應(yīng)用在任何react功能或類組件中遇到任何javascript錯誤時,都會破壞整個應(yīng)用,這對你的終端用戶來說是一種糟糕的體驗。React 16 引入了錯誤邊界 ,以擺脫你的應(yīng)用程序中的這種糟糕體驗。有了錯誤邊界 ,你現(xiàn)在可以優(yōu)雅地處理并讓用戶知道,每當(dāng)你的應(yīng)用程序遇到錯誤時,就會出現(xiàn)問題。
在這篇文章中,我們將學(xué)習(xí)如何通過實現(xiàn)錯誤邊界來處理這些錯誤 ,并看看它們的作用。
首先,在vs code或任何其他IDE中創(chuàng)建一個新的react應(yīng)用程序,我個人更喜歡VS Code。
什么是錯誤邊界?
錯誤邊界也是反應(yīng)組件,它可以幫助你捕捉被錯誤邊界包裹的組件中的錯誤,并顯示一個回退 UI(當(dāng)捕捉到錯誤時顯示的UI,而不是崩潰的應(yīng)用程序)。
錯誤邊界可以捕捉
- 渲染錯誤
- 生命周期錯誤
- 構(gòu)造器錯誤
錯誤邊界不能捕捉
- 事件處理程序中的錯誤
- 異步代碼中的錯誤
- 服務(wù)器端渲染中的錯誤
- 錯誤邊界中的錯誤 (Duhh!)
錯誤邊界的實現(xiàn)
要使一個類組件成為錯誤邊界組件,你只需要定義**靜態(tài)的getDerivedStateFromError()和componentDidCatch()**生命周期方法。
讓我們創(chuà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; } }
用錯誤邊界包住組件
現(xiàn)在我們可以用錯誤邊界來包裝我們的整個應(yīng)用程序,或者包裝我們的子組件,以便在特定的組件上顯示后退的用戶界面,讓我們看看這個動作吧
// Wrapping child component <ErrorBoundary> <ComponentThatThrowsError /> </ErrorBoundary>
// Wrapping our entire application <ErrorBoundary> <App /> </ErrorBoundary>
拋出一個錯誤
讓我們在useEffect中拋出一個錯誤,看看我們的錯誤邊界是否能抓住。
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)計數(shù)器的值等于5時,我們就拋出了一個錯誤。
晃動你的叔叔
我們可以看到,一旦子組件的計數(shù)器達(dá)到5,應(yīng)用程序就會為該組件渲染回退的用戶界面,而當(dāng)主錯誤邊界捕捉到一個錯誤時,它就會渲染出白色的屏幕,顯示出出錯的情況。
總結(jié)
我們在這一章中講了很多,我希望這對你來說不算太多。你學(xué)到了如何創(chuàng)建錯誤邊界,以及為什么和在哪里使用它們。它們?nèi)绾问鼓愕膽?yīng)用程序的體驗更好。
以上就是Reactjs 錯誤邊界優(yōu)雅處理方法demo的詳細(xì)內(nèi)容,更多關(guān)于Reactjs 錯誤邊界的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
使用 React hooks 實現(xiàn)類所有生命周期
react 自 16.8 開始,引入了 Hooks 概念,使得函數(shù)組件中也可以擁有自己的狀態(tài),并且可以模擬對應(yīng)的生命周期,這篇文章主要介紹了使用 React hooks 怎么實現(xiàn)類里面的所有生命周期,需要的朋友可以參考下2023-02-02React+Ant Design開發(fā)環(huán)境搭建的實現(xiàn)步驟
這篇文章主要介紹了React+Ant Design開發(fā)環(huán)境搭建的實現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04Express+React+Antd實現(xiàn)上傳功能(前端和后端)
這篇文章主要介紹了Express+React+Antd實現(xiàn)上傳功能(前端和后端),本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04