React 16.3（严格模式）下如何在组件内更新Highcharts？

我太懂你这个头疼的问题了！React 16.3严格模式把componentWillUpdate给废弃了，之前靠它在render前更新Highcharts的路子直接走不通，换成componentDidUpdate又因为在render之后执行完全没效果，简直卡壳。别慌，我给你整理了两个靠谱的解决方案，附完整代码片段：

咱先理清楚核心问题：之前的componentWillUpdate能在render前触发，刚好能同步更新Highcharts，但现在这个生命周期被废弃后，直接换componentDidUpdate之所以无效，大概率是你的组件render逻辑里不小心重新创建了Highcharts实例，导致你在componentDidUpdate里更新的是个“无效”实例。

正确的做法是让Highcharts实例和容器DOM稳定绑定，只在组件挂载时初始化一次，之后仅通过props变化来更新实例：

import React from 'react';
import Highcharts from 'highcharts';

class HighchartsWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.chartContainer = React.createRef();
    this.chartInstance = null;
  }

  componentDidMount() {
    // 挂载时只初始化一次Highcharts实例
    this.chartInstance = Highcharts.chart(
      this.chartContainer.current,
      this.props.highchartoptions
    );
  }

  componentDidUpdate(prevProps) {
    // 对比前后props的配置，避免无意义的更新
    // 如果是复杂对象，建议用lodash.isEqual做深层对比
    if (prevProps.highchartoptions !== this.props.highchartoptions) {
      // 调用Highcharts实例的update方法，第二个参数true强制重绘
      this.chartInstance.update(this.props.highchartoptions, true);
    }
  }

  componentWillUnmount() {
    // 卸载时销毁实例，防止内存泄漏
    if (this.chartInstance) {
      this.chartInstance.destroy();
      this.chartInstance = null;
    }
  }

  render() {
    // render只负责渲染容器，绝不碰Highcharts初始化逻辑
    return <div ref={this.chartContainer}></div>;
  }
}

export default HighchartsWrapper;

如果你的项目可以迁移到函数组件，用Hooks会更简洁，而且天然适配React严格模式，完全不用担心废弃生命周期的问题：

import React, { useEffect, useRef } from 'react';
import Highcharts from 'highcharts';
import isEqual from 'lodash/isEqual'; // 可选，用于深层对比配置

const HighchartsWrapper = ({ highchartoptions }) => {
  const chartContainer = useRef(null);
  const chartInstance = useRef(null);

  // 组件挂载时初始化实例
  useEffect(() => {
    chartInstance.current = Highcharts.chart(chartContainer.current, highchartoptions);
    
    // 组件卸载时清理实例
    return () => {
      if (chartInstance.current) {
        chartInstance.current.destroy();
      }
    };
  }, []);

  // 配置变化时更新实例
  useEffect(() => {
    if (chartInstance.current) {
      // 用isEqual做深层对比，避免因对象引用变化触发不必要更新
      if (!isEqual(chartInstance.current.options, highchartoptions)) {
        chartInstance.current.update(highchartoptions, true);
      }
    }
  }, [highchartoptions]);

  return <div ref={chartContainer}></div>;
};

export default HighchartsWrapper;

额外提示： #

如果你的highchartoptions是复杂对象，父组件每次渲染时都会生成新的对象引用，这会导致componentDidUpdate或useEffect频繁触发。这时候可以用lodash.isEqual做深层对比，或者在父组件用useMemo（函数组件）或shouldComponentUpdate（类组件）来缓存配置对象，减少不必要的更新。

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