React-dnd: हुक एपीआई चर्चा

मैं इस पुस्तकालय में हुक का उपयोग शुरू करने के लिए इंतजार नहीं कर सकता। जैसे ही प्रकार अल्फा के लिए बेक किए जाते हैं हम एक माइग्रेशन शाखा स्थापित कर सकते हैं

मैं एक शाखा में चारों ओर खेल रहा हूं: प्रयोग / हुक, बस यह सोचने के लिए कि यह एपीआई कैसे दिख सकता है। बोर्डसक्वेयर घटक इस तरह दिख रहा है:

const dropTarget = createDropTarget(ItemTypes.KNIGHT, {
    canDrop: (props: BoardSquareProps) => canMoveKnight(props.x, props.y),
    drop: (props: BoardSquareProps) => moveKnight(props.x, props.y),
})

const BoardSquare = ({ x, y, children }) => {
    const black = (x + y) % 2 === 1
    const [connectDropTarget, isOver, canDrop] = useDnd(
        dropTarget,
        connect => connect.dropTarget,
        (connect, monitor) => !!monitor.isOver,
        (connect, monitor) => !!monitor.canDrop,
    )

    return connectDropTarget(
        <div>
            <Square black={black}>{children}</Square>
            {isOver && !canDrop && <Overlay color={'red'} />}
            {!isOver && canDrop && <Overlay color={'yellow'} />}
            {isOver && canDrop && <Overlay color={'green'} />}
        </div>,
    )
}

तो यहाँ विचार यह है कि createDropTarget खींचें / ड्रॉप आइटम के बारे में तार्किक ज्ञान को सेट करता है, यह आईडी और भविष्यवाणी है, और useDnd हुक इसे DnD सिस्टम में वायर करेगा और प्रॉपर इकट्ठा करेगा।

ध्यान दें कि यह केवल एक उम्मीदवार के डिजाइन को स्केच कर रहा है, यह वास्तव में लागू नहीं है

@darthtrevino आप किस शाखा में काम कर रहे हैं? मैं सोच रहा हूँ कि क्या हम Refs का उपयोग करके connectDropTarget एक साथ निकाल सकते हैं। मुझे यह देखना अच्छा लगेगा कि क्या मैं इसे आपकी शाखा में काम करवा सकता हूँ!

const dropTarget = createDropTarget(ItemTypes.KNIGHT, {
    canDrop: (props: BoardSquareProps) => canMoveKnight(props.x, props.y),
    drop: (props: BoardSquareProps) => moveKnight(props.x, props.y),
})

const BoardSquare = ({ x, y, children }) => {
    const dropTargetElement = useRef(null);
    const black = (x + y) % 2 === 1
    const [isOver, canDrop] = useDnd(
        dropTargetElement,
        dropTarget,
        ...
    )

    return (
        <div ref={dropTargetElement}>
            <Square black={black}>{children}</Square>
            {isOver && !canDrop && <Overlay color={'red'} />}
            {!isOver && canDrop && <Overlay color={'yellow'} />}
            {isOver && canDrop && <Overlay color={'green'} />}
        </div>
    )
}

@ jacobp100 मुझे लगता है कि मुझे समान हुक-आधारित एपीआई प्रतीत होते हैं, जहां रेफरी प्रदान किया जाता है और हुक द्वारा ही लौटाया जाता है (जैसे const [isOver, canDrop, ref] = useDnd(...) ), इसके जेएसएक्स ट्री में उपभोग करने के लिए तैयार घटक के लिए)

मुझे लगता है कि काम करता है। यह कई हुक में रेफ का उपयोग करने के लिए कठिन बनाता है, लेकिन आपको कुछ लिखने से रोकने के लिए कुछ भी नहीं है जो एक ही रेफरी में कई रेफ को जोड़ती है। यह कौन सी लाइब्रेरी थी?

लगता है कि हम देखना होगा कि इस पर सम्मेलन क्या है!

यह कई हुक में रेफ का उपयोग करने के लिए कठिन बनाता है, लेकिन आपको कुछ लिखने से रोकने के लिए कुछ भी नहीं है जो एक ही रेफरी में कई रेफ को जोड़ती है।

