React-window: ScrollSync와의 호환성

먼저 좋은 말씀과 긍정적인 피드백에 감사드립니다. 지금까지 react-window가 잘 작동하고 있다는 소식을 들으니 기쁩니다!

ScrollSync와 같은 구성 요소가 react-window에 의존하는 독립 실행형 패키지로 출시될 수 있다는 점에는 동의합니다.

scroll props에 대한 귀하의 특정 질문과 관련하여 이것은 react-virtualized와 함께 사용한 후 몇 가지 심각한 단점이 있음을 깨달았기 때문에 프로젝트에 기꺼이 적용할 변경 사항이 아닙니다. 궁금한 점이 있으면 React 블로그에 실제로 이에 대해 썼습니다.

https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#anti -pattern-erasing-state-when-props-change

유사한 동기화 동작을 달성하기 위해 react-window가 제공하는 명령형 스크롤 API를 사용할 수 있습니다. 소품을 전달하는 대신 커밋 수명 주기에서 이러한 메서드를 호출하기만 하면 됩니다.

이것이 의미가 있기를 바라지만 그렇지 않은 경우 후속 질문을 자유롭게 하십시오!

그것은 완전히 의미가 있습니다. 제안 감사합니다! 나는 그것을 작동 시켰고 실제로 설정하기가 매우 쉽습니다. 너무 쉬워서 독립 실행형 패키지를 보증하지 않습니다. 문서의 예일 수도 있지만 그게 당신의 전화라고 생각합니다. 나중에 다른 사람이 이 문제를 발견할 경우를 대비하여 작업 중인 Code Sandbox 예제에 대한 링크를 여기에 남길 것입니다.

https://codesandbox.io/s/y3pyp85zm1

TLDR - 헤더 그리드에 ref를 넣고 본문 그리드에 넣습니다.

onScroll={({ scrollLeft }) => this.headerGrid.current.scrollTo({ scrollLeft })}

링크 주셔서 감사합니다! 매우 사려깊습니다.

2018년 11월 8일 목요일 오후 1:09 Reagan Keeler < [email protected] 작성:

그것은 완전히 의미가 있습니다. 제안 감사합니다! 나는 그것을 작동 시켰고,
실제로 설정하기가 매우 쉽습니다. 너무 쉬워서 확실히
독립형 패키지를 보증합니다. 문서의 예일 수도 있지만 그게 당신의 것입니다.
전화하는 것 같아요. 여기에 내 작업 코드 샌드박스 예제에 대한 링크를 남길 것입니다.
다른 사람이 미래에 이 문제를 우연히 발견하는 경우를 대비하여.

https://codesandbox.io/s/y3pyp85zm1

TLDR - 헤더 그리드에 ref를 넣고 본문 그리드에 넣습니다.

onScroll={({ scrollLeft }) => this.headerGrid.current.scrollTo({ scrollLeft })}

—
열기/닫기 상태를 수정했기 때문에 이 메시지가 표시됩니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/bvaughn/react-window/issues/86#issuecomment-437156749 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AABznTUunzEIs6bVQfVsz7T21L2-Pkkoks5utJ17gaJpZM4YVMd7
.

이것을 우연히 발견한 사람에게는 react-virtualized 스크롤 동기화된 상단/오른쪽/하단/왼쪽 고정 슈퍼 그리드가 있었는데 이 lib로 마이그레이션했습니다. 위의 솔루션이 다른 라이브러리에서 ScrollSync 를 사용하는 것보다 더 낫지 않더라도 최소한 성능이 뛰어나고 고통이 덜하다고 말할 것입니다.

