0

我使用 react hooks 和 react-plotly 来渲染一个非常简约的散点图，每 200 个点有 100 条轨迹。

正在流式传输的全局状态使用“hookstate”保存

根据这个例子应该很容易更新：https ://codepen.io/rhamner/pen/JBOExK?editors=0010

但不是反应情节。它完全使我的浏览器无响应。

我试图检查组件本身有多少次重新渲染，是的，组件在每次更新时都会渲染。然而，我只想更新情节组件。

  // This function watches for updates and changes the _data variable where the traces are stored.
  useExplicit(() => {

        const s:any = series.get()

        s.forEach(({n, metrics}:any) => metrics.forEach(({id, data}:any) => {
     
             for(let i = 0; i < _data.length-1; i++){
     
                 if(_data[i].name === n+'-'+id){
                     if(+new Date(_data[i].x[_data[i].x.length-1]) < data[0][0]){
                         // console.log('update', n, id)
                         _data[i].x = [...data].reverse().map(v => new Date(v[0]));
                         _data[i].y = [...data].reverse().map(v => v[1][0]);
                         $_revision($ => $+1)
                     }
                 }
                 
             }
         }))
         
         console.log(_revision)
         
     }, [series.get()])


    return <Box style={cls.root} ref={ref} p={2}>
            <h1>{i}</h1>
            {i++} <<<<<<<<<<< THIS NUMBER INCREASES ON EVERY STATE CHANGE.
            <Plot
            style={cls.plot} 
            config={_config}
            layout={_layout}
            data={_data}
            // onInitialized={(figure:any) => $_state(figure)}
            // onUpdate={(figure:any) => $_state(figure)}
            revision={_revision}
        />
    </Box>
4

0 回答 0