React Native 中如何使用 ErrorBoundary？

推荐答案

在 React Native 中，ErrorBoundary 是一个用于捕获子组件树中 JavaScript 错误的组件。它类似于 React 中的 ErrorBoundary，可以捕获渲染期间、生命周期方法以及构造函数中的错误。

// www.javascriptcn.com code example
import React from 'react';

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

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    console.error('Error caught by ErrorBoundary:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <Text>Something went wrong.</Text>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

使用 ErrorBoundary 包裹可能出错的组件：

// www.javascriptcn.com code example
import React from 'react';
import { View, Text } from 'react-native';
import ErrorBoundary from './ErrorBoundary';

const App = () => {
  return (
    <ErrorBoundary>
      <View>
        <Text>This is a safe component</Text>
        <BuggyComponent />
      </View>
    </ErrorBoundary>
  );
};

const BuggyComponent = () => {
  throw new Error('This is a buggy component');
  return <Text>This will not render</Text>;
};

export default App;

本题详细解读

1. ErrorBoundary 的作用

ErrorBoundary 是 React 16 引入的一个特性，用于捕获子组件树中的 JavaScript 错误，并显示降级后的 UI，而不是让整个应用崩溃。在 React Native 中，ErrorBoundary 的作用与 React 中相同。

2. ErrorBoundary 的实现

ErrorBoundary 是一个类组件，它通过实现 getDerivedStateFromError 和 componentDidCatch 两个生命周期方法来捕获错误。

• getDerivedStateFromError: 这是一个静态方法，用于在错误发生时更新组件的状态。它接收错误对象作为参数，并返回一个新的状态对象。通常，这个方法用于设置一个标志位，表示发生了错误。

• componentDidCatch: 这个方法用于处理错误，比如记录错误日志或上报错误信息。它接收两个参数：错误对象和错误信息对象。

3. 使用 ErrorBoundary

在 React Native 中，你可以将 ErrorBoundary 组件包裹在任何可能出错的组件周围。如果被包裹的组件抛出错误，ErrorBoundary 会捕获这个错误，并显示降级后的 UI。

4. 注意事项

• ErrorBoundary 只能捕获子组件树中的错误，不能捕获事件处理器、异步代码（如 setTimeout 或 Promise）以及服务端渲染中的错误。
• ErrorBoundary 应该谨慎使用，避免过度依赖它来处理所有错误。通常，它用于捕获那些无法预料的错误，而不是用来替代常规的错误处理逻辑。