React-dnd: CustomDragLayer 느린 성능

나도 이것을 경험했다. 여기서 문제는 드래그 레이어에서 변경되지 않는 순수 구성 요소를 렌더링하더라도 오프셋 변경으로 인해 모든 단일 마우스 이동에서 최소한 반응 조정이 트리거된다는 것입니다. 드래그 레이어가 변경되지 않는 사용자 정의 미리보기 요소를 표시해야 하는 일반적인 경우에는 매우 비효율적입니다.

이 문제를 해결하기 위해 DragLayer.js 가 오프셋 렌더링을 수행하고 고성능 방식으로 복제했습니다. 즉, 미리보기 주위를 직접 이동하는 컨테이너의 스타일을 변경하는 것입니다.

// PerformantDragLayer.js
/* eslint-disable */
import React, { Component, PropTypes } from 'react';
import shallowEqual from 'react-dnd/lib/utils/shallowEqual';
import shallowEqualScalar from 'react-dnd/lib/utils/shallowEqualScalar';
import isPlainObject from 'lodash/isPlainObject';
import invariant from 'invariant';
import checkDecoratorArguments from 'react-dnd/lib/utils/checkDecoratorArguments';
import hoistStatics from 'hoist-non-react-statics';

function layerStyles(isDragging) {
  return {
    position: 'fixed',
    pointerEvents: 'none',
    zIndex: 1,
    left: 0,
    top: 0,
    width: isDragging ? '100%' : 0,
    height: isDragging ? '100%' : 0,
    opacity: isDragging ? 1 : 0
  };
}

export default function DragLayer(collect, options = {}) {
  checkDecoratorArguments('DragLayer', 'collect[, options]', ...arguments);
  invariant(
    typeof collect === 'function',
    'Expected "collect" provided as the first argument to DragLayer ' +
    'to be a function that collects props to inject into the component. ',
    'Instead, received %s. ' +
    'Read more: http://gaearon.github.io/react-dnd/docs-drag-layer.html',
    collect
  );
  invariant(
    isPlainObject(options),
    'Expected "options" provided as the second argument to DragLayer to be ' +
    'a plain object when specified. ' +
    'Instead, received %s. ' +
    'Read more: http://gaearon.github.io/react-dnd/docs-drag-layer.html',
    options
  );

  return function decorateLayer(DecoratedComponent) {
    const { arePropsEqual = shallowEqualScalar } = options;
    const displayName =
      DecoratedComponent.displayName ||
      DecoratedComponent.name ||
      'Component';

    class DragLayerContainer extends Component {
      static DecoratedComponent = DecoratedComponent;

      static displayName = `DragLayer(${displayName})`;

      static contextTypes = {
        dragDropManager: PropTypes.object.isRequired
      }

      getDecoratedComponentInstance() {
        return this.refs.child;
      }

      shouldComponentUpdate(nextProps, nextState) {
        return !arePropsEqual(nextProps, this.props) ||
          !shallowEqual(nextState, this.state);
      }

      constructor(props, context) {
        super(props);
        this.handleOffsetChange = this.handleOffsetChange.bind(this);
        this.handleStateChange = this.handleStateChange.bind(this);

        this.manager = context.dragDropManager;
        invariant(
          typeof this.manager === 'object',
          'Could not find the drag and drop manager in the context of %s. ' +
          'Make sure to wrap the top-level component of your app with DragDropContext. ' +
          'Read more: http://gaearon.github.io/react-dnd/docs-troubleshooting.html#could-not-find-the-drag-and-drop-manager-in-the-context',
          displayName,
          displayName
        );

        this.state = this.getCurrentState();
      }

      componentDidMount() {
        this.isCurrentlyMounted = true;

        const monitor = this.manager.getMonitor();
        this.unsubscribeFromOffsetChange = monitor.subscribeToOffsetChange(
          this.handleOffsetChange
        );
        this.unsubscribeFromStateChange = monitor.subscribeToStateChange(
          this.handleStateChange
        );

        this.handleStateChange();
      }

      componentWillUnmount() {
        this.isCurrentlyMounted = false;

        this.unsubscribeFromOffsetChange();
        this.unsubscribeFromStateChange();
      }

      handleOffsetChange() {
        if (!this.isCurrentlyMounted) {
          return;
        }

        const monitor = this.manager.getMonitor();
        const offset = monitor.getSourceClientOffset();
        const offsetDiv = this.refs.offset;
        if (offset && offsetDiv) {
          offsetDiv.style.transform = `translate(${offset.x}px, ${offset.y}px)`;
        }
      }

      handleStateChange() {
        if (!this.isCurrentlyMounted) {
          return;
        }

        const nextState = this.getCurrentState();
        if (!shallowEqual(nextState, this.state)) {
          this.setState(nextState);
        }
      }

      getCurrentState() {
        const monitor = this.manager.getMonitor();
        return {
          collected: collect(monitor),
          isDragging: monitor.isDragging()
        };
      }

      render() {
        return (
          <div style={layerStyles(this.state.isDragging)}>
            <div ref='offset'>
              {this.state.isDragging && <DecoratedComponent {...this.props} {...this.state.collected} ref='child' />}
            </div>
          </div>
        );
      }
    }

    return hoistStatics(DragLayerContainer, DecoratedComponent);
  };
}

