React-window: 버전 2 변경

수평 목록은 우리의 경우 모바일에서 널리 사용됩니다. 우리는 컨트롤과 같은 무한 스크롤 가능한 캐 러셀에도 사용하고 있습니다. IMO는 모바일에 뭔가를 가지고 있어야합니다.

@istarkov 사용 사례를 공유해 주셔서 감사합니다. 수평 윈도우에 대해 _any_ 유효한 사용 사례가 없다고 생각하는 것은 아닙니다. 나는 그들이 훨씬 덜 일반적이라고 생각합니다. (캐 러셀의 경우에도 많은 사람들이 "스크롤"이벤트 기반 윈도우를 필요로하지 않는 왼쪽 / 오른쪽 화살표 탐색을 사용합니다.) 일부를 상쇄하기 위해 v2에 대한 지원을 중단하는 것이 여전히 더 나은 경로라고 생각합니다. 사전 렌더링, 동적 크기 조정 등으로 소개 할 복잡성의

더 간단하고, 성능이 뛰어나며, 더 간단한 코드로 이어질이 더 간결한 접근 방식에 정말 기쁩니다.

큰. 그러나 가변 크기 목록을 삭제하는 것에 대해서는 거의 걱정하지 않습니다. 가변 크기 목록을 DynamicList로 대체 할 계획이지만 항목으로 스크롤 할 수없는 동적 목록의 문제는 일부 구성 요소에 매우 유용한 기능 일 수 있으며 시간이 지남에 따라 이러한 요구 사항이 발생할 수 있으므로 예측할 수 없습니다. 반응 창은 귀하의 요구에 맞습니다.
두 번째 문제는 동적 목록 성능입니다. 가변 크기 목록과 동일한 성능을 동적 목록에 제공 할 수 있다면 scrollToItem을 지원하지 않더라도 드롭해도 괜찮을 수 있지만 그렇지 않은 경우 개발자가 잠길 수 있습니다. 동적 목록이 느리고 항목에 대한 스크롤이 지원되지 않는 이상한 상황, 목록에는 고정 된 항목 높이 만 있습니다.

가변 크기 목록을 DynamicList로 바꿀 계획이지만 항목으로 스크롤 할 수없는 동적 목록의 문제

나는 이것이 내재 된 제한이 아니라 현재 구현 중 하나 일 뿐이라고 생각합니다. 그 기능을 어떻게 제공 할 수 있을지 아이디어가 있습니다. 내가 그것을 해결할 시간이 있는지 여부는 또 다른 질문입니다.

두 번째 문제는 동적 목록 성능입니다. 가변 크기 목록과 동일한 성능을 동적 목록에 제공 할 수 있다면 scrollToItem을 지원하지 않더라도 드롭해도 괜찮을 수 있지만 그렇지 않은 경우 개발자가 잠길 수 있습니다. 동적 목록이 느리고 항목에 대한 스크롤이 지원되지 않는 이상한 상황, 목록에는 고정 된 항목 높이 만 있습니다.

그것도 잘 될지 말하기 어렵다. 동적 목록이 더 많은 작업을 수행해야하는 것처럼 보이므로 제대로 수행되지 않을 가능성이 높습니다. 아마도 차이가 클 수도 있고 아닐 수도 있습니다. 현재 지원하지 않는 부분을 지원하고 싶은데, 새로운 기능을 추가하려면 범위를 줄여야한다고 생각합니다. 현재 변수 목록에 만족한다면 v2로 업그레이드 할 이유가 없습니다 (적어도 조만간).

@bvaughn 이것은 나에게 문서처럼 보입니다!
지난 여름부터이 작업을 해왔나요? ;-)

좀 더 진지하게 말씀 드리면 제가 팬이 아니더라도 렌더링 소품이이 맥락에서 의미가 있다고 생각합니다.

아니요, 오늘 아침에 썼습니다. 😝 피곤합니다.

나는 팬이 아니지만 렌더링 소품이이 맥락에서 의미가 있다고 생각합니다.

왜 팬이 아닌지 자세히 설명해 주시겠습니까?

