面试题：React错误边界组件在复杂组件树中的应用

1. 错误边界组件的作用

错误边界是React组件，它可以捕获其子孙组件树任何位置抛出的JavaScript错误，并记录这些错误，同时展示一个备用UI，而不是让整个应用崩溃。

2. 部署原则

高层级部署：在组件树尽可能高的层级设置错误边界，这样可以捕获更多组件的错误。例如，在应用的根组件附近设置错误边界，能防止整个应用因深层组件错误而崩溃。
局部部署：对于特定部分的组件树，如果希望对某些组件的错误有单独的处理逻辑，可以在这些组件的父级设置错误边界。这样可以对不同功能模块的错误进行差异化处理，提升用户体验。

3. 不同层级组件设置错误边界示例

高层级错误边界

假设应用的根组件是 App，我们可以创建一个错误边界组件 ErrorBoundary 并在 App 外层包裹它。

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

    componentDidCatch(error, errorInfo) {
        // 记录错误，可发送到日志服务器
        console.log('Error caught:', error, errorInfo);
        this.setState({ hasError: true });
    }

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

function App() {
    return (
        <div>
            {/* 其他组件 */}
        </div>
    );
}

export default function Root() {
    return (
        <ErrorBoundary>
            <App />
        </ErrorBoundary>
    );
}

局部错误边界

假设有一个评论列表组件 CommentList，它内部可能包含会抛出错误的 Comment 组件，我们可以在 CommentList 组件内为 Comment 组件设置局部错误边界。

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

    componentDidCatch(error, errorInfo) {
        console.log('Comment error caught:', error, errorInfo);
        this.setState({ hasError: true });
    }

    render() {
        if (this.state.hasError) {
            return <div>Comment error.</div>;
        }
        return this.props.children;
    }
}

function Comment({ text }) {
    // 假设这里可能会抛出错误
    if (text.length > 100) {
        throw new Error('Comment too long');
    }
    return <p>{text}</p>;
}

function CommentList() {
    const comments = ['short comment', 'a very very long comment that might cause error'];
    return (
        <div>
            {comments.map((text, index) => (
                <CommentErrorBoundary key={index}>
                    <Comment text={text} />
                </CommentErrorBoundary>
            ))}
        </div>
    );
}

星途面试题库