欧美黄色精品,欧美freesex黑人又粗又大,俺去俺来也www色官网cms

這是react16的內(nèi)容，并不是最新的技術(shù)，但是用很少被討論，直到通過(guò)文檔發(fā)現(xiàn)其實(shí)也是很有用的一部分內(nèi)容，還是總結(jié)一下～

react中的未捕獲的 js 錯(cuò)誤會(huì)導(dǎo)致整個(gè)應(yīng)用的崩潰，和整個(gè)組件樹(shù)的卸載。從 react16 開(kāi)始就是這樣。但是同時(shí)react也引入了一個(gè)新的概念——錯(cuò)誤邊界。

定義，是什么

錯(cuò)誤邊界仍然是一種組件，可以捕獲（打印或者其他方式）處理該組件的子組件樹(shù)任何位置的 javascript 錯(cuò)誤，并根據(jù)需要渲染出備用ui.

工作方式類似于try-catch，但是錯(cuò)誤邊界只用于 react 組件。

只有class組件能夠成為錯(cuò)誤邊界組件。錯(cuò)誤邊界僅可以捕獲子組件的錯(cuò)誤，無(wú)法捕獲自身的錯(cuò)誤。

錯(cuò)誤邊界會(huì)在渲染期間，生命周期和整個(gè)組件樹(shù)的構(gòu)造函數(shù)中捕獲錯(cuò)誤。如果沒(méi)有錯(cuò)誤邊界處理，渲染的還是崩潰的子組件樹(shù)，這顯然不是我們想要的。

通過(guò)一個(gè)例子來(lái)逐步演示要怎么用錯(cuò)誤邊界：

export default class ErrorTest extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<BugCounter></BugCounter>
<span>my name is dan</span>
</div>
);
}
}
// Bug 報(bào)錯(cuò)組件
class BugCounter extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
};
}
click = () => {
this.setState(({ counter }) => ({ counter: counter + 1 }));
};
render() {
if (this.state.counter === 5) {
throw new Error("crashed!");
}
return (
<div>
<h3 onClick={this.click}>{this.state.counter}</h3>
</div>
);
}
}

上面代碼的渲染結(jié)果（忽略樣式）：

React 錯(cuò)誤邊界組件的處理

點(diǎn)擊數(shù)字0，會(huì)逐步遞增。但是數(shù)字等于5的時(shí)候，組件會(huì)拋出一個(gè)error:

React 錯(cuò)誤邊界組件的處理

該error會(huì)引起整個(gè)demo的崩潰，連外部的<span>my name is dan</span>也顯示不出來(lái)了，這時(shí)還沒(méi)有添加錯(cuò)誤邊界。

生產(chǎn)模式下，會(huì)直接白屏，并在控制臺(tái)報(bào)錯(cuò)：

React 錯(cuò)誤邊界組件的處理

getderivedstatefromerror & componentdidcatch

需要一個(gè)錯(cuò)誤邊界來(lái)處理這種崩潰。如何定義一個(gè)錯(cuò)誤邊界？

定義一個(gè)組件，并實(shí)現(xiàn)static getderivedstatefromerror() 或者componentdidcatch() 生命周期方法（可以都實(shí)現(xiàn)或者選擇其一）。這個(gè)組件就會(huì)變成一個(gè)錯(cuò)誤邊界。

關(guān)于這兩個(gè)生命周期函數(shù)，可以通過(guò)鏈接查看，總結(jié)如下：

componentDidCatch(error, info)

error是拋出的錯(cuò)誤對(duì)象，而info則包含了組件引發(fā)錯(cuò)誤的棧信息。函數(shù)在提交階段被調(diào)用。是可以執(zhí)行副作用的。

static getDerivedStateFromError(error)

在子組件拋出錯(cuò)誤后調(diào)用，會(huì)將拋出的錯(cuò)誤作為參數(shù)。需要返回一個(gè)值，以更新state。該函數(shù)在渲染階段調(diào)用，不允許出現(xiàn)副作用。如果在捕獲錯(cuò)誤后需要執(zhí)行副作用操作，應(yīng)該在componentdidcatch中進(jìn)行。