面试题：React中componentDidMount与DOM操作及性能优化

实现思路
- 使用useEffect钩子在组件挂载后执行操作。useEffect的第二个参数为空数组[]，这样可以确保只在组件挂载时运行一次，避免因依赖变化导致不必要的重渲染。
- 通过ref来获取图表对应的DOM元素。这样可以直接操作DOM进行样式调整和初始化，而不是通过React的状态变化触发重渲染来更新样式。
关键代码片段

import React, { useEffect, useRef } from'react';

const ComplexChartComponent = () => {
    const chartRef = useRef(null);

    useEffect(() => {
        if (chartRef.current) {
            // 进行样式调整
            chartRef.current.style.color = 'blue';
            // 进行初始化操作，例如初始化图表库
            // 假设这里使用Chart.js进行图表初始化
            // const ctx = chartRef.current.getContext('2d');
            // new Chart(ctx, {
            //     type: 'bar',
            //     data: {
            //         labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            //         datasets: [{
            //             label: '# of Votes',
            //             data: [12, 19, 3, 5, 2, 3],
            //             backgroundColor: [
            //                'rgba(255, 99, 132, 0.2)',
            //                'rgba(54, 162, 235, 0.2)',
            //                'rgba(255, 206, 86, 0.2)',
            //                'rgba(75, 192, 192, 0.2)',
            //                'rgba(153, 102, 255, 0.2)',
            //                'rgba(255, 159, 64, 0.2)'
            //             ],
            //             borderColor: [
            //                 'rgba(255, 99, 132, 1)',
            //                 'rgba(54, 162, 235, 1)',
            //                 'rgba(255, 206, 86, 1)',
            //                 'rgba(75, 192, 192, 1)',
            //                 'rgba(153, 102, 255, 1)',
            //                 'rgba(255, 159, 64, 1)'
            //             ],
            //             borderWidth: 1
            //         }]
            //     },
            //     options: {
            //         scales: {
            //             y: {
            //                 beginAtZero: true
            //             }
            //         }
            //     }
            // });
        }
    }, []);

    return <canvas ref={chartRef} />;
};

export default ComplexChartComponent;

星途面试题库

面试题：React中componentDidMount与DOM操作及性能优化

知识考点

面试题答案