面试题：React 第三方库中 componentDidMount 方法的应用场景

应用场景及示例与思路

初始化图表：
- 场景：在组件首次渲染到 DOM 后，需要创建并初始化图表实例。
- 示例：

import React, { Component } from'react';
import ReactEcharts from 'echarts - for - react';

class ChartComponent extends Component {
    componentDidMount() {
        const option = {
            title: {
                text: '示例图表'
            },
            tooltip: {},
            xAxis: {
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20, 5]
            }]
        };
        this.setState({ option });
    }

    render() {
        return (
            <ReactEcharts
                option={this.state.option}
                style={{ height: '400px', width: '100%' }}
            />
        );
    }
}

- **实现思路**：在 `componentDidMount` 中定义图表的配置项 `option`，然后通过 `setState` 更新组件状态，传递给 `ReactEcharts` 组件，触发图表渲染。由于 `componentDidMount` 是在组件挂载到 DOM 后调用，此时可以确保图表有合适的 DOM 容器进行渲染。

2. 异步获取数据并更新图表： - 场景：图表数据需要从服务器获取，在组件挂载后发起请求，拿到数据后更新图表。 - 示例：

import React, { Component } from'react';
import ReactEcharts from 'echarts - for - react';
import axios from 'axios';

class ChartComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            option: {}
        };
    }

    async componentDidMount() {
        try {
            const response = await axios.get('/api/chartData');
            const data = response.data;
            const option = {
                title: {
                    text: '从 API 获取数据的图表'
                },
                tooltip: {},
                xAxis: {
                    data: data.map(item => item.date)
                },
                yAxis: {},
                series: [{
                    name: '数值',
                    type: 'line',
                    data: data.map(item => item.value)
                }]
            };
            this.setState({ option });
        } catch (error) {
            console.error('获取数据错误:', error);
        }
    }

    render() {
        return (
            <ReactEcharts
                option={this.state.option}
                style={{ height: '400px', width: '100%' }}
            />
        );
    }
}

- **实现思路**：在 `componentDidMount` 中使用 `axios` 等库发起异步请求获取数据。获取到数据后，根据数据构建图表的配置项 `option`，再通过 `setState` 更新组件状态，从而更新图表展示的数据。这样可以保证在组件挂载完成，DOM 可用后进行数据请求和图表更新操作。

星途面试题库

面试题：React 第三方库中 componentDidMount 方法的应用场景

知识考点

面试题答案

应用场景及示例与思路