在React中重新排列元素而不会导致它们重新呈现 [英] Reordering elements in React without causing them to rerender

问题描述

我正在用React使SVG动画化，并且我有一些SVG元素在JSX中旋转并重新排序以更改其堆叠顺序. (SVG没有z-index属性，因此需要手动对元素进行重新排序.)我的JSX看起来像:

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>

SVG结果如下:

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

我尝试使用shouldComponentUpdate，但是处于旋转状态.如果我在shouldComponentUpdate中比较状态以确定元素是否应该旋转，则它将重新渲染，并且如果我始终返回false，则元素不会旋转.我将用这个来更新我的问题.所以我尝试了这个:

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.

推荐答案

您可以使用shouldComponentUpdate决定是否应重新渲染.

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

此外，您还可以考虑从PureComponent派生，因为它会对props和state进行浅层检查.

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

这篇关于在React中重新排列元素而不会导致它们重新呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！