React-highcharts:当某个道具发生变化时，如何停止图表重新生成动画？

Question

我有一个用react-highcharts构建的图表，它使用了redux中的loading状态。当loading为true时，该图表应将其opacity更改为0.35，并在loading为false时更改回1。

我的问题是，当我将loading属性传递给子组件时，它会重新呈现整个组件，并且每当loading发生变化时，它就会让图表动画两次：

  <SeatDemandChart
    seatVolatility={basicInputs.seatVolatility}
    desktopWidth={desktopWidth}
    spaceChartId={spaceChart}
    key={`${mobileScreenResults}_${tab}`}
    netArea={newResults.tradResults.netArea}
    seatChartResults={newResults.seatChartResults}
    measureName={measureName}
    loading={loading}
  />

和组件：

import ReactHighcharts from 'react-highcharts'

class SeatDemandChart extends Component {
  shouldComponentUpdate(nextProps) {
    return !isEqual(nextProps, this.props)
  }

  render() {
     const { 
       seatChartResults, 
       netArea, measureName, 
       printConfig, 
       seatVolatility, 
       spaceChartId,
       loading,
     } = this.props

     //....

     return (
       <div>
         <StyledChartContainer 
           print={printConfig && location === '/print' ? true : ''}
           loading={loading}
         >
     // ....

使用loading属性的样式化组件：

export const StyledChartContainer = styled.div`
  box-shadow: 0 2px 4px 0 rgba(39, 43, 47, 0.25);
  transition: opacity 300ms ease-in-out;
  opacity: ${({ loading }) => loading ? 0.35 : 1};
`

我是不是遗漏了什么？我觉得我应该向shouldComponentUpdate添加更多的逻辑，但我对如何处理这一点感到非常迷茫。

Answer 1

顺便说一句，您的示例实际上并不包含ReactHighcharts元素。

您可以使用<ReactHighcharts isPureConfig={true}属性，除非传入不同的config对象，否则它将无法重新呈现。这可能会有所帮助，只要您能确保配置对象被视为不可变的(例如，不要更改其内部属性并期望图表重新呈现)。

就我个人而言，我发现react-jsx-highcharts更容易使用，因为这样的事情。

Answer 2

我建议您使用highcharts-react-official包装器：https://www.npmjs.com/package/highcharts-react-official

您将能够使用allowChartUpdate选项，该选项允许您阻止图表更新。请看这个现场示例：https://codesandbox.io/s/9j89kxvl3w