수평 목록 / 그리드 지원이 AutoSizer (react-virtualized-auto-sizer)와 같은 옵트 인 기능으로 의미가 있습니까?

수평 목록에 react-virtualized와 react-window를 모두 사용했으며 react-window API가 훨씬 더 간단합니다. 더 간단한 API를 원하면서 지원 중단의 필요성을 이해하고 있습니다.

그리드 지원은 아직 계획 중입니다. 수평 지원을 선택하십시오. 나는 그것이 말이되지 않을 것이라고 생각한다.

@bvaughn 저는 일반적으로 render props를 좋아하고 여러분이 설명한 문제를 해결할 것입니다.하지만 중첩 된 논리를 포함 할 수도 있고 포함하지 않을 수도있는 인라인 함수를 권장한다고 생각합니다. 🤔 여기에서 모든 결함은 사용자에게 있습니다. 🙂

벽돌 격자를 깨달을 수 있습니까?

@nikitapilgrim 아니요. react-virtualized 의 Masonry 구성 요소를 사용하는 것이 좋습니다.

https://github.com/bvaughn/react-virtualized/blob/master/docs/Masonry.md

감사합니다.하지만 반응 가상화에서만 작동합니까?

@nikitapilgrim 응. 👍
React-virtualized는 react-window가 지원하지 않는 많은 기능을 지원합니다.

react-window의 범위가 대폭 축소되어 패키지를 더 작고 빠르게 만드는 데 초점을 맞 춥니 다. 😉

react-virtualized의 기능이 필요한 경우 계속해서 사용하는 것이 좋습니다. 여전히 훌륭한 라이브러리입니다!

이 react-virtualized babel 7 문제 에 대한 해결책을 찾고 있었기 때문에 react-window 발견 했습니다 . react-virtualized Masonry 구성 요소를 사용하고 있지만 babel 업그레이드 한 후에는 더 이상 사용할 수 없습니다.

이것은 반응 가상화 문제를보고하는 곳이 아닙니다.

@bvaughn에 동의했습니다. 그러나 자신과 @babangsund는 것을 위의 @nikitapilgrim에 대답 Masonry 구성 요소가 도입되지 않습니다 react-window 사용하는 대신에하고 react-virtualized . 그러나 사용자가 최신 [email protected] 및 [email protected] (예 : create-react-app ) 인 경우 react-virtualized 가 반드시 작동하는 것은 아닙니다.

나는 그것이 같은 토끼 구멍을 내려가는 다른 사람들에게 유용한 정보라고 생각합니다.
¯ \ _ (ツ) _ / ¯

버전 2를 다운로드 할 수있는 동적 크기 목록을 사용하고 싶습니다. 아니면 반응 가상화를 사용해야합니까?

이것이 내 목록이 가변 크기 목록으로 보이는 방식입니다.

이것은 일반적인 지원 문제가 아닙니다. 주제에 대한 의견을 남겨주세요.

피드백에 감사드립니다

나는 trello와 같은 제품에 react-window 를 사용하고 있으며 여기에 몇 가지 생각이 있습니다.

소품 렌더링

이것은 단순함과 언급 된 단점을 피하기위한 좋은 변화처럼 보입니다. 또한 api는 react-native의 FlatList와 더 유사합니다. https://github.com/bvaughn/react-window/issues/85 에서 토론을 읽었던 것을 기억합니다

더 적은 구성 요소
더 이상 수평 목록 지원 없음

저는 horizontal 지원 및 VariableSizeList 제거에 대해 적극 투표합니다. 상상할 수 있듯이 이것이 제가 사용하는 주요 두 가지입니다. 그들의 구현은 유지하기에는 너무 많은 부담이 있습니까? 그렇지 않다면 재고하고 유지하시기 바랍니다.

다른 변화에 대한 강한 의견은 없습니다. overscanCount 제거는 약간 걱정되지만 아직 사용자 지정 값이 필요한 사용 사례에 직면하지 않았으므로 괜찮을 것입니다.

안녕하세요 @bvaughn! 이 패키지에 감사드립니다! 직장에서 내 프로젝트에 버전 2를 통합하려고합니다. 이것이 언제 출시 될지에 대한 야구장이 있습니까?