그러면 다음과 같이 사용할 수 있습니다.

// MyCustomDragLayer.js
import PerformantDragLayer from './PerformantDragLayer'
import React, {PropTypes} from 'react'

class CustomDragLayerRaw extends React.Component {
  static propTypes = {
    item: PropTypes.any,
    itemType: PropTypes.string
  }

  render () {
    const {item, itemType} = this.props
    return <div>{itemType}</div>
  }
}

export default PerformantDragLayer((monitor) => ({
  item: monitor.getItem(),
  itemType: monitor.getItemType()
})(CustomDragLayerRaw)

성능 향상이 매우 눈에 띕니다.

물론 기본 DragLayer 가 더 유연합니다. 특별한 경우를 처리하기 때문에 더 성능이 좋은 구현이 더 빠릅니다. 하지만 이 특별한 경우는 매우 흔한 일이라고 생각합니다.

@gaearon 그렇게 전문화되었지만 훨씬 더 성능이 뛰어난 구현이 react-dnd에 대한 대안으로 통합되는 데 흥미가 있습니까?

@choffmeister 안녕하세요. 귀하의 게시물에 감사드립니다. 나는 하루 전에 그것에 대해 간략하게 살펴보았지만 그때서야 ​​깊이 살펴보았습니다. 게시한 코드는 구현 내에서 매우 전문화된 것 같습니다. 이에 필요한 중요한 측면을 지적해 주시겠습니까? 그리고 CustomDragLayerRaw가 어떻게 사용되는지도 매우 유익할 것입니다.

가지고 있는 모든 플러그인, 라이브러리 및 기타 코드가 솔루션의 일부인지 확실하지 않습니다.

감사 해요

나는 주위를 실험하고 작동하도록 관리했습니다. "드래그 고스트"에 원하는 콘텐츠가 '오프셋' div에 있어야 하는 것 같습니다. 이 작업을 수행하는 최적의 방법을 모르지만 내 테스트에서는 드래그한 콘텐츠에 비슷한 div를 넣었습니다. 아직 드래그 레이어 항목을 드래그 항목과 동일하게 만들지 않았지만 일부 데이터를 전달하고 드래그 레이어 항목의 상태를 변경하는 것은 그리 어렵지 않습니다.

성능은 매우 좋지만 컨테이너 외부로 끌 때만 작동합니다. 항목 주위를 원으로 드래그하면 성능도 이전의 경우와 마찬가지로 완벽합니다(즉, 4개의 항목 목록이 있고 4번째 항목 영역에서 마우스를 드래그한 상태로 유지). 그러나 4개 요소 모두에 걸쳐 마우스로 원을 그리고 드래그하면 이전과 같이 여전히 지연되지만 약간의 fps 개선이 있습니다(그래도 여전히 지연됨). 그러나 이 구현은 좋은 시작입니다. 적어도 한 컨테이너에서 다른 컨테이너로 드래그하려는 가장 일반적인 경우에는 UX를 확실히 유지합니다.

지연이 정확히 무엇을 의미합니까?

1. FPS가 낮아서 버벅거리거나
2. 요소가 부드럽게 움직이지만 움직이는 동안 항상 마우스 움직임보다 약간의 거리가 떨어져 있습니까?

나는 둘 다 말할 것이다

더 사용하면서 솔루션이 실제로 지연을 완전히 제거하지 못한다는 것을 깨달았습니다. 나는 그것에 조용한 약간의 기능이 있는 카드 div가 있습니다. 귀하의 솔루션은 처음에 문서의 예와 비교하여 엄청난 fps 향상을 제공했지만 내 div를 더 복잡하게 만들면 이것이 없는 것처럼 지연되기 시작합니다.

의미론적 UI가 이 문제를 일으키거나 dnd에 반응하는지 모르겠습니다. 드래그 레이어의 성능을 높이는 다른 최적의 방법이 있다면 정말 알고 싶습니다.

또한 누군가가 자신에게 뒤떨어지는지 확인하고 싶다면 내부에 많은 요소가 포함된 Semantic UI 카드를 사용했습니다. 내 자리 표시자 카드에는 2개의 제목, 5개의 의미론적 "레이블", 3개의 의미론적 "아이콘" 및 아바타 이미지가 있습니다.

http://react-trello-board.web-pal.com/ 에서 이 다른 예를 추가로 테스트한 후(구현은 choffmeister가 이전에 게시한 것과 매우 유사함) 복잡한 div를 드래그하려고 할 때 여전히 지연이 발생합니다. . 코드를 더 실험할 필요가 없기 때문에 이것이 내가 내린 결론이라 기쁩니다. 문제는 쉽게 고칠 수 있는 내 div에 있습니다.

나는 여전히 문서의 예제와 매우 유사한 코드를 사용하여 이것을 꽤 심하게 경험하고 있습니다. 작은 마우스가 움직일 때마다 변환 계산을 해야 합니까?

다른 사람이 이에 대한 해결책을 찾았습니까?

PureComponents에서도 성능 문제가 발생했습니다. Chrome React Dev 플러그인의 '업데이트 강조' 기능을 사용하여 진단하면 currentOffset 소품이 변경될 때 모든 구성 요소가 업데이트된 것처럼 보입니다. 이를 완화하기 위해 앱의 최상위 수준에 어떤 항목이 드래그되는지 추적하기 위한 DragLayer가 이미 있더라도 이 소품을 전달하는 DragLayer에 드래그 미리보기 자체만 포함되도록 했습니다.

@choffmeister 의 솔루션을 적용하려고 시도하지는 않았지만 문제도 해결할 수 있을 것 같습니다. 나는 이것이 드래그 미리보기를 구현하는 모든 사람에게 공통적인 문제라고 상상할 수 있기 때문에 코어 라이브러리에 대해 이와 같은 것을 고려해야 한다고 생각합니다.

이 소품을 전달하는 DragLayer에는 앱의 최상위 수준에 이미 DragLayer가 있음에도 불구하고 드래그 미리보기 자체만 포함되어 있는지 확인했습니다.

팔로우 하고 있는지 모르겠네요! 내 앱에는 사용자 정의 드래그 레이어가 하나만 있습니다.

내 사용 사례에만 해당하는 문제입니다. 드래그 중인 항목을 추적하기 위해 사용자 지정 드래그 미리보기가 필요하기 전에 드래그 레이어가 이미 사용 중이었습니다. 처음에는 추가할 때 사용자 지정 드래그 미리보기를 수행하기 위해 동일한 드래그 레이어를 사용하는 것이 합리적이라고 생각했지만 이것이 내 응용 프로그램의 최상위 수준에 있었기 때문에 약간의 움직일 때마다 이에 대한 소품을 변경하면 많은 문제가 발생했습니다. 추가 구성 요소 업데이트.

감사합니다.

드래그 레이어를 단일 벙어리 구성 요소로 단순화했습니다. 내가 말할 수있는 한 지연을 일으키는 것은 일정한 x/y 계산입니다.

나는 아직 위에서 @choffmeister 가 하는 일을 잘 따르지 않지만 더 자세히 살펴봐야 할 것 같습니다.

@gaearon 이것은 lib에 대해 꽤 괜찮은 문제인 것 같습니다. 적절한 수정 사항에 대한 제안 사항이 있습니까?

react-dnd-html5-backend는 사용자 정의 DragLayer에서 성능이 좋지 않은 반면 react-dnd-touch-backend는 성능이 양호한 것 같습니다.

뻔하지만 도움이 됩니다.

let updates = 0;
@DragLayer(monitor => {
  if (updates++ % 2 === 0) {
    return {
      currentOffset: monitor.getSourceClientOffset()
    }
  }
  else {
    return {}
  }
})

또 다른 해결 방법은 react-throttle-render 패키지를 사용하여 DragLayer의 렌더링 방법을 조절하는 것입니다.

https://www.npmjs.com/package/react-throttle-render

@aks427 감사합니다. 시도해 보고 더 개선되는지 확인하겠습니다(위와 같은 사용자 지정 드래그 레이어를 사용하여 대부분의 경우에 많은 도움이 되었지만 전부는 아님)

@dobesv 를 react-dnd-touch-backend로 변경하면 문제가 해결되었습니다. 나는 또한 react-throttle-render를 시도했지만 여전히 좋지 않은 것 같습니다.

예, 터치 백엔드가 작동한다는 것을 알고 있지만 사용하려는 끌어서 놓기 파일 업로드를 지원하지 않습니다.

@dobesv 우리는 드래그 앤 드롭 파일에 https://react-dropzone.js.org/를 사용합니다. :) 아마도 당신에게도 좋을 것입니다.

@dobesv 는 내 의견을 무시합니다. react-dropzone은 드롭 파일만 지원합니다.

그러나 보다 일반적인 시나리오의 경우 파일을 업로드해야 하는 경우 파일이 브라우저 외부에 있어야 합니다. 드롭 파일만 있으면 됩니다.

별거 아닌 것 같지만 성능이 좋은 드래그 레이어 수정을 사용하고
렌더링 수를 제한하기 위해 내 코드를 보는 데 많은 시간이
앱에 의해 호출되고(컴포넌트 -> PureComponent 전환이 많음)
결국 나는 react-throttle-render를 사용할 필요조차 없었습니다.

PureComponent를 사용하고 다음을 시도하는 것이 좋습니다.
이 스레드에서 쉬운 수정을 찾는 대신 코드를 최대화하십시오.
렌더링이 느립니다! 다음에서 성능 모델을 개선하면 더 많은 내용을 게시하겠습니다.
그래도!

>

@framerate PureComponents 를 사용하더라도 조정 알고리즘은 마우스를 움직일 때마다 실행하는 데 비용이 많이 들기 때문에 문제입니다. Chrome DevTools를 사용하여 ur 앱을 프로파일링하고 CPU를 4X로 조절하면 미드엔드 모바일 장치의 경우 실제 속도가 느려집니다.

후손과 드래그 성능에 어려움을 겪고 있고 @choffmeister 솔루션에서와 같이 많은 코드를 가져오고 싶지 않은 사람을 위해:

let subscribedToOffsetChange = false;

let dragPreviewRef = null;

const onOffsetChange = monitor => () => {
  if (!dragPreviewRef) return;

  const offset = monitor.getSourceClientOffset();
  if (!offset) return;

  const transform = `translate(${offset.x}px, ${offset.y}px)`;
  dragPreviewRef.style["transform"] = transform;
  dragPreviewRef.style["-webkit-transform"] = transform;
};

export default DragLayer(monitor => {
  if (!subscribedToOffsetChange) {
    monitor.subscribeToOffsetChange(onOffsetChange(monitor));
    subscribedToOffsetChange = true;
  }

  return {
    itemBeingDragged: monitor.getItem(),
    componentType: monitor.getItemType(),
    beingDragged: monitor.isDragging()
  };
})(
  class CustomDragLayer extends React.PureComponent {
    componentDidUpdate(prevProps) {
      dragPreviewRef = this.rootNode;
    }

    render() {
      if (!this.props.beingDragged) return null;
      return (
        <div
          role="presentation"
          ref={el => (this.rootNode = el)}
          style={{
            position: "fixed",
            pointerEvents: "none",
            top: 0,
            left: 0
          }}
        >
          {renderComponent(
            this.props.componentType,
            this.props.itemBeingDragged
          )}
        </div>
      );
    }
  }
);

@stellarhoof 좋은 답변 감사합니다! 불행히도 솔루션은 IE11에서 작동하지 않습니다. subscribeToOffsetChange 는 우리가 전달한 콜백을 호출하지 않는 것 같습니다. 다행히 subscribeToOffsetChange 를 사용하지 않고 대신 다음과 같이 수집기 내부에 번역을 설정하여 문제를 해결할 수 있었습니다.

let dragLayerRef: HTMLElement = null;

const layerStyles: React.CSSProperties = {
  position: 'fixed',
  pointerEvents: 'none',
  zIndex: 100,
  left: 0,
  top: 0,
  width: '100%',
  height: '100%',
};

const dragLayerCollector = (monitor: DragLayerMonitor) => {
  if (dragLayerRef) {
    const offset = monitor.getSourceClientOffset() || monitor.getInitialClientOffset();

    if (offset) {
      dragLayerRef.style["transform"] = `translate(${offset.x}px, ${offset.y}px)`;
    } else {
      dragLayerRef.style["display"] = `none`;
    }
  }

  return {
    item: monitor.getItem(),
    isDragging: monitor.isDragging(),
  };
};

export default DragLayer(dragLayerCollector)(
  (props): JSX.Element => {
    if (!props.isDragging) {
      return null;
    }

    return (
      <div style={layerStyles}>
        <div ref={ (ref) => dragLayerRef = ref }>test</div>
      </div>
    );
  }
);

@stellarhoof renderComponent 이 정의되지 않은 것을 알았습니다. 더 큰 파일의 일부였습니까? (React도 가져오지 않음)

@framerate https://github.com/stellarhoof/trello-clone/blob/48d8b8f5277cfc4d50ebf0c517562d3bf9c7ac7a/src/app/DragPreview.js

@choffmeister dnd의 이후 버전으로 업데이트하셨습니까? 컨텍스트 변경으로 인해 구현이 중단된 것으로 보이며 이를 시도하고 @stellarhoof 가 수행한 작업과 비교하고 싶었습니다.

@stellarhoof 좋은 답변 감사합니다! 불행히도 솔루션은 IE11에서 작동하지 않습니다. subscribeToOffsetChange 는 우리가 전달한 콜백을 호출하지 않는 것 같습니다. 다행히 subscribeToOffsetChange 를 사용하지 않고 대신 다음과 같이 수집기 내부에 번역을 설정하여 문제를 해결할 수 있었습니다.

let dragLayerRef: HTMLElement = null;

const layerStyles: React.CSSProperties = {
  position: 'fixed',
  pointerEvents: 'none',
  zIndex: 100,
  left: 0,
  top: 0,
  width: '100%',
  height: '100%',
};

const dragLayerCollector = (monitor: DragLayerMonitor) => {
  if (dragLayerRef) {
    const offset = monitor.getSourceClientOffset() || monitor.getInitialClientOffset();

    if (offset) {
      dragLayerRef.style["transform"] = `translate(${offset.x}px, ${offset.y}px)`;
    } else {
      dragLayerRef.style["display"] = `none`;
    }
  }

  return {
    item: monitor.getItem(),
    isDragging: monitor.isDragging(),
  };
};

export default DragLayer(dragLayerCollector)(
  (props): JSX.Element => {
    if (!props.isDragging) {
      return null;
    }

    return (
      <div style={layerStyles}>
        <div ref={ (ref) => dragLayerRef = ref }>test</div>
      </div>
    );
  }
);

이것은 나를 위해 일했습니다!
이 버전을 사용하고 있습니다: 9.4.0

다른 솔루션은 이전 버전에서만 작동하는 것 같습니다.

얘들 아,

계속 진행하기 전에 CSS 애니메이션 구성 요소를 드래그 가능하게 만들거나 최소한 transition 속성을 제거하지 마십시오.

전환 속성 onStart를 제거하고 다시 onEnd에 추가한 후 모든 것이 제대로 작동했습니다.

후크(useDragLayer 후크)를 사용하고 여기에 착륙하는 사람들을 위해: 저는 특히 후크 구현에 대한 티켓을 열었으며 여기에 해결 방법 제안이 있습니다: https://github.com/react-dnd/react-dnd/issues/2414