또한 새로운 useRef 반응 후크(https://reactjs.org/docs/hooks-reference.html#useref)와도 아주 잘 어울립니다.

const topRef = useRef();
const rightRef = useRef();
const bottomRef = useRef();
const leftRef = useRef();
...
<Grid
  onScroll={({ scrollLeft, scrollTop }) => {
    if (leftRef.current) {
      leftRef.current.scrollTo({ scrollTop });
    }
    if (rightRef.current) {
      rightRef.current.scrollTo({ scrollTop });
    }
    if (topRef.current) {
      topRef.current.scrollTo({ scrollLeft });
    }
    if (bottomRef.current) {
      bottomRef.current.scrollTo({ scrollLeft });
    }
  }}
  ...
/>

멋진! @ranneyd를 공유해 주셔서 감사합니다!

또한 새로운 useRef 반응 후크(https://reactjs.org/docs/hooks-reference.html#useref)와도 아주 잘 어울립니다.

@ranneyd 감사합니다

실제 사례를 공유할 수 있습니까?

@ranneyd 다시 한 번 감사드립니다. 귀하의 접근 방식을 따랐고 스크롤 동기화가

스크롤바의 숨겨진 오버플로는 그리드 끝 근처에서 정렬 불량을 일으킵니다.

이 문제를 해결하는 방법에 대한 제안 사항이 있습니까?

코드샌드박스 예

미리 감사드립니다

@carlosagsmendes 스크롤 막대 때문입니다. 왼쪽에서 높이에서 스크롤 막대 크기를 뺀 높이를 만듭니다. 장치 간에 일관성을 유지하기 위해 CSS를 사용하여 스크롤 막대 크기를 수동으로 하드 코딩합니다. 콘텐츠가 너무 동적이어서 스크롤 막대가 있을 수도 있고 없을 수도 있는 경우 "항목 수 * 항목 크기 < 너비(모든 값이 바로 여기에 있어야 함)"와 같은 작업을 수행한 다음 그에 따라 높이를 변경합니다.

장치 간에 일관성을 유지하기 위해 CSS를 사용하여 스크롤 막대 크기를 수동으로 하드 코딩합니다.

FWIW dom-helpers 패키지에는 현재 장치의 너비를 알려주는 편리한 scrollbarSize 기능 이 있습니다. 하드 코딩보다 나을 수 있습니다.

@bvaughn 네! 나는 그것을 언급하는 것을 잊었다. 그러나 그것은 우리에게 효과가 없었습니다. 내 생각에 문제는 우리가 이미 하드 코딩된 스크롤 바를 하고 있었고 그것이 혼란스러웠다는 것입니다.

요 감사합니다. 나는 그것을 시도 할 것이다!

수평 VariableSizeList에서 작동합니까? 시도했지만 브라우저가 멈춥니다.

onScroll={({ scrollLeft }) => this.headerGrid.current.scrollTo({ scrollLeft })}

VariableSizeGrid 와 잘 작동하지만 스크롤 시 헤더가 약간 뒤처집니다.

@ajaymore 는 헤더 지연이 있으므로 Mac에서 스크롤 휠을 사용할 때 스크롤 동기화 문제가 발생합니다. MacOSX에는 스크롤을 "부드럽게" 만들기 위해 보간하는 자연 스크롤 기능이 내장되어 있습니다. 새로 고침 빈도는 실제로 Chrome의 애니메이션 프레임 속도보다 빠릅니다. 따라서 스크롤하는 요소는 V8/ScrollSync가 DOM을 업데이트할 시간을 갖기 전에 애니메이션됩니다. 이것은 내가 본 적이 없는 기술적 한계입니다.

재미있는 사실: 브라우저에서 스크롤 막대를 수동으로 사용하면(예: 작은 것을 끌어서 구식 방식으로 스크롤하는 것과 같이) 완전히 잘 작동합니다. 보간 기능은 스크롤 휠/트랙 패드 스와이프에 내장되어 있습니다.

@ajaymore 는 헤더 지연이 있으므로 Mac에서 스크롤 휠을 사용할 때 스크롤 동기화 문제가 발생합니다. MacOSX에는 스크롤을 "부드럽게" 만들기 위해 보간하는 자연 스크롤 기능이 내장되어 있습니다. 새로 고침 빈도는 실제로 Chrome의 애니메이션 프레임 속도보다 빠릅니다. 따라서 스크롤하는 요소는 V8/ScrollSync가 DOM을 업데이트할 시간을 갖기 전에 애니메이션됩니다. 이것은 내가 본 적이 없는 기술적 한계입니다.

재미있는 사실: 브라우저에서 스크롤 막대를 수동으로 사용하면(예: 작은 것을 끌어서 구식 방식으로 스크롤하는 것과 같이) 완전히 잘 작동합니다. 보간 기능은 스크롤 휠/트랙 패드 스와이프에 내장되어 있습니다.

@ranneyd 빠른 답변 감사합니다. 한계라는 점에 동의합니다. 대부분의 장치에서 잘 작동하므로 큰 문제는 아닙니다.

@bvaughn position: sticky 가지고 놀아본 적 있나요? 한동안 안써봐서 브라우저 지원이 미약한걸로 아는데, 지원되는 브라우저에서 활용할 수 있는 방법이 없을까요...

@ajaymore 와 동일한 문제가 있습니다. 설명한 대로 수동 스크롤에서는 제대로 작동함). PC에서 Chrome으로 테스트 중이므로 Mac만의 문제는 아닌 것 같습니다... 누군가 이 문제를 해결하는 데 성공했습니까?

@alonrbar Windows PC에서도 동일한 문제가 있습니다.

실제로 저에게 맞는 해결 방법을 찾았습니다.
일반적인 아이디어는 원래 그리드에 숨어 onScroll 이벤트를 훔치는 "그림자 그리드"를 만든 다음 이를 사용하여 원래 그리드와 필요한 다른 그리드를 수동으로 스크롤하는 것입니다. 성능이 약간 느려지지만 모든 그리드가 잘 동기화되도록 유지하므로 트레이드 오프를 고려해야 합니다.

코드는 다음과 같습니다.

import styled from '@emotion/styled';
import * as React from 'react';
import { VariableSizeGrid, VariableSizeGridProps } from 'react-window';
import { SizeUtils } from '../utils';

export interface SyncableGridProps extends VariableSizeGridProps {
    mainGridRef: React.Ref<VariableSizeGrid>;
    shadowGridRef: React.Ref<VariableSizeGrid>;
    hideVerticalScrollbar?: boolean;
}

export class SyncableGrid extends React.PureComponent<SyncableGridProps> {
    public render() {
        const { height, width } = this.props;
        const {
            onScroll,
            mainGridRef: mainGridRef1,
            shadowGridRef: shadowGridRef1,
            ...mainProps
        } = this.props;
        const {
            children,
            style,
            overscanRowsCount,
            overscanColumnsCount,
            overscanCount,
            useIsScrolling,
            onItemsRendered,
            mainGridRef: mainGridRef2,
            shadowGridRef: shadowGridRef2,
            innerRef,
            outerRef,
            ...shadowProps
        } = this.props;
        return (
            <SyncWrapper
                style={{
                    height,
                    width
                }}
            >
                <MainGrid
                    {...mainProps}
                    style={Object.assign({}, style, {
                        overflowY: 'scroll'
                    })}
                    ref={mainGridRef1}
                />
                <GridShadow
                    {...shadowProps}
                    style={{
                        position: 'absolute',
                        top: 0,
                        left: 0
                    }}
                    ref={shadowGridRef1}
                >
                    {() => null}
                </GridShadow>
            </SyncWrapper>
        );
    }
}

// ---------------- //
//      styles      //
// ---------------- //

const SyncWrapper = styled.div`
    position: relative;
    overflow: hidden;
`;

export interface MainGridProps extends VariableSizeGridProps {
    hideVerticalScrollbar?: boolean;
}

export const MainGrid = styled(VariableSizeGrid) <MainGridProps>`
    overflow-y: scroll;
    box-sizing: content-box;
    ${props => {
        if (!props.hideVerticalScrollbar)
            return '';
        const paddingDir = (props.theme.dir === 'rtl' ? 'padding-left' : 'padding-right');
        return `${paddingDir}: ${SizeUtils.scrollbarWidth}px;`;
    }}
`;

export const GridShadow = styled(MainGrid)`
    opacity: 0;
`;

그런 다음 다른 파일에서:

<SyncableGrid
    mainGridRef={this.firstGridMain}
    shadowGridRef={this.firstGridShadow}
    onScroll={this.handleFirstGridScroll}
    // other props omitted for bravity...
>
   // children omitted for bravity...
</SyncableGrid>
<SyncableGrid
    mainGridRef={this.secondGridMain}
    shadowGridRef={this.secondGridShadow}
    onScroll={this.handleSecondGridScroll}
    // other props omitted for bravity...
>
   // children omitted for bravity...
</SyncableGrid>

private handleFirstGridScroll = (e: GridOnScrollProps) => {
    const { scrollTop, scrollLeft } = e;

    // synchronize self
    if (this.firstGridMain.current) {
        this.firstGridMain.current.scrollTo({ scrollTop, scrollLeft });
    }

    // synchronize other grid
    if (this.secondGridMain.current) {
        this.secondGridMain.current.scrollTo({ scrollTop, scrollLeft });
        this.secondGridShadow.current.scrollTo({ scrollTop, scrollLeft });
    }
}

@alonrbar 매력적

그림자 격자가 실제 격자 위에 있는 것처럼 보이죠? 그렇다면 "실제 그리드"의 클릭 이벤트가 작동하지 않습니까? 클릭 이벤트 + x/y 좌표로 약간의 해킹을 할 수 있고 어떻게든 메인 그리드에 적용할 수 있다고 가정합니다.

또한 @barbalex re: Windows에서도 실패합니다.

실제로는 크롬 플래그일 수 있습니다. chrome://flags 에 내용이 있는지 확인

이 문제는 확실히 브라우저 애니메이션 프레임보다 빠르게 "부드럽게" 스크롤하는 것과 관련이 있는 것 같습니다. 순전히 성능/지연 문제가 우려되는 경우 매우 기본적인 스크롤 동기화 구현(한 div의 스크롤 시 다른 div의 스크롤 위치 설정)을 시도하고 동일한 문제가 발생하는지 확인하십시오. React를 범인으로 제거하기 위해 순수한 바닐라 JS에서 할 수도 있습니다.

Ahhh @ranneyd 당신 말이 맞아요 클릭 이벤트를 차단합니다... 그것에 대해 더 생각해야 합니다...

chrome://flags 의 스레드 스크롤 기능이 큰 영향을 미친다고 생각합니다. 이 기능을 끄면 마우스 휠로 스크롤하는 것이 스크롤 막대로 스크롤하는 것만큼 부드럽게 됩니다.

@alonrbar 이것은

메인 그리드에 스크롤 핸들러를 추가합니다. 거기에서 e.preventDefault(); 또는 실제 스크롤을 방지하기 위해 무언가를 수행합니다. 그런 다음 이벤트를 보고 얼마나 많이 스크롤되었는지 파악합니다. 이는 다른 동기화된 항목을 이동하는 데 사용되지만 동일한 요소를 수동으로 스크롤하는 데 사용합니다. 따라서 A를 스크롤하는 대신 해당 정보를 사용하여 B를 스크롤하는 대신 A에서 스크롤을 가로채고 취소한 다음 B와 A 자체를 스크롤하는 데 사용합니다. 그게 효과가 있을까요?

나는 테스트하기 위해 컴퓨터 옆에 있지 않습니다. 꽤 hacky하지만 나는 일할 수 있습니다. @bvaughn 생각?

@barbalex 맞습니다. 저에게도 효과적이지만 모든 사용자가 크롬 플래그를 켜고 끌 수는 없습니다 😔

@ranneyd 방금 살펴보고 소스 코드( link )로 약간 만지작거 렸지만 분명히 스크롤 이벤트를 비활성화할 수는 없습니다. 스크롤 이벤트를 유발할 수 있는 모든 마우스 휠, 터치 및 키보드 이벤트를 가로채는 것뿐 그들을 방지하십시오. 링크(SO)에는 이에 대한 짧은 코드 스니펫이 있지만 이로 인해 훨씬 ​​더 해킹되기 때문에 여전히 그것에 대해 숙고하고 있습니다...

@alonrbar 예, 사용자에게 이 작업을 수행하도록 요청하면 작동하지 않습니다. 시도하려는 _do_ 경우 _할 수__ 있는 링크: chrome://flags/#disable -threaded-scrolling

@alonrbar 어 이것은 좋지 않지만 이미 함께 해킹할 그리드에 적용하는 경우

그냥 스크롤 휠이죠? 화살표 키도 발생합니까?

이것은 허용되는 답변의 스니펫입니다. https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily

function disableScroll() {
  if (window.addEventListener) // older FF
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  document.addEventListener('wheel', preventDefault, {passive: false}); // Disable scrolling in Chrome
  window.onwheel = preventDefault; // modern standard
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
  window.ontouchmove  = preventDefault; // mobile
  document.onkeydown  = preventDefaultForScrollKeys;
}

보시다시피 처리해야 하는 몇 가지 이벤트가 있고 그렇게 함으로써 발생할 수 있는 결과를 고려해야 합니다.

현재로서는 이 문제를 해결하는 데 더 많은 시간을 투자할 수 없기 때문에 가상이 아닌 솔루션을 사용하기로 결정했습니다(완벽하지는 않지만 제 사용 사례에 더 적합함). 여기 와 여기에서 내가 사용하는 코드를 찾을 수 있습니다( react-window 래핑한 라이브러리의 일부입니다).

@alonrbar 예 SO 솔루션이 매우 형편없다는 데 동의합니다.

그러나 귀하의 솔루션은 매우 흥미롭습니다. 나는 그것을 스스로 해결하고 가상화된 테이블과 함께 작동하도록 만들 수 있는지 확인하려고 합니다.

@alonrbar 그래서 실제로 절대 위치 지정을 사용하는 비가상화 구현을 만들었습니다. 스크롤되는 유일한 것은 외부 컨테이너입니다. 스크롤 시 내부 요소의 절대 위치를 지정하는 데 사용되는 상단/왼쪽 값을 업데이트합니다. 그래서 내가 발견한 scrollTo 또는 scrollTop = ... 는 저에게 많은 슬픔을 안겨주었습니다. 그 위에 스크롤 막대는 항상 전체 그리드 외부에 있습니다.

내가 만든이 것은 모든면에 "고정 헤더"를 동적으로 가질 수 있습니다. 그것은 매우 거친 예/poc입니다.

분명히 심각한 문제인 가상화가 부족합니다. 불행히도 이 라이브러리는 기본적으로 스크롤링에서 실행되고 이것은 내부 그리드 스크롤을 제거하기 때문에 이 라이브러리에서 그리드를 래핑할 수 있는지 모르겠습니다. 다음 단계가 무엇인지 확실하지 않습니다.

https://codesandbox.io/embed/non-virtual-scroll-synced-table-ot467

이 라이브러리에 연료를 공급하는 동일한 가상화 논리가 여기에 적용될 수 있다고 생각합니다.

@ranneyd 아주 멋진 구현입니다!

역동적인 그리드 구성이 좋아요 :)

