在 React 中重新排序元素而不导致它们重新渲染

Question

I'm animating SVG with React, and I have have a few SVG elements that get rotated and reordered in JSX to change their stacking order. (SVG doesn't have a z-index property, so the elements need to be reordered manually.) My JSX looks like:

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

The SVG result looks like:

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

My problem is that when I change the order of these components, the rotated elements' rotation transition gets interrupted because the rotated elements are being re-rendered when their order gets changed. I need the rotation transition to be smooth. In some cases it may be possible to rotate a parent of the component instead, but in this case that feels like a hacky workaround. It would be preferable to have the component containing the rects have their rotation as part of their state.

I tried using shouldComponentUpdate , but rotation is in the state. If I compare state in shouldComponentUpdate to determine if the element should rotate, it re-renders, and if I always return false, the element doesn't rotate. I'll update my question with this. So I tried this:

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

Can this be done? Is there a straightforward solution?

I'll create a working example when I have spare time.

Answer 1

You can use shouldComponentUpdate to decide if it should re-render.

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>
  }
}

In addition you could also consider deriving from PureComponent as it does a shallow check on props and state.

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