React-dnd: CustomDragLayerのパフォーマンスが遅い

私もこれを経験しました。 ここでの問題は、ドラッグレイヤーで変更されない純粋なコンポーネントをレンダリングした場合でも、オフセットの変更により、マウスを1回動かすたびに少なくとも反応調整がトリガーされることです。 ドラッグレイヤーが変更されないカスタムプレビュー要素を表示するだけの一般的なケースがある場合、これは非常に非効率的です。

これを回避するために、オフセットレンダリングを行う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に反応するのかわかりません。 ドラッグレイヤーのパフォーマンスを向上させるためのより最適な方法が他にあるかどうか、私は本当に知りたいです。

また、誰かがそれが彼らにとっても遅れているかどうかを試してみたい場合は、私はセマンティックUIカードを使用し、その中に多くの要素が含まれていました。 私のプレースホルダーカードには、2つのタイトル、5つのセマンティック「ラベル」、3つのセマンティック「アイコン」、およびアバター画像がありました。

http://react-trello-board.web-pal.com/でこの別の例を使用してさらにテストした後（その実装はchoffmeisterが以前に投稿したものと非常に似ています）、複雑なdivをドラッグしようとするとまだラグが発生します。 コードをさらに実験する必要がないので、これが私が到達した結論であることを嬉しく思います。 問題は私のdivにあり、簡単に修正できます。

ドキュメントの例と非常によく似たコードを使用して、これをかなりひどく経験しています。 それは、すべての小さなマウスを動かす変換計算でなければなりませんか？

他の誰かがこれに対する解決策を見つけましたか？

PureComponentsを使用しても、パフォーマンスの問題が発生しました。 Chrome React Devプラグインの「更新のハイライト」機能を使用して診断すると、 currentOffsetプロップが変更されたときにすべてのコンポーネントが更新されていたようです。 軽減するために、ドラッグされているアイテムを追跡するためにアプリのトップレベルにすでにDragLayerがあったとしても、この小道具を渡すDragLayerにはドラッグプレビュー自体のみが含まれるようにしました。

@choffmeisterのソリューションを採用しようとはしていませんが、問題も解決するようです。 ドラッグプレビューを実装する人にとってこれは一般的な問題であるとしか想像できないので、コアライブラリではおそらくそのようなことを検討する必要があると思います。

アプリのトップレベルにすでにDragLayerがあったとしても、この小道具を渡すDragLayerにはドラッグプレビュー自体だけが含まれていることを確認しました

ついていくかわからない！ 私のアプリにはカスタムドラッグレイヤーが1つしかない、と私は信じています！

これは私のユースケースに固有の問題です。ドラッグされているアイテムを追跡するために、カスタムドラッグプレビューが必要になる前にドラッグレイヤーがすでに使用されていました。 追加したとき、最初は同じドラッグレイヤーを使用してカスタムドラッグプレビューを実行するのが理にかなっていると思っていましたが、これはアプリケーションのトップレベルであったため、わずかな動きごとにこのプロップを変更すると、多くのことが発生しました。追加のコンポーネントの更新。

お奨め、ありがとう。

ドラッグレイヤーを単一のダムコンポーネントに単純化したので、ラグの原因となっているのは一定のx/y計算であることがわかります。

@choffmeisterが上記で行っていることをまだ完全にはフォローしていませんが、詳しく調べる必要があるようです。

@gaearonこれはlibにとってかなりまともな問題のようですが、適切な修正が何であるかについての提案はありますか？

react-dnd-html5-backendのパフォーマンスはカスタムDragLayerでひどいのに対し、react-dnd-touch-backendのパフォーマンスはOKのようです。

ちょっと明らかですが、それは役立ちます：

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

もう1つの回避策は、 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と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アニメーションコンポーネントをドラッグ可能にしようとしたり、少なくともトランジションプロパティを削除したりしないでください。

遷移プロパティonStartを削除し、onEndに追加し直した後、すべてが正しく機能しました

フック（useDragLayerフック）を使用してここに到達する人のために：私はここで回避策の提案とともに、フックの実装について具体的にチケットを開きました： https ://github.com/react-dnd/react-dnd/issues/2414