그러나 가장 중요한 것은 스크롤링 대신 절대 위치 지정을 사용하는 아이디어가 이 문제를 해결하는 열쇠일 수 있다는 것입니다. 다른 div 를 도입

react-window 의 render 메소드에 연결할 수 있다면 459행 이상을 구현으로 대체할 수 있습니다. 그런 다음 onscroll 이벤트를 연결하고 필요할 때 그 효과를 비활성화할 수 있습니다(스크롤 막대는 계속 이동하지만 내용이 변경되지 않도록 제어할 수 있음).

@alonrbar 그래서 실제로 가상화 알고리즘을 다시 구현했습니다. 좋지는 않지만 이 Grid가 실제 가상화에 도달했을 때 소스 코드를 보면 기본적으로 동일한 alg입니다. 그러나 실제로 성능은 준수합니다. 지연 없이 200x200 그리드에 도달하고 약간만 있으면 500x500에 도달할 수 있습니다. 내 상사가 더 이상 이 작업을 수행하도록 하면 제안한 대로 렌더링 메서드 구현을 시도할 것입니다. 이는 아마도 실제로 매우 쉬울 것입니다.

내가 만든 그리드에 관심이 있으시면 어딘가에 게시 할 수 있습니다. 당신이 그것을 가져 와서이 라이브러리와 연결하려면 내 손님이 되십시오 😏

