Изменение порядка элементов в React без их повторного рендеринга

Question

Я анимирую SVG с помощью React, и у меня есть несколько элементов SVG, которые в JSX поворачиваются и переупорядочиваются, чтобы изменить порядок их расположения. (SVG не имеет свойства z-index, поэтому элементы нужно переупорядочивать вручную.) Мой JSX выглядит так:

<svg>
  <g>
    <Rect key={'rect0'} />
    <Rect key={'rect1'} />
    <Rect key={'rect2'} />
    <Rect key={'rect3'} />
  </g>
</svg>

Результат SVG выглядит так:

<svg>
  <g>
    <rect>
    <rect>
    <rect>
    <rect>
  </g>
</svg>

Моя проблема в том, что когда я изменяю порядок этих компонентов, переход вращения повернутых элементов прерывается, потому что повернутые элементы повторно визуализируются при изменении их порядка. Мне нужно, чтобы переход вращения был плавным. В некоторых случаях вместо этого можно повернуть родительский элемент компонента, но в этом случае это похоже на хитрый обходной путь. Было бы предпочтительнее, чтобы компонент, содержащий прямоугольники, имел их вращение как часть своего состояния.

Я пробовал использовать shouldComponentUpdate, но вращение находится в состоянии. Если я сравниваю состояние в shouldComponentUpdate, чтобы определить, должен ли элемент вращаться, он перерисовывается, и если я всегда возвращаю false, элемент не вращается. Я обновлю свой вопрос этим. Вот и попробовал:

shouldComponentUpdate(nextProps, nextState) {
    return (nextState.rotation !== this.state.rotation);
}

Это можно сделать? Есть простое решение?

Я создам рабочий пример, когда у меня будет свободное время.

Answer 1

Вы можете использовать shouldComponentUpdate, чтобы решить, следует ли выполнять повторный рендеринг.

class Elements extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    // This is just an example, but you can track the number of elements 
    // for instance and decide not to re-render if they're the same
    if (this.state.number === nextState.number) {
      return false;
    } else {
      return true;
    }
  }

  render() {
    return <svg>
      <g>
        <Rect key={'rect0'} />
        <Rect key={'rect1'} />
        <Rect key={'rect2'} />
        <Rect key={'rect3'} />
     </g>
    </svg>
  }
}

Кроме того, вы также можете рассмотреть возможность наследования от PureComponent, поскольку он выполняет неглубокую проверку свойств и состояния.

class Elements extends PureComponent {
  render() {
    return <svg>
      <g>
        <Rect key={'rect0'} />
        <Rect key={'rect1'} />
        <Rect key={'rect2'} />
        <Rect key={'rect3'} />
     </g>
    </svg>
  }
}