javascript - 基于 Hook 的组件慢渲染 vs 基于类的组件

Question

plotly我有一个绘图工具，可以通过用于操作绘图的选项绘制至少 20000 个数据点（例如：更改 X 轴单位、Y 轴单位、更改绘图标题的名称等）。这些选项可能会改变绘图的外观，因此有一个函数plotGraph()在组件的每次重新渲染时调用。用户可以选择大约 10 种不同的选项来操纵情节。

一位前同事使用基于类的组件编写了此代码，并且运行良好。他为每个不同的选项存储状态，并plotGraph()在每次重新渲染时调用该函数。类的一个片段是这样的：

class MyPlotComponent extends Component {
    state = {
        option1: '',
        option2: '',
        option3: '',
        ...more state for the other options
    }
    handleOption1Change = () => {};
    handleOption2Change = () => {};
    plotGraph = () => {}
    // ...
    render() {
        const myPlotData = this.plotGraph(...args);
        return (
            <Plot data={myPlotData />
        )
    }
}

为了实践/乐趣，我决定尝试使用钩子将基于类的组件转换为组件。我能够这样做，但我注意到性能下降非常大。对于我们的其中一个图，渲染和绘制图形可能需要大约 3-4 秒，但使用钩子大约需要 15 秒。我的钩子组件看起来像这样：

const MyPlotComponent = () => {
    const [option1, setOption1] = useState('');
    const [option2, setOption2] = useState('');
    // ... the rest of the options
    
    const handleOption1Change = () => {};
    const handleOption2Change = () => {};
    const plotGraph = () => {} 
    // ... other handlers

    // for hooks, i decided to move plotGraph into a utils file
    const myPlotData = plotGraph();
    return (
        <Plot data={myPlotData} />
    )
}

我正在查看有关 StackOverflow 的其他文章，许多人说对于功能组件，每次重新渲染都会创建组件中的函数，我想知道这是否可能是我的实现速度慢很多的原因，因为有这么多的处理程序（10+ )? 另外，我认为值得注意的是，该plotGraph()功能是一个非常昂贵的功能。它至少遍历数据集 2 次，并且还必须进行其他计算。

我对我能做些什么来帮助提高我的实现性能有点茫然；我很确定有一种方法可以优化我的实现，因为与基于类的组件相比，现在推荐使用挂钩。任何帮助，将不胜感激！

如果需要进一步澄清，请告诉我。

标签： javascriptnode.jsreactjsreact-hooksplotly