React项目TradingView图表过多重渲染，如何仅更新orderLine不重绘图表

当前代码将buyLine加入了图表初始化useEffect的依赖数组，每次buyLine变动都会触发整个effect重执行：销毁原有TradingView widget实例、重新创建完整图表，因此触发全量重绘。

• 用useRef存储TradingView widget实例和orderLine委托线实例，ref存储的内容不参与React渲染流程，变更不会触发组件重渲染
• 拆分useEffect逻辑：
  • 第一个effect仅负责图表初始化，仅当交易对、周期等核心配置变动时才重建图表，不依赖buyLine
  • 第二个effect仅监听buyLine变动，当实例存在时直接调用orderLine的setPrice方法更新位置，不会触发整个图表重绘
• 新增组件卸载时的widget销毁逻辑，避免内存泄漏

import { useEffect, useRef } from 'react';

// 确保Datafeed、getLanguageFromURL为你项目中已引入的资源
export const TVChartContainer = ({
  symbol= 'Binance:BTC/USDT',
  interval= '1D',
  containerId = 'tv_chart_container',
  libraryPath = '/charting_library/',
  chartsStorageUrl = 'https://saveload.tradingview.com',
  chartsStorageApiVersion = '1.1',
  clientId = 'tradingview.com',
  userId = 'public_user_id',
  fullscreen = false,
  autosize = true,
  studiesOverrides = {},
  buyLine,
  setBuyLine,
}) => {
  // 用ref存储实例，不触发重渲染
  const tvWidgetRef = useRef(null);
  const buyOrderLineRef = useRef(null);

  // 仅初始化/核心配置变更时重建图表
  useEffect(() => {
    const widgetOptions = {
      debug: false,
      symbol: symbol,
      datafeed: Datafeed,
      interval: interval,
      container_id: containerId,
      library_path: libraryPath,
      locale: getLanguageFromURL() || 'en',
      disabled_features: ['use_localstorage_for_settings'],
      enabled_features: ['study_templates'],
      charts_storage_url: chartsStorageUrl,
      charts_storage_api_version: chartsStorageApiVersion,
      client_id: clientId,
      user_id: userId,
      fullscreen: fullscreen,
      autosize: autosize,
      studies_overrides: studiesOverrides,
    };
    const tvWidget = new widget(widgetOptions);
    tvWidgetRef.current = tvWidget;

    tvWidget.onChartReady(() => {
      const order = tvWidget.chart().createOrderLine()
        .setText("Buy Line")
        .onMove(function () {
          setBuyLine(order.getPrice().toFixed(2));
        })
        .setLineLength(30)
        .setLineStyle(2)
        .setPrice(Number(buyLine))
        .setLineColor('blue')
        .setQuantity(buyLine);
      // 存储orderLine实例
      buyOrderLineRef.current = order;
    })

    // 组件卸载/配置变更时清理旧实例
    return () => {
      tvWidgetRef.current?.remove();
      buyOrderLineRef.current = null;
    };
  // 仅核心配置作为依赖，不包含buyLine
  }, [symbol, interval, containerId, libraryPath, chartsStorageUrl, chartsStorageApiVersion, clientId, userId, fullscreen, autosize, studiesOverrides]);

  // 仅监听buyLine变动，单独更新委托线位置
  useEffect(() => {
    if (!buyOrderLineRef.current || !tvWidgetRef.current) return;
    // 仅当价格不一致时更新，避免无意义调用
    const currentPrice = buyOrderLineRef.current.getPrice().toFixed(2);
    if (currentPrice !== String(buyLine)) {
      buyOrderLineRef.current.setPrice(Number(buyLine));
      buyOrderLineRef.current.setQuantity(buyLine);
    }
  }, [buyLine]);

  return (
    <div
      id={containerId}
      className={'TVChartContainer'}
    />
  );
};

修改后输入框修改buyLine、手动拖动委托线同步输入框两个场景都只会更新委托线位置，不会触发整个图表重绘。

内容的提问来源于stack exchange，提问作者Aleksey