面试题：React错误边界在不同渲染阶段的错误捕获差异

渲染阶段、生命周期函数及构造函数中错误捕获机制的不同

渲染阶段：
- 机制：React 错误边界在渲染阶段捕获子组件抛出的错误。当子组件在 render 方法中抛出错误时，错误边界的 componentDidCatch 方法会被触发。这使得错误边界可以捕获并处理这些错误，避免错误导致整个应用崩溃。
- 与其他阶段不同之处：渲染阶段主要关注 UI 渲染过程中出现的错误，比如在 render 方法中由于数据类型错误导致的渲染失败等。而生命周期函数和构造函数有其自身特定的执行时机和作用，捕获的错误场景有所不同。
生命周期函数：
- 机制：错误边界可以捕获子组件在生命周期函数（如 componentDidMount、componentDidUpdate 等）中抛出的错误。同样，当子组件的这些生命周期函数抛出错误时，错误边界的 componentDidCatch 方法会被调用。
- 与其他阶段不同之处：生命周期函数中的错误通常与组件的挂载、更新等过程相关。例如在 componentDidMount 中进行 DOM 操作或者发起网络请求时可能出现错误，这与渲染阶段单纯的 UI 渲染错误场景不同。构造函数一般用于初始化状态等，与生命周期函数执行时机和目的也不同。
构造函数：
- 机制：错误边界无法捕获子组件构造函数中抛出的错误。构造函数是在组件实例化时调用，在 React 中构造函数的错误不会冒泡到错误边界，而是直接导致整个应用崩溃。这是因为构造函数在组件初始化早期执行，此时 React 的错误处理机制还未完全建立。
- 与其他阶段不同之处：与渲染阶段和生命周期函数不同，构造函数中的错误不能被错误边界捕获，这就要求在构造函数中编写代码时要特别小心，尽量避免可能抛出错误的操作，或者提前进行错误处理。

实际场景中不同捕获情况的例子

渲染阶段错误例子：
- 场景：假设我们有一个 UserProfile 组件，它接收一个 user 对象作为属性来渲染用户信息。如果在 render 方法中尝试访问 user.name，但传入的 user 是 null，就会抛出错误。
- 代码示例：

import React, { Component } from'react';

class UserProfile extends Component {
    render() {
        const { user } = this.props;
        return <div>{user.name}</div>; // user 为 null 时会抛出错误
    }
}

class ErrorBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }
    componentDidCatch(error, errorInfo) {
        console.log('捕获到错误:', error, errorInfo);
        this.setState({ hasError: true });
    }
    render() {
        if (this.state.hasError) {
            return <div>发生错误，无法渲染用户信息</div>;
        }
        return this.props.children;
    }
}

function App() {
    return (
        <ErrorBoundary>
            <UserProfile user={null} />
        </ErrorBoundary>
    );
}

export default App;

生命周期函数错误例子：
- 场景：在 PhotoGallery 组件的 componentDidMount 中，尝试获取一些图片资源，可能由于网络问题导致请求失败。
- 代码示例：

import React, { Component } from'react';

class PhotoGallery extends Component {
    constructor(props) {
        super(props);
        this.state = { photos: [] };
    }
    componentDidMount() {
        fetch('https://example.com/api/photos')
          .then(response => {
                if (!response.ok) {
                    throw new Error('网络请求失败');
                }
                return response.json();
            })
          .then(data => this.setState({ photos: data }))
          .catch(error => {
                throw error; // 抛出错误，会被错误边界捕获
            });
    }
    render() {
        const { photos } = this.state;
        return (
            <div>
                {photos.map(photo => (
                    <img key={photo.id} src={photo.url} alt={photo.title} />
                ))}
            </div>
        );
    }
}

class ErrorBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }
    componentDidCatch(error, errorInfo) {
        console.log('捕获到错误:', error, errorInfo);
        this.setState({ hasError: true });
    }
    render() {
        if (this.state.hasError) {
            return <div>发生错误，无法加载图片</div>;
        }
        return this.props.children;
    }
}

function App() {
    return (
        <ErrorBoundary>
            <PhotoGallery />
        </ErrorBoundary>
    );
}

export default App;

构造函数错误例子：
- 场景：在 SettingsComponent 组件的构造函数中，假设需要对一些配置数据进行解析，如果数据格式不正确，就会抛出错误。但这个错误不会被错误边界捕获。
- 代码示例：

import React, { Component } from'react';

class SettingsComponent extends Component {
    constructor(props) {
        super(props);
        const config = props.config;
        if (typeof config!=='string') {
            throw new Error('配置数据格式不正确');
        }
        this.state = { parsedConfig: JSON.parse(config) };
    }
    render() {
        const { parsedConfig } = this.state;
        return <div>{parsedConfig}</div>;
    }
}

class ErrorBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }
    componentDidCatch(error, errorInfo) {
        console.log('捕获到错误:', error, errorInfo);
        this.setState({ hasError: true });
    }
    render() {
        if (this.state.hasError) {
            return <div>发生错误</div>;
        }
        return this.props.children;
    }
}

function App() {
    return (
        <ErrorBoundary>
            <SettingsComponent config={123} /> {/* 传入错误格式的 config */}
        </ErrorBoundary>
    );
}

export default App;

在上述例子中，SettingsComponent 构造函数中抛出的错误会导致应用崩溃，而不会被 ErrorBoundary 捕获。

面试题：React错误边界在不同渲染阶段的错误捕获差异

知识考点

面试题答案

渲染阶段、生命周期函数及构造函数中错误捕获机制的不同

实际场景中不同捕获情况的例子