React-highcharts: как мне остановить повторную анимацию графика при смене определенного реквизита?

Question

У меня есть диаграмма, построенная из реактивно-высоких графиков, в которой используется состояние loading, которое у меня в редуксе.Когда loading равно true, этот график должен измениться с opacity на 0,35 и обратно на 1, когда loading равен false.

Моя проблема в том, что когда я передаю 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 prop:

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

Я рекомендую вам использовать highcharts-react-official упаковщик: https://www.npmjs.com/package/highcharts-react-official

Вы сможете использовать опцию allowChartUpdate, которая позволит вам заблокировать обновление графика. Пожалуйста, посмотрите этот живой пример: https://codesandbox.io/s/9j89kxvl3w

Answer 2

Кстати, ваш пример на самом деле не содержит элемент ReactHighcharts.

Вы можете использовать свойство <ReactHighcharts isPureConfig={true}, которое предотвратит повторный рендеринг, если вы не передадите другой объект config. Это может помочь, если вы можете убедиться, что объект конфигурации обрабатывается как неизменяемый (например, не изменяйте его внутренние свойства и не ожидайте, что диаграмма будет перерисована).

Лично я обнаружил, что response-jsx-highcharts намного проще в использовании из-за подобных вещей.