@ranneyd 네, 당신이 만든 가상화 솔루션을 보고 싶습니다. 내가 그것을 사용할지는 모르겠지만 확실히 흥미로울 것입니다 :)

또한 오늘 제안한 대로 렌더링 방법에 대한 변경 사항을 구현하기 위해 귀하의 코드를 사용하려고 시도했지만 코드를 다시 읽은 후 생각했던 방식으로 스크롤링을 실제로 연결 해제하지 않은 것으로 나타났습니다. 내 말은 스크롤 막대와 onscroll 이벤트가 여전히 실제 콘텐츠 스크롤과 분리될 수 없다는 것입니다. 나는 당신의 아이디어를 한 단계 더 발전시켜 진정으로 연결이 끊긴 스크롤을 구현했습니다.

https://codesandbox.io/embed/absolute-position-scrolling-1u7vj

코드를 보면 Content 구성 요소 에서 top 및 left 속성을 제거 하면 스크롤 막대가 할 . 이번에는 마우스 이벤트가 차단되지 않는 것도 확인했습니다. 😂
이제 이 구현을 사용하여 onscroll 이벤트를 무시하고 여러 그리드를 수동으로 동기화할 수 있다고 생각합니다. 하지만 물론 더 많은 작업이 필요하므로 다음 시간을 기다려야 합니다...

