React-dnd: Hooks API 토론

이 라이브러리에서 후크 사용을 시작하기를 기다릴 수 없습니다. 유형이 알파에 대해 베이킹 되 자마자 마이그레이션 분기를 설정할 수 있습니다.

나는이 API가 어떻게 보일지 생각하기 위해 실험 / 후크의 브랜치에서 놀고 있습니다. BoardSquare 구성 요소는 다음과 같습니다.

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 가 드래그 / 드롭 항목에 대한 논리적 지식, ID 및 예측을 설정하고 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 참조가 제공되고 후크 자체에서 반환되는 유사한 후크 기반 API (예 const [isOver, canDrop, ref] = useDnd(...) ), 소비 구성 요소가 JSX 트리에 배치 할 준비가 된 것 같습니다.)

그게 효과가 있다고 생각합니다. 여러 후크에서 ref를 사용하는 것이 더 어렵지만 여러 ref를 단일 ref로 결합하는 무언가를 작성하는 것을 막을 수는 없습니다. 이것은 어떤 도서관 이었습니까?

이것에 대한 컨벤션이 무엇인지 봐야 할 것 같아요!

여러 후크에서 ref를 사용하는 것이 더 어렵지만 여러 ref를 단일 ref로 결합하는 것을 작성하는 것을 막을 수는 없습니다.

참, 참 :-)

이것은 어떤 도서관 이었습니까?

다시 찾을 수없는 것 같습니다 atm :-/-지난 2 주 동안 후크에 대한 많은 실험 ...

https://github.com/beizhedenglong/react-hooks-lib 가 있습니다.
const { hovered, bind } = useHover(); return <div {...bind}>{hovered ? 'yes' : 'no'}</div>;
bind 에 심판이 포함되어 있다는 뜻인가요?
[편집 : 아니요, 물론 { onMouseEnter, onMouseLeave } 만 포함합니다 ...]

하지만 다른 API가 후크에서 바로 참조를 반환하는 것을 본 기억이 있습니다.

그다지 많지 않고 현재 건물이 아닌데 제가있는 지점은 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>,
    )
}

이것이 dragSource 및 dropTarget 연결이 작동하는 방식입니다. ref를 첫 번째 인수로 사용하면 나머지 인수가 여러 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' }} />
}

연결을 제거 할 수 있다고 생각하지만 모니터에 대해서는 잘 모르겠습니다. isDragging

그래서 아마도 useDragSource(ref, <type>, <spec>, <collect>) . 그것은 많은 논쟁이며, 두 개의 뚱뚱한 물체가 나란히 붙어있는 것이 이상 할 수 있습니다.

그래도 모니터에서 모든 소품을 반환 할 수 있습니까?

어쩌면,이 문제가 원인이 유일한 방법이라고 생각 : https://github.com/react-dnd/react-dnd/blob/84db06edcb94ab3dbb37e8fe89fcad55b1ad07ce/packages/react-dnd/src/interfaces.ts#L117

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>) 를 갖는 것이 정말 훌륭하게 작동하고 많은 API 변경을 가져 오지 않는 제안이라고 생각합니다. 유일한 차이점은 hoc에서 hook으로 변경한다는 것입니다.

또한 두 개의 뚱뚱한 물체를 나란히 두는 것은 이전에도 그렇게해야했기 때문에 내 생각에는 큰 문제가 아닙니다.

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

좋은 장점 중 하나는 beginDrag 인수에서 props와 구성 요소를 제거 할 수 있다는 것입니다. 그리고 다른 모든 함수는 이미 범위에서 액세스 할 수 있으므로 수락합니다.

^ 방금 마지막 댓글을 업데이트하여 collectSource 가 모니터에서 함수로 전달되지 않음을 보여주었습니다. 방금 스코프에서 읽었습니다.

@ jacobp100 알겠습니다 . 나에게 질문은 모니터에서 데이터를 수집하기 위해 다른 후크가 필요한지 아니면 useDragSource 및 useDropTarget에서도 구현할 수 있는지 여부입니다.

물건이 HOC 였을 때, 어쨌든 연결 물건을 연결해야하는 곳은 의미가있었습니다.

