错误边界的简介
- React v16 中引入了错误边界，错误边界是一个组件，该组件会捕获到渲染期间 （render） 子组件发生的错误，并有能力阻止错误继续传播；
- 默认情况下，若一个组件在 渲染期间 （render） 发生错误，会导致整个组件树全部被卸载，用户只会看到一个空白网页，这并不理想；
- 注意⚠️：某些错误，错误边界组件无法捕获：
- 自身的错误
- 异步的错误
- 事件中的错误
错误边界的原理
错误边界是 React 中一种能够捕获并处理渲染错误的机制；
- 当渲染期间发生错误时，React 会中止渲染并显示错误信息，以防止错误的影响传播到整个应用程序；
- 使用错误边界有助于提高应用程序的可靠性和稳定性，特别是在处理大型复杂应用程序时，单个组件的错误可能会导致整个应用程序的崩溃；
使用错误边界：
- 需要创建一个继承自 React.Component 的类组件，并实现
static getDerivedStateFromError(error)或者componentDidCatch(error, errorInfo)生命周期方法；- getDerivedStateFromError 静态方法在渲染子组件的过程中发生错误之后，更新页面之前运行，用于改变状态 （该函数返回一个对象，React 会将该对象的属性覆盖掉当前组件的 state）；
- componentDidCatch 实例方法在渲染子组件的过程中发生错误后运行，通常用于记录错误消息；
案例
-
示例代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js"></script> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script> <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { error: null, errorInfo: null }; } componentDidCatch(error, errorInfo) { this.setState({ error: error, errorInfo: errorInfo, }); } render() { if (this.state.errorInfo) { return ( <div> <h2>错误信息：</h2> <details style={{ whiteSpace: "pre-wrap" }}> {this.state.error && this.state.error.toString()} <br /> {this.state.errorInfo.componentStack} </details> </div> ); } return this.props.children; } } class BuggyCounter extends React.Component { constructor(props) { super(props); this.state = { counter: 0 }; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(({ counter }) => ({ counter: counter + 1, })); } render() { if (this.state.counter === 5) { throw new Error("I crashed!"); } return <h1 onClick={this.handleClick}>{this.state.counter} 点击</h1>; } } function Err() { return ( <div> <ErrorBoundary> <p> 这两个计数器位于相同的错误边界内。如果一崩溃时，错误边界将替换这两个错误。 </p> <BuggyCounter /> <BuggyCounter /> </ErrorBoundary> <hr /> <p> 这两个计数器都在各自的误差边界内。因此，如果一个崩溃，另一个不会受到影响 </p> <ErrorBoundary> <BuggyCounter /> </ErrorBoundary> <ErrorBoundary> <BuggyCounter /> </ErrorBoundary> </div> ); } ReactDOM.render(<Err />, document.getElementById("root")); </script> </body> </html> -
效果展示
打赏作者
您的打赏是我前进的动力
微信
支付宝
React✍️ Portals 传送门
上一篇
评论