이 토론은 저에게 호기심을 불러일으켰습니다. 그래서 두 개의 스크롤 동기화된 react-window Grid react-virtualized MultiGrid 와 비교하는 프로젝트를 설정하여 성능이 어떻게 비교되는지 알 수 있습니다. :
https://github.com/bvaughn/react-window-vs-react-virtualized-synced-grids

각각의 사용법을 최대한 비슷하게 만들려고 노력했습니다. 일부 초기 관찰:

• react-window는 DEV 모드에서 눈에 띄게 느려 보이지만 프로덕션 빌드에서는 조금 더 빠르고 반응성이 좋습니다. (여기서 제 편향을 배제하기 어렵습니다. 생산량의 차이가 더 작습니다.)
• react-window는 스크롤 이벤트가 먼저 활성 그리드를 업데이트한 다음 계단식 업데이트를 통해 수동 그리드를 업데이트하기 때문에 훨씬 더 많은 커밋을 수행합니다. 현재 onScroll (커밋 중에 호출되는) 대신 "네이티브"(React) 스크롤 이벤트 핸들러(React의 일괄 업데이트 내에서 호출됨) 전달을 지원하기 위해 Grid 에 패치를 만들었습니다. 단계). 이것은 별도의 계단식 렌더링을 방지하기 때문에 로컬에서 테스트했을 때 매우 유망한 변경 사항인 것 같습니다. 따라서 기본 onScroll 타이밍을 변경하겠습니다.

@bvaughn divA -> onScroll -> setState -> ref.scrollTop을 사용하여 가장 기본적인 바닐라 스크롤 효과 코드를 만들려고 시도했지만 여전히 이 크롬 스레드 스크롤링 문제를 해결할 수 없었습니다. 나는 분명히 반응 상태를 우회하지 않았고 onScroll 핸들러 내에서 ref.scrollTop을 설정했지만 그 외에는 더 기본적인 방법을 생각할 수 없습니다. 가능한 한 적은 수의 단계에서 충분히 빠르게 onScroll -> scrollTop을 얻을 수 없다면 어떻게 수정합니까? 내가 뭔가를 완전히 놓치고 있습니까? 스크롤(또는 scrollTop 설정)을 기반으로 그리드를 이동할 필요가 없는 것 같습니다.

목표는 항상 JavaScript가 스크롤을 관리하는 스레드를 따라갈 수 있도록 최대한 빠르게 하는 것입니다.

나는 반응 상태를 우회하지 않았고 onScroll 핸들러 내에서 ref.scrollTop을 설정했습니다.

명확히하기 위해 이것은 내 repo도하는 일이 아닙니다. 나는 액티브 그리드와 동일한 (React-wrapped) 이벤트 핸들러의 패시브 그리드에서 스크롤 오프셋을 설정하고 있으므로 React는 업데이트를 단일 렌더+커밋으로 일괄 처리합니다. 이것은 아마도 솔직히 _많은_ 차이를 만들지 않을 것입니다.