सच, और सच :-)

यह कौन सी लाइब्रेरी थी?

लगता है यह फिर से एटीएम नहीं मिल सकता: - / - पिछले एक पखवाड़े में हुक के आसपास बहुत सारे प्रयोग ...

Https://github.com/beizhedenglong/react-hooks-lib जो करता है
const { hovered, bind } = useHover(); return <div {...bind}>{hovered ? 'yes' : 'no'}</div>;
जो मुझे लगता है कि bind मतलब एक रेफरी भी शामिल है?
[संपादित करें: नहीं, यह सिर्फ { onMouseEnter, onMouseLeave } , बिल्कुल शामिल है ...]

लेकिन मुझे याद है कि कुछ अन्य एपीआई हुक से सीधे रेफरी को लौटते हुए देखते हैं।

वहाँ बहुत कुछ नहीं है, और यह फिलहाल निर्माण नहीं कर रहा है, लेकिन मैं जिस शाखा में हूं, वह experiment/hooks

बस यहाँ पुनरावृत्ति:

const dropTarget = createDropTarget(ItemTypes.KNIGHT, {
    canDrop: props => canMoveKnight(props.x, props.y),
    drop: props => moveKnight(props.x, props.y),
})

const BoardSquare = ({ x, y, children }) => {
    const black = (x + y) % 2 === 1
        const ref = useRef(null)
    const [isOver, canDrop] = useDnd(
        connect => connect(ref, dropTarget),
        monitor => monitor.isOver,
        monitor => monitor.canDrop,
    )

    return (
        <div ref={ref}>
            <Square black={black}>{children}</Square>
            {isOver && !canDrop && <Overlay color={'red'} />}
            {!isOver && canDrop && <Overlay color={'yellow'} />}
            {isOver && canDrop && <Overlay color={'green'} />}
        </div>,
    )
}

यह इस प्रकार है कि ड्रैगसोर्स और ड्रॉपटार्ग काम कर सकता है, यदि हम रेफ को पहले तर्क के रूप में उपयोग करते हैं, तो बाकी तर्क इसे कई dnd अवधारणाओं से जोड़ सकते हैं।

const dropTarget = createDropTarget(ItemTypes.CARD, {
    canDrop: () => false
    hover(props, monitor) {
        /**/
    },
})
const dragSource = createDragSource(ItemTypes.CARD, {
    beginDrag: props => /*...*/,
    endDrag: (props, monitor) => /*...*/
})

function Card({ text }) {
    const ref = useRef(null)
    const [isDragging] = useDnd(
        connect => connect(ref, dropTarget, dragSource),
        monitor => monitor.isDragging,
    )
    const opacity = isDragging ? 0 : 1

    return (
        <div ref={ref} style={{ ...style, opacity }}>
            {text}
        </div>
    )
}

तो useDnd जैसा दिखेगा

export type DndConcept = DragSource | DropTarget
export type ConnectorFunction = (connector: Connector /*new type*/) => void
export type CollectorFunction<T> = (monitor: DragDropMonitor) => T

export function useDnd(
    connector: ConnectorFunction,
    ...collectors: CollectorFunction[]
): any[] {
    const dragDropManager = useDragDropManager()
        // magic
       return collectedProperties
}

export function useDragDropManager(): DragDropManager {
    return useContext(DragDropContextType)
}

पागल विचार, क्या होगा अगर हम connect और monitor परेशान नहीं हुए?

const Test = props => {
  const ref = useRef(null);
  const { isDragging } = useDragSource(ref, ItemTypes.CARD, {
    canDrag: props.enabled,
    beginDrag: () => ({ id: props.id }),
  });

  return <div ref={ref} style={{ color: isDragging ? 'red' : 'black' }} />
}

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

तो शायद useDragSource(ref, <type>, <spec>, <collect>) । यह बहुत सारे तर्क हैं, और एक दूसरे के बगल में दो मोटी वस्तुएं होना अजीब हो सकता है

क्या हम अभी मॉनिटर से सभी सहारा वापस कर सकते हैं?

