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 क्या प्रतिक्रिया-डीएनडी में विकल्प के रूप में एकीकृत होने के लिए ऐसा एक विशिष्ट लेकिन अधिक प्रदर्शन करने वाला कार्यान्वयन दिलचस्प है?

@choffmeister हाय। आपकी पोस्ट के लिए धन्यवाद। मैंने एक दिन पहले इस पर एक संक्षिप्त नज़र डाली थी, लेकिन तभी इसे गहराई से देखा। आपके द्वारा पोस्ट किया गया कोड आपके कार्यान्वयन में बहुत विशिष्ट लगता है, क्या आप कृपया इसके लिए आवश्यक महत्वपूर्ण पहलुओं को इंगित कर सकते हैं? और उस CustomDragLayerRaw का उपयोग कैसे किया जाता है, यह भी बहुत फायदेमंद होगा।

मुझे यकीन नहीं है कि आपके पास मौजूद सभी प्लगइन्स, पुस्तकालय और अन्य कोड समाधान का हिस्सा हैं या नहीं।

धन्यवाद

मैंने चारों ओर प्रयोग किया है और इसे काम करने में कामयाब रहा हूं। ऐसा लगता है कि आप अपने "ड्रैग घोस्ट थिंग" में जो सामग्री चाहते हैं वह 'ऑफ़सेट' डिव में होनी चाहिए। मुझे ऐसा करने का सबसे अच्छा तरीका नहीं पता है, लेकिन मेरे परीक्षण में, मैंने ड्रैग की गई सामग्री में एक समान div डाला है। मैंने अभी तक ड्रैग लेयर आइटम को ड्रैग किए गए आइटम के समान नहीं बनाया है, लेकिन कुछ डेटा में गुजरना और ड्रैग लेयर आइटम की स्थिति को बदलना बहुत कठिन नहीं है।

प्रदर्शन बहुत अच्छा है, हालांकि यह केवल कंटेनर के बाहर खींचते समय ही काम करता है। यदि आप आइटम के चारों ओर मंडलियां खींचते हैं, तो प्रदर्शन भी पिछले मामले की तरह निर्दोष है (यानी आपके पास 4 आइटमों की एक सूची है, माउस को चौथे आइटम के क्षेत्र में खींचना और रखना)। हालाँकि, यदि आप अपने माउस के साथ वृत्त खींचते हैं, सभी 4 तत्वों में खींचते हैं, तो यह अभी भी पहले की तरह पिछड़ जाता है, लेकिन थोड़े से एफपीएस सुधार के साथ (फिर भी यह अभी भी पिछड़ा हुआ है)। लेकिन यह क्रियान्वयन एक अच्छी शुरुआत है। कम से कम अधिकांश सामान्य मामलों के लिए जब आप एक कंटेनर से दूसरे कंटेनर में खींचना चाहते हैं, तो यह निश्चित रूप से यूएक्स को अच्छा रखेगा।

लैगी से आपका वास्तव में क्या मतलब है:

1. क्या एफपीएस इतना कम है कि यह हकलाने लगता है, या
2. क्या तत्व सुचारू रूप से चल रहा है, लेकिन चलते समय यह हमेशा माउस की गति से कुछ दूरी पर होता है?

मैं दोनों कहूंगा

आगे उपयोग करने पर, मुझे एहसास हुआ कि समाधान वास्तव में अंतराल को पूरी तरह समाप्त नहीं करता है। मेरे पास एक कार्ड डिव है जिसमें इसमें कुछ विशेषताएं शांत हैं। आपके समाधान ने शुरुआत में दस्तावेज़ों में उदाहरण की तुलना में एक बड़ा एफपीएस बूस्ट प्रदान किया था, हालांकि, जैसे ही मैं अपने div को और अधिक जटिल बना देता हूं, यह पिछड़ने लगता है जैसे मेरे पास यह नहीं था।

मुझे नहीं पता कि इसका सिमेंटिक यूआई इसका कारण बनता है या डीएनडी प्रतिक्रिया करता है। यदि ड्रैग लेयर को बहुत अच्छा प्रदर्शन करने का कोई अन्य इष्टतम तरीका है, तो मैं वास्तव में जानना चाहूंगा।

इसके अलावा अगर कोई कोशिश करना चाहता है और देखना चाहता है कि क्या यह उनके लिए भी पीछे है, तो मैंने इसके अंदर बहुत सारे तत्वों के साथ एक अर्थपूर्ण यूआई कार्ड का उपयोग किया था। मेरे प्लेसहोल्डर कार्ड में 2 शीर्षक, 5 सिमेंटिक "लेबल", 3 सिमेंटिक "आइकन" और एक अवतार इमेज थी।