하지만 이제는 더 이상 이들을 연결하기위한 기술적 요구 사항이 없으므로 별도로 두었습니다.

그러면 더 자유롭게 사용할 수 있습니다. 하나 이상의 하위 구성 요소가 모니터 변경 사항에 응답 할 수 있지만 끌기 시작된 구성 요소는 아닙니다. 또한 모니터 구독을 사용하지 않는 경우 해당 후크가 트리 흔들릴 수 있다는 추가 보너스가 있습니다.

즉, 이것은 초기 초안입니다! 그것이 합의라면 나는 그것을 변경하는 것에 반대하지 않습니다!

좋은 주장입니다. 내가 보는 유일한 문제는 사용자가 모니터를 직접 호출 할 때 혼란스러워하고 왜 제대로 작동하지 않는지 궁금해 할 수 있다는 것입니다.

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 의 콜백은 변경 감지와 반환 값 모두에 사용됩니다. React core의 현재 후크에 위배되는 것처럼 느껴집니다.

아마도 이와 같은 것이 더 잘 작동 할 것입니다.

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

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

이 양식으로 버그를 도입하는 것이 훨씬 더 쉽습니다.

반응 및 내부에 대해 100 % 확신하지는 않지만 모니터가 없기 때문에 마우스가 움직일 때마다 구성 요소를 렌더링 할 필요가 없습니까?

따라서 useMonitorSubscription을 제거하고 render 함수에 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()
}));

후보 API가 있으므로 지금은이 항목을 닫겠습니다. 새로운 문제에 대해 자유롭게 의견을 말하십시오. 감사!

후크 API에 디자인 결함이있는 것 같습니다 : https://github.com/Swizec/useDimensions/issues/3

흥미 롭기 때문에 대안은 현재 클래스 기반 API에서하는 것처럼 연결 함수를 사용하는 것입니다.

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

따라서 일반적으로 API는 다음과 같습니다.

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

커넥터 기능을 요구하는 것에서 벗어나고 싶었지만 API가 없으면 API가 손상되면 할 수 있습니다.

그래도 그 문제를 읽었을 때 API는 비슷하지만 DOM 노드를 측정하기 위해 레이아웃 효과를 사용하고 있다는 문제가 있다고 생각합니다. 여기서는 실제로 레이아웃 효과를 사용하지 않고 dnd-core에 DOM 노드를 등록합니다.

@gaearon , 우리가 제안한 후크 API는 useDimensions API와 매우 유사합니다. 특정 형태가 반 패턴 (예 : let [props, ref] = useCustomHook(config) )입니까, 아니면 라이브러리가 해결하려고하는 문제와 특이한가요?

@darthtrevino useDragSource 후크를 사용하고 참조를 하위 구성 요소에 전달하면 하위 구성 요소가 다시 렌더링되는 경우 dnd-core에 등록 된 dom 노드를 업데이트하지 않습니다.

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/xj7k9x4vp4

Kaboom, 좋은 일, 감사합니다 @ k15a . 곧 연결 함수를 사용하도록 후크 API를 업데이트하고 예제를 테스트 케이스로 포함하겠습니다.

그래서 어젯밤에 커넥터 함수를 사용하기 위해 후크 API를 재 작업하는 데 많은 시간을 보냈습니다. API 디자인에 관한 한, 나는 정말 싫어합니다.

내 다음 생각은 ref-object 대신 callback-ref를 반환 할 수 있다는 것입니다. 이를 통해 참조로 직접 사용하거나 참조를 전달할 수있는 유연성을 제공합니다.

직접 사용 :

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>

매 렌더링마다 ref를 호출하는 것처럼 이것이 얼마나 잘 작동하는지 모르겠습니다. 따라서 렌더링 할 때마다 연결하고 연결 해제해야합니다.

또한 그렇게하는 것이 낫지 않을까요

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

똑같은 일이야

따라서 이전 의견을 쉽게 설명하기 위해 # 1280의 API가 처음 생각했던 것보다 더 나아질 것입니다. 여기 또는 거기에 자유롭게 의견을 말하십시오.