在作为属性数据传递的react中重新加载图表数据

Question

你好，我正在尝试重新加载在react组件中作为属性数据传递的数据。我使用Lightweight Charts库来制作图表。但我不认为它与库本身有什么关系，除了缺少重新加载图表数据的文档。我的特定组件的react代码如下所示：

import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import { createChart, CrosshairMode } from 'lightweight-charts';


export function ChartComponent(props) {
    const chartContainerRef = useRef();
    const chart = useRef();
    const resizeObserver = useRef();
    const candleSeriesRef = useRef();

    useEffect(() => {

      chart.current = createChart(chartContainerRef.current, {
        width: chartContainerRef.current.clientWidth,
        height: chartContainerRef.current.clientHeight,
        layout: {
          backgroundColor: '#253248',
          textColor: 'rgba(255, 255, 255, 0.9)',
        },
        grid: {
          vertLines: {
            color: '#334158',
          },
          horzLines: {
            color: '#334158',
          },
        },
        crosshair: {
          mode: CrosshairMode.Normal,
        },
        priceScale: {
          borderColor: '#485c7b',
        },
        timeScale: {
          borderColor: '#485c7b',
        },
      });
  
      candleSeriesRef.current = chart.current.addCandlestickSeries({
        upColor: '#4bffb5',
        downColor: '#ff4976',
        borderDownColor: '#ff4976',
        borderUpColor: '#4bffb5',
        wickDownColor: '#838ca1',
        wickUpColor: '#838ca1',
      });
  
      candleSeriesRef.current.setData(props.data);
    }, []);
  

  return (
    <div ref={chartContainerRef} className="chart-container" />
  );
}

组件用法：

    {/* Chart */}
    <Grid item xs={12}>
      <Paper className={fixedHeightPaper}>
        <ChartComponent data={data}/>
      </Paper>
    </Grid>

当我更改父视图中的数据时，数据没有更改。我还试着在没有最后一个括号的情况下调用组件useEffect，这样每次属性改变时都会调用它，但随后我只是在原来的图表下堆叠了新的图表。我想要实现的是从父级端更改整个数据并重新加载图表。

Answer 1

优先:了解react钩子

useEffect react钩子允许您在属性/DOM挂载/DOM卸载或状态更改时执行操作，因此

useEffect(() => {
    //this function will be called every time data prop changes
    return () => {
        //this function will be called after the above function finishes.
        //here you can do cleanup.
    }
},[props.data]) //this array is for all the dependencies/values to watch.

useEffect钩子根据依赖关系调用函数，

[]           = function will be called on mount and cleanup on unmount
[some value] = function will be called on mount and only when the value changes
no value     = function will be called on every render

Second: Solution

import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import { createChart, CrosshairMode } from 'lightweight-charts';


export function ChartComponent(props) {
    const chartContainerRef = useRef();
    const chart = useRef();
    const resizeObserver = useRef();
    const candleSeriesRef = useRef();

    useEffect(() => {

      chart.current = createChart(chartContainerRef.current, {
        width: chartContainerRef.current.clientWidth,
        height: chartContainerRef.current.clientHeight,
        layout: {
          backgroundColor: '#253248',
          textColor: 'rgba(255, 255, 255, 0.9)',
        },
        grid: {
          vertLines: {
            color: '#334158',
          },
          horzLines: {
            color: '#334158',
          },
        },
        crosshair: {
          mode: CrosshairMode.Normal,
        },
        priceScale: {
          borderColor: '#485c7b',
        },
        timeScale: {
          borderColor: '#485c7b',
        },
      });
  
      candleSeriesRef.current = chart.current.addCandlestickSeries({
        upColor: '#4bffb5',
        downColor: '#ff4976',
        borderDownColor: '#ff4976',
        borderUpColor: '#4bffb5',
        wickDownColor: '#838ca1',
        wickUpColor: '#838ca1',
      });
  
      candleSeriesRef.current.setData(props.data);
    }, [props.data]);
  

  return (
    <div ref={chartContainerRef} className="chart-container" />
  );
}

Third:改进的解决方案

每次数据属性更改时重新创建图表的成本太高。

import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import { createChart, CrosshairMode } from 'lightweight-charts';


export function ChartComponent(props) {
    const chartContainerRef = useRef();
    const chart = useRef();
    const resizeObserver = useRef();
    const candleSeriesRef = useRef();
    
    //this effect will be called only once, since there is no dependencies.
    useEffect(() => {

      chart.current = createChart(chartContainerRef.current, {
        width: chartContainerRef.current.clientWidth,
        height: chartContainerRef.current.clientHeight,
        layout: {
          backgroundColor: '#253248',
          textColor: 'rgba(255, 255, 255, 0.9)',
        },
        grid: {
          vertLines: {
            color: '#334158',
          },
          horzLines: {
            color: '#334158',
          },
        },
        crosshair: {
          mode: CrosshairMode.Normal,
        },
        priceScale: {
          borderColor: '#485c7b',
        },
        timeScale: {
          borderColor: '#485c7b',
        },
      });
  
      candleSeriesRef.current = chart.current.addCandlestickSeries({
        upColor: '#4bffb5',
        downColor: '#ff4976',
        borderDownColor: '#ff4976',
        borderUpColor: '#4bffb5',
        wickDownColor: '#838ca1',
        wickUpColor: '#838ca1',
      });
    }, []);
    
    //this effect will be called every time data props changes
    useEffect(() => {
      if(chart.current)
      candleSeriesRef.current.setData(props.data);
    }, [props.data]);
  

  return (
    <div ref={chartContainerRef} className="chart-container" />
  );
}

reactjs文档解释得更好，https://reactjs.org/docs/hooks-effect.html