react-plotly.js动态绑定data数组时数据点变更触发异常重绘求助

问题根本原因 #

react-plotly.js 会对传入的所有prop做浅比较，只要prop的引用地址发生变化，就会触发图表重绘。你当前代码中plotlyData、layout、config每次组件渲染都会生成全新的对象/数组，哪怕内容没有实际变化，引用地址变化也会导致不必要的重绘。
你写死data={[plotlyData[0],plotlyData[1]]}不会触发重绘的核心是测试场景下该数组的生成逻辑仅在对应依赖变化时执行，引用相对稳定，但不具备通用性。

可行解决方案 #

1. 缓存所有动态生成的prop，保证引用稳定 #

用useMemo缓存plotlyData、config，把固定不变的layout提到组件外部，避免每次渲染生成新对象。

2. 正确使用revision属性控制更新时机 #

react-plotly.js 提供的revision属性优先级最高，只有revision值变化时才会触发图表更新，你可以将其绑定为数据的唯一标识，只有数据真正需要更新时才修改值。

修改后完整代码 #

import { React, useState, useMemo } from "react";
import Plot from "react-plotly.js";
import { useQuery } from "react-query";
import axios from "axios";

// 固定不变的layout提至组件外部，保证引用永远不变
const DEFAULT_LAYOUT = {
    yaxis: { range: [0, 1] },
    xaxis: { range: [0, 5] },
    autoSize: "true",
    title: "Patient Comparison",
};

const PlotlyGraph = (props) => {
    const [plot, setPlot] = useState([]);
    const { datasets } = props;

    const QueryUuid = useMemo(() => {
        return datasets.map((d) => `${d.age}-${d.kmax}-${d.frontK}-${d.pachymetry}`).join("-");
    }, [datasets]);

    const { error, isLoading, data } = useQuery(
        `data-${QueryUuid}`,
        () =>
            axios.post("/api/calculate_cxl", {
                age_baseline: datasets.map((d) => d.age),
                kmax: datasets.map((d) => d.kmax),
                front_k1: datasets.map((d) => d.frontK),
                tpt2: datasets.map((d) => d.pachymetry),
                color: datasets.map((d) => d.color),
            })
    );

    // 用useMemo缓存plotlyData，仅当依赖变化时才重新生成
    const plotlyData = useMemo(() => {
        if (error !== null || isLoading === true) {
            return [];
        }
        return data.data.map((d, i) => {
            return {
                x: d.x,
                y: d.y,
                type: "scatter",
                mode: "lines",
                marker: { color: datasets[i].color },
                line: {
                    width: 3,
                },
                name: `Patient ${i + 1}`,
                showlegend: true,
            };
        });
    }, [error, isLoading, data, datasets]);

    // 用useMemo缓存config，无依赖的话也可以提至组件外部
    const config = useMemo(() => {
        return {
            editable: false,
            scrollZoom: true,
            displayModeBar: true,
            displaylogo: false,
        };
    }, []);

    return (
        <>
            <Plot
                data={plotlyData}
                layout={DEFAULT_LAYOUT}
                style={{ width: "100%", height: " 700px" }}
                useResizeHandler={true}
                config={config}
                // revision绑定为数据唯一标识，仅当数据请求参数变化时才更新图表
                revision={QueryUuid}
            />
        </>
    );
};

export default PlotlyGraph;

内容的提问来源于stack exchange，提问作者Ayo D Adesanya