人人干人人操人人模,亚洲五月丁香,色五月在线视频,我想看外国操逼大片,少妇三角的黑森林的淫,奇米影视一本道,中文字幕av一区二区三区,欧美久久久久久久

嗨，我是勾勾。

在 react 應(yīng)用中，如果某一個(gè)組件發(fā)生錯(cuò)誤，會(huì)導(dǎo)致整個(gè)應(yīng)用程序中斷，體驗(yàn)極差。因此，react 提出了錯(cuò)誤邊界這個(gè)設(shè)計(jì)理念。如果后代組件發(fā)生錯(cuò)誤，它可以捕獲組件渲染時(shí)的錯(cuò)誤，改為顯示我們提前設(shè)計(jì)好的備用界面。

錯(cuò)誤邊界核心

錯(cuò)誤邊界主要涉及兩個(gè)生命周期函數(shù)，分別是 getDerivedStateFromError 和 componentDidCatch。

getDerivedStateFromError() 這個(gè)方法是類組件的靜態(tài)方法。當(dāng)后代組件發(fā)生錯(cuò)誤時(shí)，會(huì)觸發(fā)這個(gè)生命周期函數(shù)，它將拋出的錯(cuò)誤作為參數(shù)，并返回一個(gè)對(duì)象，這個(gè)對(duì)象要用以更新 state 中的值。


    static getDerivedStateFromError(error) {        // 更新 state 使下一次渲染可以顯降級(jí) UI        return { hasError: true };    }

componentDidCatch() 當(dāng)后代組件出現(xiàn)錯(cuò)誤的時(shí)候，會(huì)自動(dòng)觸發(fā)這個(gè)生命周期函數(shù)的調(diào)用。該方法的參數(shù)就是錯(cuò)誤對(duì)象。

componentDidCatch(err) {    console.log("錯(cuò)誤邊界")}

錯(cuò)誤邊界應(yīng)用

接下來(lái)我們舉個(gè)錯(cuò)誤邊界的例子。

我們?cè)陧?xiàng)目目錄下創(chuàng)建一個(gè) Error.js 的文件，里面的內(nèi)容如下：


//Error.jsimport React from "react"import App from "./App.js"
class Error extends React.Component {    constructor(props) {        super()        this.state = { hasError: false };    }    static getDerivedStateFromError(error) {        // 更新 state 使下一次渲染可以顯降級(jí) UI        return { hasError: true };    }    componentDidCatch(err) {        console.log("錯(cuò)誤邊界")    }    render() {        if(this.state.hasError) {            return <div><h3>組件發(fā)生了錯(cuò)誤</h3></div>        }        return <App></App>      }}export default Error

這里面大家需要注意，我們把 App 組件當(dāng)作錯(cuò)誤邊界的父組件了。同時(shí)要強(qiáng)調(diào)一下，錯(cuò)誤邊界的本質(zhì)是一個(gè)組件。它的目的就是把所有的組件都控制在自己的范圍內(nèi)。當(dāng)有組件出錯(cuò)，整個(gè)程序的執(zhí)行是正常的。唯有把相關(guān)的組件渲染到界面中，給用戶更直白的闡述，用戶才能明白，畢竟用戶是讀不懂代碼的。

現(xiàn)在我們我們書(shū)寫(xiě)一個(gè) App 組件：

//App.jsimport React,{ Component,useState,useEffect } from "react"import ReactDOM from 'react-dom';
class App extends Component {    constructor(){        super()    }    render() {        throw Error("cuowubianjie")        return (<div>hello</div>)    }}export default App;