React中的錯誤邊界如何工作

React的錯誤邊界是一種用于處理組件中錯誤的特殊組件。當在一個組件中發生錯誤時，錯誤邊界可以捕獲這些錯誤并展示備用UI，而不會導致整個應用崩潰。

錯誤邊界通過兩種生命周期方法來工作：componentDidCatch和static getDerivedStateFromError。

1. componentDidCatch(error, info)：當子組件拋出錯誤時，父組件中的componentDidCatch方法會被調用。這個方法接收兩個參數：error表示發生的錯誤，info包含有關錯誤的詳細信息。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    // 可以將錯誤日志上傳至服務器或其他處理
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

2. static getDerivedStateFromError(error)：該方法在渲染階段調用，用于捕獲組件樹中的錯誤，并在state中設置錯誤信息。這個方法返回一個對象來更新state，如果返回null則表示不更新state。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

使用錯誤邊界可以保護您的應用免受組件中出現的錯誤的影響，并提供更好的用戶體驗。當錯誤發生時，錯誤邊界會展示備用UI而不會導致整個應用崩潰。