@ranneyd 와 @bvaughn 이 지금까지 관찰한

1. 많은 구현이 데스크탑 브라우저에서 충분히 잘 작동하지만, 제 주요 사용 사례는 실제로 모바일 장치에 있으며 거기에서 엄청난 성능 차이를 봅니다.

2. 두 개의 단순한 비가상 그리드를 동기화하는 것은 꽤 잘 작동합니다(100% 완벽하지는 않지만 모바일에서도 충분히 가깝습니다). 이것은 내 순진하지만 작동하는 구현 이며 실제로 작동하는 것을 보기 위한 테스트 케이스입니다 ( yarn storybook ).

3. "제어된" 스크롤을 사용하면( 이 주석에서 제안한 대로) 두 그리드를 100% 동기화 상태로 유지하지만 데스크톱에서는 상당히 느리고 모바일에서는 완전히 너무 느립니다. 이것은 (매우 거친 ...) 내 균열입니다. https://github.com/alonrbar/react-window/commit/c39ce7006dbd590d9c640e37f8a1e78826e4688e

   그럼에도 불구하고 "통제된" 전략 이 단일 가상 목록에서

4. 두 분이 이미 제안한 것처럼 _callPropsCallbacks 를 _onScroll 처리기로 직접 이동하면 동기화 지연을 최소화하는 데 도움이 될 수 있다고 생각했습니다. 편집 - 지금 시도했지만 실제로 도움이되지 않았습니다 😞

5. 어떤 식으로든 IMHO는 구성 요소의 나머지 부분(후크일 수도 있음)에서 가상화 논리를 분리하여 렌더링 및 온스크롤 항목을 별도로 처리하고 쉽게 비교하고 런타임에 전환할 수 있도록 하는 것이 좋습니다. 구성 소품. 또한 이 논리를 내보내고 사용자가 동일한 논리를 기반으로 사용자 지정 구성 요소(예: 이 주석의 @ranneyd 솔루션)를 구현할 수 있습니다.

생각?

@alonrbar 절대 위치 지정을 수행하는 내 솔루션은 스크롤을 수행하는 그리드가 없으므로 약 300x300까지 매우 잘 작동합니다. 약간 지연됩니다). 더 큰 크기에서는 큰 배열에 대한 처리/매핑이라고 생각합니다. 몇 가지 최적화가 있다고 생각합니다.
하지만 할 수는 있습니다. 제 상당히 간단한 가상화 구현만큼 스크롤 동기화와 관련이 있다고 완전히 확신할 수는 없습니다. 예를 들어 더 많은 캐싱을 수행할 수 있고 렌더링 기능을 전혀 호출하지 않기 위해 셀을 더 일찍 가상화해야 하는지 여부를 계산할 수 있습니다.

나는 모바일에서 아무것도 테스트하지 않았습니다. 잠시 후에 시도해 볼 수 있는 몇 가지 코드를 제공하겠습니다.

@bvaughn 테스트를 정말 보고 싶습니다. 그는 네이티브 스크롤에 직접 연결하면 문제가 해결되지만 당신은 그렇지 않다고 말합니다. 직접 보고 싶습니다.

가상화 논리를 후크 또는 독립 기능으로 끌어오는 한, 논리가 본질적으로 뷰에 연결되어 있기 때문에 상당히 까다로워집니다. 또한 많은 성능 조정에는 하나의 후크 또는 기능으로 캡슐화하기 어려울 수 있는 캐싱 및 메모이제이션 항목이 포함되거나 최소한 동일한 성능을 얻을 수 있는 정도인 것 같습니다. 그러나 나는 내가 가진 것을 보고 얼마나 많은 논리를 끌어낼 수 있는지 볼 것입니다.

추신:
아마 작동하지 않을 것이라고 방금 생각한 한 가지는 denounce와 같은 것 + CSS 전환을 수행하는 것입니다. 100ms마다 하나의 스크롤 이벤트만 실행하고 움직임을 애니메이션하면 더 좋아 보일 수 있습니다. 또한 상당히 덜 반응적으로 보일 수도 있습니다. 월드 오브 워크래프트와 비슷합니다(지연 또는 긴 대기 시간이 있는 경우 캐릭터를 직선으로 이동한 다음 실제로 이동한 위치에 대한 정보를 얻은 후 수정합니다).

@bvaughn 테스트를 정말 보고 싶습니다. 그는 네이티브 스크롤에 직접 연결하면 문제가 해결되지만 당신은 그렇지 않다고 말합니다. 직접 보고 싶습니다.

저는 그렇게 말하지 않았습니다 :smile: 단지 불필요한 렌더링과 DOM 변형을 방지한다고 말했습니다. 실제 성능에 미치는 영향이 어느 정도인지 나에게는 불분명합니다. 그럼에도 불구하고 전반적으로 긍정적인 변화인 것 같습니다.