हो सकता है, मुझे लगता है कि यह एकमात्र तरीका है जिससे परेशानी होगी: https://github.com/react-dnd/react-dnd/blob/84db06edcb94ab3db37e8fe89fcn55b1ad07ce/packages/react/drc/src/interfaces.ts#117

IIRC, DragSourceMonitor, DropTragetMonitor, और DragLayerMonitor सभी को DragDropMonitor वर्ग में नीचे फेंक देते हैं। इसलिए मुझे नहीं लगता कि हम टकराव के नामकरण में भाग लेंगे, लेकिन मैं इसकी दोहरी जांच करूंगा।

@yched सिर्फ इस और हुक के साथ खेल रहा है और हमने देखा कि हमें रेफरी को पास करना है। मामला देखें जब कोई स्रोत और लक्ष्य दोनों हो।

const Test = () => {
  const ref = useRef(null)
  const source = useDragSource(ref, …props)
  const target = useDragTarget(ref, …props)

  return <div ref={ref}>…</div>
}

@ jacobp100 वास्तव में, समझ में आता है।

ठीक है, विचार,

const Test = (props) => {
  const ref = useRef(null)
  const sourceMonitor = useDragSource(ref, 'item' {
    beginDrag: () => ({ id: props.id })
  })
  const targetMonitor = useDropTarget(ref, ['item'] {
    drop: () => alert(targetMonitor.getItem().id)
  })
  const { isDragging } = useMonitorSubscription(targetMonitor, () => ({
    isDragging: targetMonitor.isDragging()
  })

  return <div ref={ref}>…</div>
}

ध्यान दें कि ड्रैग सोर्स और टारगेट के लिए चश्मा किसी भी पैरामीटर को प्राप्त नहीं करते हैं, क्योंकि आपके पास पहले से ही पहुंच है

useMonitorSubscription अपडेट को कम करने के लिए ऑब्जेक्ट पर एक उथले के बराबर कर सकते हैं

मैंने यहां एक प्रारंभिक रूप लिया

मुझे लगता है कि useDragSource(ref, <type>, <spec>, <collect>) का प्रस्ताव वह प्रस्ताव है जो वास्तव में अच्छा काम करता है और बहुत अधिक परिवर्तन नहीं लाता है। फर्क सिर्फ इतना है कि आप एक हॉक से हुक में बदलते हैं।

इसके अलावा एक दूसरे के बगल में दो मोटी वस्तुएं होना मेरी राय में बहुत बड़ी समस्या नहीं है क्योंकि आपको पहले भी ऐसा करना था:

const DragDrop = () => {
  const ref = useRef(null);

  const dragSource = {
    beginDrag() {
      return props;
    }
  };

  const collectSource = monitor => {
    return {
      isDragging: monitor.isDragging()
    };
  };

  const { isDragging } = useDragSource(ref, "Item", dragSource, collectSource);

  const dropTarget = {
    drop() {
      return undefined;
    }
  };

  const collectTarget = monitor => {
    return {
      isOver: monitor.isOver()
    };
  };

  const { isOver } = useDropTarget(ref, "Item", dropTarget, collectTarget);

  return <div ref={ref}>Drag me</div>;
};

अच्छी बात यह है कि आप अन्य हुक से भी मानों का उपयोग कर सकते हैं।

const Drag = () => {
  const ref = useRef(null);
  const context = useContext(Context)

  const dragSource = {
    beginDrag() {
      context.setDragItem(props)
      return props;
    },
    endDrag() {
      context.setDragItem(null)
    }
  };

  const collectSource = monitor => {
    return {
      isDragging: monitor.isDragging()
    };
  };

  const { isDragging } = useDragSource(ref, "Item", dragSource, collectSource);

  return <div ref={ref}>Drag me</div>;
};

एक अच्छा लाभ यह है कि हम प्रॉप्स और कंपोनेंट को तर्कों की शुरुआत से हटा सकते हैं और अन्य सभी फ़ंक्शन स्वीकार करते हैं क्योंकि आपके पास पहले से ही इस दायरे में उनकी पहुंच है।

^ मैंने अपनी पिछली टिप्पणी को केवल यह दिखाने के लिए अपडेट किया है कि collectSource फ़ंक्शन के लिए मॉनिटर में पास नहीं होता है - आप बस दायरे से पढ़ते हैं

@ जैकोबप 100 मैं देख रहा हूं। मेरे लिए, सवाल यह होगा कि क्या हमें मॉनिटर से डेटा इकट्ठा करने के लिए एक और हुक की आवश्यकता है या यदि हम इसे यूजड्राग्रस सोर्स और यूज़ड्रॉपटार्ग में भी लागू कर सकते हैं।

यह तब समझ में आया जब सामान एचओसी था, जहां आपको कनेक्ट सामान को वैसे भी लिंक करना था।

लेकिन अब उन्हें युगल करने की कोई तकनीकी आवश्यकता नहीं है, इसलिए मैंने उन्हें अलग छोड़ दिया।

तब आपके पास उनके साथ अधिक स्वतंत्रता है - शायद एक या एक से अधिक बाल घटकों को परिवर्तनों की निगरानी करने के लिए प्रतिक्रिया करने के लिए, लेकिन उस घटक को नहीं जो घसीटना शुरू किया जाता है। इसमें एक अतिरिक्त बोनस भी है कि यदि आप मॉनिटर सदस्यता का उपयोग नहीं कर रहे हैं, तो हुक को हिलाया जा सकता है।

उस ने कहा, यह एक प्रारंभिक मसौदा है! मैं इसे बदलने का विरोध नहीं कर रहा हूँ अगर यह आम सहमति है!

यह एक अच्छा तर्क है। मेरे द्वारा देखी जाने वाली एक और एकमात्र समस्या यह है कि उपयोगकर्ता को भ्रमित किया जा सकता है जब वे मॉनिटर को सीधे कॉल करते हैं और आश्चर्य करते हैं कि यह सही ढंग से व्यवहार क्यों नहीं करता है:

const Test = (props) => {
  const ref = useRef(null)

  const sourceMonitor = useDragSource(ref, 'item', {
    beginDrag: () => ({ id: props.id })
  })

  const targetMonitor = useDropTarget(ref, ['item'], {
    drop: () => alert(targetMonitor.getItem().id)
  })

  const { isDragging } = useMonitor(targetMonitor, () => ({
    isDragging: targetMonitor.isDragging()
  })

  return <div ref={ref}>{sourceMonitor.isDragging() ? 'Dragging' : 'Drag me'}</div>
}

संभवतः जब आप useMonitor हुक के बाहर फ़ंक्शन को कॉल करते हैं, तो इसे दस्तावेज़ीकरण और चेतावनियों के साथ हल किया जा सकता है।

वास्तव में, यह काम करेगा! यह उन चीजों में से एक है जिन पर मैं 100% उत्सुक नहीं हूं: useMonitor में कॉलबैक का उपयोग परिवर्तन का पता लगाने और वापसी मूल्य दोनों के लिए किया जाता है। ऐसा लगता है कि यह रिएक्ट कोर में वर्तमान हुक के खिलाफ जा रहा है।

शायद इस तरह से कुछ बेहतर काम करता है,

const Test = (props) => {
  ...
  useMonitorUpdates(targetMonitor, () => [targetMonitor.isDragging()]);

  return <div ref={ref}>{sourceMonitor.isDragging() ? 'Dragging' : 'Drag me'}</div>
}

बेशक, इस फ़ॉर्म के साथ बगों को पेश करना बहुत आसान है

मैं रिएक्शन-डीएनडी इंटर्ल्स का 100% निश्चित नहीं हूं, लेकिन क्या वहां मॉनिटर नहीं है इसलिए हमें आपके माउस के मूव्स को कंपोनेंट को रेंडर करने की जरूरत नहीं है?

तो पिछले काम करना बंद कर देगा यदि आप उपयोग को हटाते हैंमॉनिटरस्क्रिप्शन और केवल monitor.isDragging() रेंडर फ़ंक्शन में है?

इसलिए यह सही ढंग से काम नहीं करेगा?

const Test = (props) => {
  const ref = useRef(null)

  const sourceMonitor = useDragSource(ref, 'item', {
    beginDrag: () => ({ id: props.id })
  })

  return <div ref={ref}>{sourceMonitor.isDragging() ? 'Dragging' : 'Drag me'}</div>
}

मॉनीटर में subscribe तरीका है जो अपने श्रोताओं को सूचित करता है जब भी कोई मूल्य अपडेट करता है। इसलिए हमें _something_ करने की आवश्यकता है ताकि घटक को पता हो कि कब अपडेट करना है।

पिछली पोस्ट पर विस्तार करते हुए, यदि हम एक वैकल्पिक विशेषता का पता लगाने में बदलाव का अनुकूलन करते हैं, तो यह उतना ही सरल हो सकता है,

const Test = (props) => {
  ...
  useMonitorUpdates(sourceMonitor);

  return <div ref={ref}>{sourceMonitor.isDragging() ? 'Dragging' : 'Drag me'}</div>
}

एक दो विचार।

सबसे पहले, क्या हम ref तर्क को Ref लागू करने के लिए वैकल्पिक कर सकते हैं?

const dragSource = useDragSource('item', spec);
return <div ref={dragSource}/>

// or if you want to use a ref
const ref = useRef();
const dragSource = useDragSource('item', dragSourceSpec)(ref); 
const dropTarget = useDropTarget('item', dropTargetSpec)(ref); 

दूसरा, उन्हें useMonitorUpdates में एक और हुक लगाने के बजाय, मुझे आश्चर्य है कि क्या हम सिर्फ निम्नलिखित कर सकते हैं:

const dragSource = useDragSource('item', spec);

const { isDragging } = dragSource.subscribe(() => ({
  isDragging: targetMonitor.isDragging()
}));

मैं इसे अभी के लिए बंद करने जा रहा हूं, क्योंकि एक उम्मीदवार एपीआई है। हालांकि नए मुद्दों के साथ उस पर टिप्पणी करने के लिए स्वतंत्र महसूस करें। धन्यवाद!

ऐसा लगता है कि हुक एपीआई के डिज़ाइन में दोष है: https://github.com/Swizec/useDimensions/ues_3

दिलचस्प है, इसलिए मुझे लगता है कि एक विकल्प यह है कि हम एक कनेक्ट फ़ंक्शन का उपयोग करते हैं, जैसे हम वर्तमान में क्लास-आधारित एपीआई में करते हैं:

const Box = ({ name }) => {
    const [{ isDragging }, dragSource] = useDrag({
        item: { name, type: ItemTypes.BOX },
        end: (dropResult?: { name: string }) => {
            if (dropResult) {
                alert(`You dropped ${item.name} into ${dropResult.name}!`)
            }
        },
        collect: monitor => ({
            isDragging: monitor.isDragging(),
        }),
    })
    const opacity = isDragging ? 0.4 : 1

    return (
        <div ref={node => dragSource(node)} style={{ ...style, opacity }}>
            {name}
        </div>
    )
}

तो सामान्य तौर पर, एपीआई की तरह दिखेगा ...

const [props, connectDragSource, connectDragPreview] = useDrag(spec)
const [props, connectDropTarget] = useDrop(spec)

मैं कनेक्टर फ़ंक्शन की आवश्यकता से दूर जाने की उम्मीद कर रहा था, लेकिन अगर एपीआई उनके बिना टूट गया है, तो हम कर सकते हैं

जैसा कि मैंने उस मुद्दे को पढ़ा है - हमारे API समान हैं, लेकिन मुझे लगता है कि समस्या यह है कि वे DOM नोड का माप प्राप्त करने के लिए एक लेआउट प्रभाव का उपयोग कर रहे हैं। हम वास्तव में यहाँ लेआउट इफेक्ट्स का उपयोग नहीं कर रहे हैं, बस dnd-core के साथ DOM नोड्स रजिस्टर कर रहे हैं।

@gaearon , हमारे प्रस्तावित हुक API का उपयोग करने वाले एपीआई के समान है - क्या वह विशिष्ट रूप एक एंटीपैर्टन है (जैसे let [props, ref] = useCustomHook(config) ), या क्या यह समस्या उस समस्या से संबंधित है जिसे लाइब्रेरी हल करने का प्रयास कर रही है?

@darthtrevino जहां तक ​​मैं समझता हूं कि अगर आप यूजड्रेड सोर्स का उपयोग करते हैं और आप रेफरी को एक चाइल्ड कंपोनेंट और चाइल्ड कंपोनेंट के रेंडरर्स के पास भेजते हैं तो हम dnd-core में रजिस्टर्ड डोम नोड को अपडेट नहीं करेंगे:

function Parent() {
  const ref = useRef();
  const dragSource = useDragSource(ref, ...);

  return <Child connect={ref} />;
}

function Child({ connect }) {
  const [open, setOpen] = useState(false);

  function toggle() {
    setOpen(!open);
  }

  return (
    <Fragment>
      <button onClick={toggle}>Toggle</button>
      {open ? <div ref={connect} /> : null}
    </Fragment>
  );
}

Yech। मैं देखूंगा कि क्या मैं इस हफ्ते के लिए इस हफ्ते के बाद के लिए एक परीक्षण मामला बना सकता हूं या नहीं यह साबित करने के लिए कि क्या यह विस्फोट होता है या नहीं

यदि यह ऊपर उठता है, तो कनेक्टर फ़ंक्शंस का उपयोग करना कमबैक होगा

अगर मैंने सब कुछ सही ढंग से किया तो मैं इसे यहाँ पुन: पेश कर पाया: https://codesandbox.io/s/xj7k9x4v4

कबूम , अच्छा काम, धन्यवाद

इसलिए मैंने कल रात का एक समय बिताया है जो हुक एपीआई को कनेक्टर कार्यों का उपयोग करने के लिए काम करता है। जहां तक ​​एपीआई डिजाइन की बात है, मैं वास्तव में इसे नफरत करता हूं।

मेरा अगला विचार यह है कि हम रेफ-ऑब्जेक्ट के बजाय कॉलबैक-रेफ लौटा सकते हैं। यह हमें एक रेफरी के रूप में सीधे उपयोग करने या इसमें एक रेफ पास करने के लिए लचीलापन प्रदान करना चाहिए

सीधे उपयोग करना:

let [props, dragSource] = useDrag({spec}) // dragSource result is a function
return <div ref={dragSource} {...props}>hey</div>

चेनिंग

let [dragProps, dragSource] = useDrag({spec})
let [dropProps, dropTarget] = useDrag({spec})

return <div ref={node => dragSource(dropTarget(node))}>hey</div>

रेफरी वस्तु के साथ

let ref = useRef(null)
let [dragProps, dragSource] = useDrag({spec})
let [dropProps, dropTarget] = useDrag({spec})
dragSource(dropTarget(ref))

return <div ref={ref}>hey</div>

मेरे लिए, यह useLayoutEffect तरह लगता है अगर घटक या उसके किसी भी बच्चे को अपडेट करना चाहिए। अगर ऐसा होता है, तो हम इसका इस्तेमाल कर सकते हैं।

मैंने रिएक्शन रेपो में टिकट बनाया है । टिप्पणी करने के लिए स्वतंत्र महसूस करें।

let [dragProps, dragSource] = useDrag({spec})
let [dropProps, dropTarget] = useDrag({spec})

return <div ref={node => dragSource(dropTarget(node))}>hey</div>

मुझे नहीं पता कि यह कितना अच्छा काम करता है क्योंकि आप रेफरी को हर एक रेंडर के साथ बुलाएंगे। तो हर रेंडर के साथ, आपको कनेक्ट और डिस्कनेक्ट करने की आवश्यकता होगी।

इसके अलावा ऐसा होना बेहतर नहीं होगा

node => {
    dragSource(node)
    dropTarget(node)
}

यह एक ही बात होगी

इसलिए, मेरी पहले की टिप्पणी को आसान बनाने के लिए, # 1280 में एपीआई मुझे पहले से बेहतर होने के लिए आकार दे रहा है। यहाँ या वहाँ टिप्पणी करने के लिए स्वतंत्र महसूस करें