이 라이브러리에 감사 드리며 향후 출시 계획을 공유하면 기술 부채를 줄이는 데 큰 도움이됩니다.

최신 react-window 이상 버전 2를 사용하여 WindowScroller 동작을 수행하는 "간단한"방법이 있습니까?

이것이 불가능하다면이 버전 2의 경계를 벗어난 것일까 요? 아니면 나중에 추가 할 수 있습니까?

내 컨텍스트에는 내 레이아웃에 바닥 글이 포함되어 있으며 DynamicSizeList 와 같은 현대적인 접근 방식을 사용하면 두 번째 스크롤 막대가 도입됩니다 (하나는 페이지 용, 다른 하나는 제품 목록 용).

훌륭한 패키지. 기본적으로 동적 높이 목록을 간절히 기다리고 있습니다. 현재 렌더링 된 행 높이를 상위 목록에 다시 전달하기위한 사용자 지정 논리를 작성했습니다. 이 새 버전을 사용하여 해당 논리를 제거 할 수 있기를 바랍니다. 작업 해주셔서 감사합니다!

트윗 담아 가기

이미 창 스크롤러를 사용하는 방법이 있습니다.
https://github.com/bvaughn/react-window/issues/30#issuecomment -428868071

스크롤하는 방법 좌우 양방향으로 무한 스크롤 !!!

react-virtualized 에 의존하지 않고 WindowScroller 을 (를) 가지고 있다면 그것은 좋을 것입니다. 뒤에 목표 때문에 react-window 그것을에 비해 훨씬 효율적이고 적은 코드 만든 react-virtualized 정도, 내가 사용하지 않으려는 WindowScroller 에서 react-virtualized . 대신 react-virtualized-auto-sizer 와 같은 별도의 패키지를 찾으십시오.

미리 감사드립니다.

@prabusamvel 흠 ..
별도 패키지의 장점은 무엇입니까?

새로운 DynamicSizeList를 가지고 놀았습니다. 아주 멋지다! 나는 방향 유형에 'ttb'와 'btt'(위에서 아래로, 아래에서 위로)를 포함하는 것이 큰 향상이라고 생각합니다. 현재 위쪽으로 스크롤되는 목록을 구현하는 깨끗한 방법은 없지만 다른 모든 방향은 지원됩니다.

@toddmacintyre 이 버전을 찾을 수 없습니다. 2. 누구든지 나를 안내 할 수 있습니까?

@muhammedmagdi npm install react-window@next

버전 2가 여기 사양에서 요구하는 DOM 구조를 지원할 수 있다면 훌륭 할 것입니다. # 217은 여전히 ​​문제이므로 https://www.w3.org/TR/wai-aria-1.1/#grid . 내가 말할 수있는 한 버전 2에 대한 제안은 그렇지 않습니다.

@mjurkowski @bvaughn yarn add react-window@next 설치 1.6.0-alpha.1 . 또한 동적 목록 샌드 박스 예제 https://react-window-next.now.sh/#/examples/list/dynamic -size를 실행하려고하면 Error importing GitHub repository: Could not find package.json

그리드에서도 index 를 전달하는 것은 어떻습니까? :)

애플리케이션의 일부에는 가변 너비 열 헤더가있는 그리드가 필요합니다. 그리드와 결합 된 수평 가변 크기 목록을 사용하고 둘의 스크롤을 동기화하여이를 달성했습니다.