@alonrbar @bvaughn 실제로 내 코드를 문서화해야 하지만 여기에 최신 버전이 있습니다.

https://github.com/ranneyd/synced-table

@alonrbar @bvaughn 그래서 여기 내가 방금 발견한 재미있는 것이 있습니다:

내 솔루션은 macbook 화면의 Chrome 75에서 작동하지 않습니다. 동료가 크롬을 업데이트하지 않았을 때 작동했습니다. 외부 모니터를 사용하면 작동합니다. 노트북 화면에서는 지연됩니다.
😩

흠... 외부 모니터와 재생률이나 배율에 약간의 차이가 있습니다. "작동하지 않습니다"라고 말하면 구체적으로 무엇을 의미합니까?

내 잘못이야. 스크롤이 더 이상 동기화되지 않음을 의미합니다. 내 repo를 복제하여 실행하면 외부 모니터와 노트북 화면을 비교할 수 있습니다. 모니터에서 그들은 완벽하게 동기화됩니다. 랩톱 화면에서 헤더가 깜박입니다(스크롤링 요소와 동일한 속도로 업데이트하지 않음).

나는 실제로 포기했고 position: sticky 시도하고 있습니다. 그것은 실제로 작동합니다. 브라우저 지원이 100%는 아니지만 실제로는 1년 전보다 훨씬 나아졌습니다.

작동할 수 있는 폴리필이 아닌 폴리필인 이 라이브러리가 있지만 우리가 목표로 하는 브라우저는 우연히 이 기능을 지원합니다.
https://github.com/dollarshaveclub/stickybits

@alonrbar @bvaughn 이 최신 버전입니다. position: sticky 합니다. readme에서 조금 설명하겠습니다. 코드는 여전히 문서화해야 합니다.

https://github.com/ranneyd/sticky-table

내 솔루션은 macbook 화면의 Chrome 75에서 작동하지 않습니다. 동료가 크롬을 업데이트하지 않았을 때 작동했습니다. 외부 모니터를 사용하면 작동합니다. 노트북 화면에서는 지연됩니다.
😩

@ranneyd 오늘

@bvaughn 그래야 한다고 생각합니다. OS는 60hz를 보내고 있다고 말하고 모니터 사양은 60hz라고 생각하지만 누군가가 거짓말을 해도 놀라지 않을 것입니다 😂

@ranneyd 지금은 useVirtual 후크 및 렌더링에서 로직을 우아하게 분리합니다.
react-window 대한 pull 요청을 어떻게든 생성하고 거기에서 사용하고 렌더 로직을 연결할 수 있는 일종의 renderTable 메서드를 노출할 수 있다면 좋을 것 같습니다. 이렇게하면 라이브러리가 반응 창을 교체하는 대신 래핑할 수 있습니다. 나는 우리가 이 접근 방식을 활용하고 이미 많은 테스트를 거쳤고 널리 퍼진 react-window 내부의 문제를 해결할 수 있다면 선호할 것이라고 믿습니다.

다른 문제로, scrollTo 가 직접 DOM 조작을 사용한다면(상태를 설정하는 것 외에 어떤 경우든 그렇게 하기 전에) 두 테이블을 동기화하는 결과가 더 부드러워질 것이라고 생각합니다. 내가 착각하지 않는다면 @bvaughn 은 또한이 방향으로 무언가를 제안하고있었습니다.

@ranneyd 귀하의 고정 테이블 솔루션은 정말 훌륭해 보이며 사용할 수 있게 되어 매우 기쁩니다. npm 에 사용할 수 있는 API를 출시하는 것을 고려하시겠습니까?

@bvaughn @ranneyd

그래서 꽤 오랜 시간이 지난 후 나는 최근에 이 문제로 돌아왔습니다. 라이브러리와 Recyclerlistview 및 react-virtual-grid의 코드와 아이디어를 사용하여 마침내 원하는 동작, 즉 데스크톱과 모바일 모두에서 잘 작동하는 고정된 행과 열이 있는 고성능 그리드를 달성할 수 있었습니다. 장치(빈/백색 셀 없이 부드러운 스크롤).

그것의 TLDR은 내가 끈적한 위치 지정과 함께 재활용을 사용한다는 것이고 가장 흥미로운 코드는 이 방법 에서 찾을 수 있다는

또 다른 솔루션을 작성하게 된 동기에 대한 크레딧 등이 여기에 있습니다 . 감사 해요!

나중에 다른 사람이 이 문제를 발견할 경우를 대비하여 작업 중인 Code Sandbox 예제에 대한 링크를 여기에 남길 것입니다.
https://codesandbox.io/s/y3pyp85zm1

아주 좋습니다. 완전히 오른쪽으로 스크롤할 때까지: 그러면 헤더가 내용과 잘못 정렬됩니다(스크롤 수직 스크롤 막대의 너비만큼).
혹시라도 그 해결책을 찾았겠습니까?
감사 해요