इस अलग उदाहरण के साथ आगे के परीक्षण के बाद: http://react-trello-board.web-pal.com/ (इसका कार्यान्वयन बहुत कुछ वैसा ही है जैसा चॉफमेस्टर ने पहले पोस्ट किया था), मैं अभी भी अपने जटिल div को खींचने की कोशिश करते समय अंतराल प्राप्त करता हूं . मुझे खुशी है कि मैं इस निष्कर्ष पर पहुंचा हूं, क्योंकि मुझे कोड के साथ कुछ और प्रयोग करने की आवश्यकता नहीं है; समस्या मेरे div के साथ है, जिसे आसानी से ठीक किया जा सकता है।

मैं अभी भी दस्तावेज़ों में उदाहरण के समान कोड का उपयोग करके इसे बहुत बुरी तरह से अनुभव कर रहा हूं। यह परिवर्तन गणना होनी चाहिए जिसमें हर छोटे माउस की चाल हो?

क्या किसी और को इसका समाधान मिला है?

PureComponents के साथ भी मुझे प्रदर्शन की समस्या हुई है। क्रोम रिएक्ट देव प्लग-इन में 'हाइलाइट अपडेट' सुविधा का उपयोग करके निदान करने के लिए ऐसा लगता है जैसे मेरे सभी घटकों को अपडेट किया जा रहा था जब currentOffset प्रोप बदल रहा था। कम करने के लिए मैंने यह सुनिश्चित किया कि ड्रैगलेयर जो इस प्रोप पर गुजरता है, उसमें केवल ड्रैग पूर्वावलोकन ही होता है, भले ही ऐप के शीर्ष-स्तर पर ड्रैगलेयर पहले से ही ट्रैक करने के लिए कि किस आइटम को खींचा जा रहा है।

मैंने @choffmeister के समाधान को अपनाने की कोशिश नहीं की है, लेकिन ऐसा लगता है कि यह इस मुद्दे को भी हल करेगा। मुझे लगता है कि शायद ऐसा कुछ कोर लाइब्रेरी के लिए माना जाना चाहिए क्योंकि मैं केवल कल्पना कर सकता हूं कि ड्रैग पूर्वावलोकन को लागू करने वाले किसी भी व्यक्ति के लिए यह एक आम समस्या है।

मैंने यह सुनिश्चित किया है कि ड्रैगलेयर जो इस प्रोप पर गुजरता है, केवल ड्रैग पूर्वावलोकन ही होता है, भले ही ऐप के शीर्ष-स्तर पर पहले से ही ड्रैगलेयर था

मुझे यकीन नहीं है कि मैं अनुसरण करता हूं! मेरे ऐप में केवल एक कस्टम ड्रैग लेयर है, मुझे विश्वास है!

यह मेरे उपयोग के मामले के लिए विशिष्ट समस्या है - एक कस्टम ड्रैग पूर्वावलोकन की आवश्यकता होने से पहले ही एक ड्रैग लेयर का उपयोग किया जा रहा था, ताकि ट्रैक किया जा सके कि कौन सा आइटम खींचा जा रहा था। मैंने शुरू में सोचा था कि कस्टम ड्रैग पूर्वावलोकन करने के लिए उसी ड्रैग लेयर का उपयोग करना समझ में आता है जब मैंने इसे जोड़ा था, लेकिन चूंकि यह मेरे आवेदन के शीर्ष स्तर पर था, इसलिए हर मामूली आंदोलन पर इसके लिए प्रोप बदलने से बहुत कुछ हो रहा था अतिरिक्त घटक अद्यतन।

गोचा, धन्यवाद।

मैंने अपनी ड्रैग लेयर को एक सिंगल डंब कंपोनेंट तक सरल कर दिया, जहाँ तक मैं बता सकता हूँ कि यह निरंतर x/y गणना है जो अंतराल का कारण बन रही है।

मैं अभी तक @choffmeister ऊपर जो कर रहा हूं उसका पालन नहीं करता हूं, लेकिन ऐसा लगता है कि मुझे करीब से देखना होगा।

@gaearon यह lib के लिए एक बहुत ही अच्छी समस्या प्रतीत होती है, उचित सुझाव क्या हो सकता है इस पर कोई सुझाव?