가로 목록을 제거하면 해당 UI를 만들 수 없습니다 (또는 열 머리글 그리드에 단일 행이있는 두 개의 그리드를 사용하려면 적어도 다시 작성해야합니다.

다음 제품은 놀랍습니다. 그러나 수평 및 수직이 모두 필요하므로 https://www.npmjs.com/package/react-infinite-grid-scroller에서 직접 만들었습니다

피드백을 환영합니다.

끈적 끈적한 요소를 지원하는 것이 반응 창에 큰 도움이 될 것이라고 생각합니다. 매우 일반적인 사용 사례이며 목록과 그리드 모두에 대해 구현하는 것이 간단합니다.

API는 다음과 같습니다.

<Grid
    // First 2 columns are sticky
    stickyLeft={2}
    // Last column is not sticky (default value)
    stickyRight={0}
    // First and last rows are sticky
    stickyTop={1}
    stickyBottom={1}
/>

끈적임이 작동하도록하는 두 가지 핵심 요소는 다음과 같습니다.

1. 고정 된 셀만 축에서 창 밖에있는 경우 고정되지 않은 셀을 마운트 해제합니다.
2. 사용 position: sticky 대신 absolute 및 사용 margin-x 대신 left 및 top 끈적하지 않은 축의

이러한 훌륭한 기능의 비용은 합리적으로 보입니다.

• 설치 공간이 최소화 됨
• 성능에 큰 영향을 미치지 않음 (몇 개의 추가 행 / 열만 렌더링)
• 브라우저 지원은 훌륭하며 position: sticky 지원하지 않는 사람들은 일반 버전을 참조하십시오.

이 사용 사례가있는 그대로 지원하기에는 너무 구체적이라고 생각한다면 포인트 1 만 지원하는 것이 좋습니다. 셀을 렌더링해야하는지 여부를 지정할 수 있으면 고 정성을 쉽게 구현할 수 있습니다.

필요한 경우 기꺼이 도와 드리겠습니다.

크기 자동 측정 및 업데이트를 지원하지 않습니다.

나는 이것이 꽤 큰 단점이라고 생각합니다. 내가 작성한 거의 모든 그리드에 대해 3 개 또는 4 개의 고정 너비 열 (상태 레이블, 일부 메타 데이터, 클릭 유도 문안 등)과 나머지 사용 가능한 공간을 차지하는 1 개의 동적 너비 열이 필요합니다.

"지원하지 않는다"는 것이 Autosizer와 같은 추가 코드 및 구성 요소를 추가하여 이것이 가능하지 않다는 것을 반드시 의미하는 것은 아니라는 점에 감사드립니다. 이러한 사용 사례를 잘 고려하고 필요한 솔루션을 문서화하는 것이 좋습니다. 다이나믹 컬럼이지만 그것이 가져 오는 모든 수하물에 대해 반응 가상화를 원하지는 않습니다.

이러한 사용 사례를 잘 고려하고 동적 열이 필요한 사용자를 위해 솔루션을 문서화하는 것이 좋습니다.

완전히 이해되었지만 실제로 는 많은 노력 이 필요하며이 도서관은 사랑의 노동이었습니다 (유료 노력이 아님). 불행하게도 난, 내 아래로 범위 v2의 노력을 완료 혼자 아무것도 더 공격적으로 할 시간이 없었어요. 😞

이러한 사용 사례를 잘 고려하고 동적 열이 필요한 사용자를 위해 솔루션을 문서화하는 것이 좋습니다.

완전히 이해되었지만 실제로 는 많은 노력 이 필요하며이 도서관은 사랑의 노동이었습니다 (유료 노력이 아님). 불행히도 나는 더 공격적인 것은 말할 것도없고 나의 _scoped down_ v2 노력을 마칠 시간조차 없었습니다. 😞

예. 알겠습니다. 바라건대 그러한 노력이 지역 사회를 이끌 수 있기를 바랍니다.

멋지 겠지만 제 경험으로는 결코 일어나지 않습니다.

저는 DynamicSizedList와 함께 WindowScroller 를 사용할 수 없었습니다. 아마도 just-in-time 렌더링으로 인해 scrollTo가 잘 작동하지 않기 때문일 것입니다. 새 버전에서도 가능합니까?

나는이 노력을 마칠 시간이나 에너지가 없다는 사실을 받아 들였다. 누구든지 내가 시작한 지점에 들어가서 끝내고 싶다면 당신의 도움을 환영합니다. ( List 및 Grid 에 대한 자세한 내용은 문제 # 6을 참조하여 Just-In-Time 측정을 지원해야합니다.)

안녕하세요 @bvaughn ,
임의의 메모를 사용하여 포크에 대한 토론 을 만들었습니다.
목록에 포함되지 않아야하거나 올바르지 않은 것이 있으면 알려주십시오. 진행할 때 목록을 완성하겠습니다.

좋은 물건 같네요