나중에 다른 사람이 이 문제를 발견할 경우를 대비하여 작업 중인 Code Sandbox 예제에 대한 링크를 여기에 남길 것입니다.
https://codesandbox.io/s/y3pyp85zm1

아주 좋습니다. 완전히 오른쪽으로 스크롤할 때까지: 그러면 헤더가 내용과 잘못 정렬됩니다(스크롤 수직 스크롤 막대의 너비만큼).
혹시라도 그 해결책을 찾았겠습니까?
감사 해요

전체 공개: 나는 실제로 처음부터 내 자신의 버전을 만들었습니다. 이 라이브러리를 기반으로 하는 자체 가상화가 있습니다. 내가 이렇게 한 이유는 MacBook과 특정 Chrome 플래그에서 스크롤 애니메이션이 JS와 다른 타이밍으로 발생하는 문제가 있기 때문입니다. ScrollSync를 사용하려면 너무 많은 전달 함수 호출이 필요하고 너무 느렸습니다. 기본적으로 핵심에 고정 헤더가 있는 라이브러리를 다시 만들어야 했습니다(이 스레드의 앞부분에서 말했듯이 position: sticky 사용하지 않았습니다. 언젠가는 지금 가지고 있는 것을 업로드해야 합니다).

즉, 이 문제를 해결하는 방법은 overflow: scroll 를 사용하여 스크롤 막대를 강제 실행한 다음 해당 패딩을 마지막 셀에 추가하거나 ref 내부에 보이지 않는 div를 넣고 스크롤 막대 크기를 측정하고 DOM 노드를 삭제합니다.

스크롤바 오버레이를 만드는 overflow-y: overlay 를 사용했습니다. 불행히도 웹킷 브라우저에서만 작동합니다.

알겠습니다. 정보 감사합니다. 스티키 헤더는 매우 일반적인 요구 사항이므로 react-window에 스티키한 첫 번째 행 옵션을 추가하는 것만으로도 더 많은 경우에 반응 가상화를 대체하게 될 것입니다. 그렇게 생각하지 않아?

@ranneyd 다시 한 번 감사드립니다. 귀하의 접근 방식을 따랐고 스크롤 동기화가

스크롤바의 숨겨진 오버플로는 그리드 끝 근처에서 정렬 불량을 일으킵니다.

이 문제를 해결하는 방법에 대한 제안 사항이 있습니까?

코드샌드박스 예

미리 감사드립니다

파티에 늦었지만 leftRef에 한 행을 추가하고 오버플로를 숨김으로 설정하면 기본적으로 pb를 해결할 수 있습니다. (leftRef -> main Grid를 동기화하지 않아도 되도록 했습니다.

  const headerRef = React.useRef();
  const leftRef   = React.useRef();

  return <Box classes={{
            root:classes.tableContainer
          }}>
      <AutoSizer>
        {({ height, width }) => (<>
        {/*---------------- LA TABLE -------------*/}
          <Grid
            columnCount={1000}
            columnWidth={100}
            height={height}
            rowCount={1000}
            rowHeight={35}
            width={width}
            onScroll={({ scrollLeft, scrollTop }) => {
              if (leftRef.current) {
                leftRef.current.scrollTo({ scrollTop });
              }
              if (headerRef.current) {
                headerRef.current.scrollTo({ scrollLeft });
              }
            }}
          >
            {({ columnIndex, rowIndex, style }) => (
              <Box style={style} classes={{root:classes.cell}}>
                Item {rowIndex},{columnIndex}
              </Box>
            )}
          </Grid>
          {/*---------------- HEADER -------------*/}
          <Grid
            ref={headerRef}
            outerElementType={React.forwardRef((props, ref) => (
              <div ref={ref}  {...props} style={{...props.style,position:"absolute",overflow:"hidden",top:0,right:0,left:150}} />
            ))}
            columnCount={1001}  /*columns count +1 for scroll problems*/
            columnWidth={100}
            height={60}
            rowCount={1}
            rowHeight={60}
            width={width}
          >
            {({ columnIndex, rowIndex, style }) => (
              <Box style={style} classes={{root:classes.headerCell}}>
                Header {rowIndex},{columnIndex}
              </Box>
            )}
          </Grid>  
          {/*---------------- LEFT COL -------------*/}
          <Grid
            ref={leftRef}
            outerElementType={React.forwardRef((props, ref) => (
              <div ref={ref}  {...props} style={{...props.style,position:"absolute",overflow:"hidden",top:60,left:0}} />
            ))}
            columnCount={1}
            columnWidth={150}
            height={height}
            rowCount={251} /** add 1 for scroll problems at the end */
            rowHeight={140}
            width={150}
          >
            {({ columnIndex, rowIndex, style }) => (
              <Box style={style} classes={{root:classes.headerCell}}>
                Left {rowIndex},{columnIndex}
              </Box>
            )}
          </Grid>  
        </>)}
      </AutoSizer>
    </Box>