ऐसा लगता है कि प्रतिक्रिया-डीएनडी-एचटीएमएल 5-बैकएंड में कस्टम ड्रैगलेयर के साथ भयानक प्रदर्शन है जबकि प्रतिक्रिया-डीएनडी-टच-बैकएंड में ठीक प्रदर्शन है।

थोड़े स्पष्ट, लेकिन यह मदद करता है:

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

ड्रैगलेयर की रेंडर विधि को थ्रॉटल करने के लिए react-throttle-render पैकेज का उपयोग करना एक और समाधान है।

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

धन्यवाद @ aks427 मैं यह कोशिश करूंगा और देखूंगा कि क्या इसमें और सुधार होता है (ऊपर की तरह एक कस्टम ड्रैग लेयर का उपयोग करके भी जिसने अधिकांश मामलों में बहुत मदद की लेकिन सभी नहीं)

@dobesv प्रतिक्रिया-डीएनडी-टच-बैकएंड में बदलने से समस्या हल हो गई। मैंने प्रतिक्रिया-थ्रॉटल-रेंडर करने की भी कोशिश की, लेकिन फिर भी अच्छा नहीं लगता।

हाँ, मुझे पता है कि टच बैकएंड काम करता है, लेकिन यह ड्रैग एंड ड्रॉप फ़ाइल अपलोड का समर्थन नहीं करता है, जिसका मैं उपयोग करना चाहता हूं।

@dobesv हम फ़ाइलों को खींचने और छोड़ने के लिए https://react-dropzone.js.org/ का उपयोग करते हैं :) शायद यह आपके लिए भी अच्छा है।

@dobesv मेरी टिप्पणियों को अनदेखा करें। प्रतिक्रिया-ड्रॉपज़ोन केवल ड्रॉप फ़ाइलों का समर्थन करता है।

लेकिन अधिक सामान्य सेनारियो के लिए, यदि फ़ाइल को अपलोड करने की आवश्यकता है, तो फ़ाइल ब्राउज़र से बाहर होनी चाहिए। हमें केवल ड्रॉप फाइलों की आवश्यकता है ठीक होना चाहिए।

नो ब्रेनर की तरह, लेकिन मैंने परफॉर्मेंट ड्रैग लेयर फिक्स का इस्तेमाल किया और खर्च किया
रेंडरर्स की संख्या को सीमित करने के लिए मेरे कोड को देखने में बहुत समय लगा
ऐप द्वारा कॉल किया जा रहा है (बहुत सारे स्विचिंग कंपोनेंट -> प्योरकंपोनेंट) और
अंत में मुझे प्रतिक्रिया-थ्रॉटल-रेंडर का उपयोग करने की भी आवश्यकता नहीं थी।

मैं निश्चित रूप से PureComponent का उपयोग करने और कोशिश करने की सलाह देता हूं
इस धागे पर एक आसान सुधार की तलाश करने के बजाय अपने कोड को अधिकतम करें यदि
आपका रेंडर धीमा है! अगर हम परफॉर्मेंट मॉडल में सुधार करते हैं तो मैं और पोस्ट करूंगा
हालांकि सब!

>

@framerate यहां तक ​​​​कि PureComponents का उपयोग करना भी एक मुद्दा है क्योंकि सुलह अहंकार हर माउस चाल पर चलाना महंगा है। क्रोम देवटूल और सीपीयू थ्रॉटलिंग के साथ अपने ऐप को 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 परिभाषित नहीं है। क्या यह किसी बड़ी फाइल का हिस्सा था? (प्रतिक्रिया भी आयात नहीं की जाती है)

@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

अन्य समाधान केवल पुराने संस्करणों के लिए काम करते प्रतीत होते हैं।

हे लोगों,

एक सीएसएस एनिमेटेड घटक को खींचने योग्य बनाने की कोशिश न करें, या आगे बढ़ने से पहले कम से कम संक्रमण संपत्ति को हटा दें।

प्रारंभ में संक्रमण संपत्ति को हटाने और इसे अंत में वापस जोड़ने के बाद, सब कुछ ठीक से काम करता है

उन लोगों के लिए जो हुक का उपयोग करते हैं (यूजड्रैगलेयर हुक) और यहां भूमि: मैंने विशेष रूप से हुक कार्यान्वयन के बारे में एक टिकट खोला, यहां वर्कअराउंड प्रस्ताव के साथ: https://github.com/react-dnd/react-dnd/issues/2414