Собираем окно: список, который рисует только видимое

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

ScrollView рисует всё, что ему дали, — значит, давать ему нужно меньше: только строки, которые задевает рамка. Для этого нужны три числа, и все три у нас уже есть. Высоту строки задаём сами, 30 точек. Высота рамки приходит в onLayout, у нас она 120. Смещение — contentOffset.y из onScroll.

Первая видимая строка — та, в которую попал верх рамки: Math.floor(y / 30). Последняя — та, в которую попал низ, то есть y + 120. Здесь одна тонкость: если низ рамки пришёлся ровно на границу строк, следующая строка ещё не видна. И края: номер не должен уйти меньше нуля или дальше последней строки. Функция не знает ни про React, ни про экран — это чистая арифметика, поэтому пример ниже на TypeScript, без экрана.

Прогноз: сколько строк задевает рамка при каждом из пяти смещений? Особенно интересны 45 и −40.

ts

type Range = { first: number; last: number };

function visibleRange(y: number, frameHeight: number, rowHeight: number, total: number): Range {
  // на iOS список пружинит: во время отскока y уходит в минус
  const top = Math.max(0, y);
  const first = Math.min(total - 1, Math.floor(top / rowHeight));
  // низ рамки на границе строк следующую строку ещё не показывает: отсюда ceil минус один, а не floor
  const last = Math.min(total - 1, Math.ceil((top + frameHeight) / rowHeight) - 1);
  return { first, last };
}

for (const y of [0, 45, 600, 29880, -40]) {
  const { first, last } = visibleRange(y, 120, 30, 1000);
  console.log("y =", y, "→ строки", first, "…", last, "| всего", last - first + 1);
}

страница примера

Сначала предположите, что выведет код

При смещении 0 и 600 строк четыре — ровно столько влезает в рамку. При 45 — пять: рамка сдвинута на полторы строки, сверху видна нижняя половина строки 1, снизу — верхняя половина строки 5. Отсюда размер окна: не 120 / 30, а на одну строку больше. В конце списка отсечка по total - 1 не даёт выйти за строку 999.

Отрицательное смещение — не выдумка. На iOS список по умолчанию пружинит: потяните его вниз от начала, и contentOffset.y уйдёт в минус, пока идёт отскок. Без Math.max(0, y) номер первой строки стал бы −2, а slice считает отрицательное начало от конца справочника: slice(-2, 3) — пустой массив, окно без единой строки. У отскока в конце списка смещение, наоборот, больше предельного, и его режет тот же Math.min.

Номер первой строки меняется раз в 30 точек, а смещение — каждый кадр. В состояние поэтому кладут номер, а не смещение: это правило порога из прошлой статьи.

Нарисовать только окно — половина дела. Если положить в ScrollView пять строк, содержимое будет высотой в пять строк, и прокручивать станет некуда. Строки, которых нет, должны занимать своё место. Для этого сверху ставится пустой View высотой first × 30, снизу — такой же, высотой во все строки после окна. Это распорки. Номер первой строки лежит в состоянии — обычный useState, как в части IV.

Функция visibleRange из прошлого раздела с этого места живёт в подложке и объявляется в примерах через declare, как makeCatalog. Прогноз: какие окна напечатаются, какой высоты окажется содержимое и сколько будет вызовов Row и узлов после прокрутки к 600?

rn

const { ScrollView, View, Text, StyleSheet } = ReactNative;
type Exercise = { id: string; name: string; group: string };
type Range = { first: number; last: number };
declare function makeCatalog(count: number): Exercise[];
declare function visibleRange(y: number, frameHeight: number, rowHeight: number, total: number): Range;
declare function countNodes(testID: string): number;

const ROW = 30;
const FRAME = 120;
// рамка, сдвинутая на полстроки, задевает на одну строку больше, чем в неё влезает
const PER_SCREEN = Math.ceil(FRAME / ROW) + 1;
let rowCalls = 0;

function Row({ exercise }: { exercise: Exercise }) {
  rowCalls += 1;
  return (
    <View style={styles.row}>
      <Text>{exercise.name}</Text>
    </View>
  );
}

function WindowedList({ data }: { data: Exercise[] }) {
  // в состоянии номер первой строки, а не смещение: перерисовка — только когда он меняется
  const [first, setFirst] = React.useState(0);
  const last = Math.min(data.length - 1, first + PER_SCREEN - 1);
  React.useEffect(() => console.log("окно:", first, "…", last), [first, last]);
  return (
    <ScrollView
      testID="catalog"
      style={{ height: FRAME }}
      scrollEventThrottle={16}
      onScroll={(e) => setFirst(visibleRange(e.nativeEvent.contentOffset.y, FRAME, ROW, data.length).first)}
      onContentSizeChange={(_, height) => console.log("содержимое:", height)}
    >
      <View style={{ height: first * ROW }} />
      {data.slice(first, last + 1).map((exercise) => (
        <Row key={exercise.id} exercise={exercise} />
      ))}
      <View style={{ height: (data.length - 1 - last) * ROW }} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  row: { height: ROW, justifyContent: "center", paddingHorizontal: 12 },
});

mount(<WindowedList data={makeCatalog(1000)} />);
setTimeout(() => fireEvent.scroll("catalog", 600), 100);
setTimeout(() => {
  console.log("вызовов Row:", rowCalls);
  console.log("узлов в разметке:", countNodes("catalog"));
}, 500);

const { ScrollView, View, Text, StyleSheet } = ReactNative;
type Exercise = { id: string; name: string; group: string };
type Range = { first: number; last: number };
declare function makeCatalog(count: number): Exercise[];
declare function visibleRange(y: number, frameHeight: number, rowHeight: number, total: number): Range;
declare function countNodes(testID: string): number;

const ROW = 30;
const FRAME = 120;
// рамка, сдвинутая на полстроки, задевает на одну строку больше, чем в неё влезает
const PER_SCREEN = Math.ceil(FRAME / ROW) + 1;
let rowCalls = 0;

function Row({ exercise }: { exercise: Exercise }) {
  rowCalls += 1;
  return (
    <View style={styles.row}>
      <Text>{exercise.name}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  row: { height: ROW, justifyContent: "center", paddingHorizontal: 12 },
});

mount(<WindowedList data={makeCatalog(1000)} />);
setTimeout(() => fireEvent.scroll("catalog", 600), 100);
setTimeout(() => {
  console.log("вызовов Row:", rowCalls);
  console.log("узлов в разметке:", countNodes("catalog"));
}, 500);

экран примера

Сначала предположите, что выведет код

разбор вывода
Содержимое — 30000 точек, ровно тысяча строк по 30, хотя нарисовано пять: распорки держат полную высоту, поэтому прокрутка к 600 вообще возможна. Вызовов Row десять: пять при монтировании и пять после сдвига. Строки ex-21…ex-25 пришли новыми, а первые пять ушли из дерева. Узлов 13 вместо 2001: пять строк по два узла, две распорки и внутренняя коробка ScrollView.

В подложке с этой статьи появилась строка CSS overflow-anchor: none, и она не про React Native, а про браузер. У браузера есть привязка прокрутки: если над видимыми строками что-то выросло, он сам сдвигает прокрутку, чтобы строки не прыгали. Окно с распорками такой помощи не переживает. Браузер сдвигает прокрутку, окно пересчитывается от нового смещения, верхняя распорка снова растёт — и так по кругу. Без этой строки список в третьей задаче уезжает сам, раз за разом, по две строки за шаг. ScrollView на телефоне так сам не делает — похожая привязка там включается только явно, пропом maintainVisibleContentPosition, — поэтому в песочнице её выключили: пусть пример ведёт себя как на устройстве.

Уберём обе распорки и оставим одно окно. Прогноз: какой высоты будет содержимое и до какого смещения доедет прокрутка, если попросить 600?

rn

const { ScrollView, View, Text, StyleSheet } = ReactNative;
type Exercise = { id: string; name: string; group: string };
type Range = { first: number; last: number };
declare function makeCatalog(count: number): Exercise[];
declare function visibleRange(y: number, frameHeight: number, rowHeight: number, total: number): Range;

const ROW = 30;
const FRAME = 120;
const PER_SCREEN = Math.ceil(FRAME / ROW) + 1;

function WindowedList({ data }: { data: Exercise[] }) {
  const [first, setFirst] = React.useState(0);
  const last = Math.min(data.length - 1, first + PER_SCREEN - 1);
  return (
    <ScrollView
      testID="catalog"
      style={{ height: FRAME }}
      scrollEventThrottle={16}
      onScroll={(e) => {
        const y = e.nativeEvent.contentOffset.y;
        console.log("y =", y);
        setFirst(visibleRange(y, FRAME, ROW, data.length).first);
      }}
      onContentSizeChange={(_, height) => console.log("содержимое:", height)}
    >
      {data.slice(first, last + 1).map((exercise) => (
        <View key={exercise.id} style={{ height: ROW }}>
          <Text>{exercise.name}</Text>
        </View>
      ))}
    </ScrollView>
  );
}

mount(<WindowedList data={makeCatalog(1000)} />);
setTimeout(() => fireEvent.scroll("catalog", 600), 100);

const { ScrollView, View, Text, StyleSheet } = ReactNative;
type Exercise = { id: string; name: string; group: string };
type Range = { first: number; last: number };
declare function makeCatalog(count: number): Exercise[];
declare function visibleRange(y: number, frameHeight: number, rowHeight: number, total: number): Range;

const ROW = 30;
const FRAME = 120;
const PER_SCREEN = Math.ceil(FRAME / ROW) + 1;

mount(<WindowedList data={makeCatalog(1000)} />);
setTimeout(() => fireEvent.scroll("catalog", 600), 100);

экран примера

Сначала предположите, что выведет код

Содержимое — 150, пять строк, и прокрутка упирается в 30: дальше показывать нечего. Просьбу о 600 браузер урезал до предела, палец на телефоне так же упрётся в конец. До строки 20 теперь не добраться никак.

И даже эти 30 точек показывают не то. При смещении 30 окно сдвинулось на строку 1, строка 0 исчезла сверху, и всё содержимое съехало на строку вверх. Окно считает видимыми строки 1…4, а рамка показывает 2…5. Верхняя распорка держит каждую строку на её законном месте: строка i всегда начинается на i × 30, сколько бы строк над ней ни убрали.

Окно в пять строк верно ровно в тот миг, когда пришёл onScroll. Но прокрутка React не ждёт. На телефоне содержимое едет в нативном потоке прямо под пальцем, JS узнаёт об этом событием чуть позже и ещё позже перерисовывает. В песочнице так же: браузер прокручивает узел сразу, а onScroll приходит асинхронно, как мы видели в прошлой статье. Всё это время на экране то, что нарисовано под старое окно, а при новом смещении там может оказаться пусто.

Лечится запасом: рисуют по несколько строк сверх видимых с каждой стороны. Ниже два списка рядом — без запаса и с запасом в четыре строки. Помощник подложки blankOnScreen меряет, сколько точек рамки ничем не закрыто; как и countNodes, в разметку за пример заглядывает подложка. Мерим сразу после прокрутки, пока onScroll не пришёл, и ещё раз после него. Прогноз: четыре пары чисел.

rn

const { ScrollView, View, Text } = ReactNative;
type Exercise = { id: string; name: string; group: string };
type Range = { first: number; last: number };
declare function makeCatalog(count: number): Exercise[];
declare function visibleRange(y: number, frameHeight: number, rowHeight: number, total: number): Range;
declare function blankOnScreen(testID: string): number;

const ROW = 30;
const FRAME = 120;
const PER_SCREEN = Math.ceil(FRAME / ROW) + 1;
const catalog = makeCatalog(1000);

function WindowedList({ testID, overscan }: { testID: string; overscan: number }) {
  const [first, setFirst] = React.useState(0);
  // запас — лишние строки по обе стороны окна
  const start = Math.max(0, first - overscan);
  const end = Math.min(catalog.length - 1, first + PER_SCREEN - 1 + overscan);
  return (
    <ScrollView
      testID={testID}
      style={{ height: FRAME }}
      scrollEventThrottle={16}
      onScroll={(e) => setFirst(visibleRange(e.nativeEvent.contentOffset.y, FRAME, ROW, catalog.length).first)}
    >
      <View style={{ height: start * ROW }} />
      {catalog.slice(start, end + 1).map((exercise) => (
        <View key={exercise.id} style={{ height: ROW }}>
          <Text>{exercise.name}</Text>
        </View>
      ))}
      <View style={{ height: (catalog.length - 1 - end) * ROW }} />
    </ScrollView>
  );
}

function shift(y: number) {
  fireEvent.scroll("bare", y);
  fireEvent.scroll("padded", y);
  // onScroll ещё не пришёл: на экране то, что нарисовано под старое окно
  console.log("сдвиг к", y, "| пусто без запаса:", blankOnScreen("bare"), "| с запасом:", blankOnScreen("padded"));
  setTimeout(() => console.log("после onScroll:", blankOnScreen("bare"), "|", blankOnScreen("padded")), 300);
}

mount(
  <View>
    <WindowedList testID="bare" overscan={0} />
    <WindowedList testID="padded" overscan={4} />
  </View>,
);
setTimeout(() => shift(90), 100);
setTimeout(() => shift(900), 600);

const { ScrollView, View, Text } = ReactNative;
type Exercise = { id: string; name: string; group: string };
type Range = { first: number; last: number };
declare function makeCatalog(count: number): Exercise[];
declare function visibleRange(y: number, frameHeight: number, rowHeight: number, total: number): Range;
declare function blankOnScreen(testID: string): number;

const ROW = 30;
const FRAME = 120;
const PER_SCREEN = Math.ceil(FRAME / ROW) + 1;
const catalog = makeCatalog(1000);

function shift(y: number) {
  fireEvent.scroll("bare", y);
  fireEvent.scroll("padded", y);
  // onScroll ещё не пришёл: на экране то, что нарисовано под старое окно
  console.log("сдвиг к", y, "| пусто без запаса:", blankOnScreen("bare"), "| с запасом:", blankOnScreen("padded"));
  setTimeout(() => console.log("после onScroll:", blankOnScreen("bare"), "|", blankOnScreen("padded")), 300);
}

mount(
  <View>
    <WindowedList testID="bare" overscan={0} />
    <WindowedList testID="padded" overscan={4} />
  </View>,
);
setTimeout(() => shift(90), 100);
setTimeout(() => shift(900), 600);

экран примера

Сначала предположите, что выведет код

Сдвиг на 90 — это три строки. Без запаса нарисованы строки 0…4, то есть точки 0…150, а рамка теперь стоит на 90…210: 60 точек пусто, две строки белого. С запасом нарисовано до строки 8, и пустоты нет. После onScroll оба окна догоняют смещение. Прыжок на 900 больше любого запаса: пусто в обоих списках, пока не придёт событие. Запас спасает от частых маленьких сдвигов, а не от броска.

FlatList держит запас не в строках, а в высотах рамки. Его проп windowSize по умолчанию равен 21: видимый экран и до десяти экранов сверху и снизу — так написано в комментарии к windowSize в VirtualizedListProps.js — это файл пакета @react-native/virtualized-lists, куда React Native 0.86 вынес окно списка со всеми его описаниями. Наши четыре строки с каждой стороны — ровно по экрану, то есть windowSize={3}. Цена запаса — те самые строки, за которые платил наивный список: чем больше запас, тем меньше пустоты и тем больше работы.

Пустота при быстром броске — не ошибка вашего окна. В шапке VirtualizedList.js это названо прямо: список можно прокрутить быстрее, чем он дорисовывает. Лечат это размером запаса и лёгкой строкой, а не отказом от окна.

Окно не только рисует строки — оно их размонтирует. Строка, уехавшая за край окна, уходит из дерева целиком, вместе со своим состоянием; что бывает с состоянием убранного компонента, разбирала статья «Когда состояние сохраняется, а когда сбрасывается» в части IV. Новое здесь одно: убирает строку не ваш код, а прокрутка, и молча.

Отметка «сделано» у строки — её локальное состояние. Отмечаем первое упражнение, уезжаем к 600 и возвращаемся. Прогноз: что напечатается третьей строкой?

rn

const { ScrollView, View, Text, Pressable } = ReactNative;
type Exercise = { id: string; name: string; group: string };
type Range = { first: number; last: number };
declare function makeCatalog(count: number): Exercise[];
declare function visibleRange(y: number, frameHeight: number, rowHeight: number, total: number): Range;

const ROW = 30;
const FRAME = 120;
const PER_SCREEN = Math.ceil(FRAME / ROW) + 1;
const catalog = makeCatalog(1000);

function Row({ exercise }: { exercise: Exercise }) {
  const [done, setDone] = React.useState(false);
  if (exercise.id === "ex-1") console.log(exercise.name + ":", done ? "отмечено" : "не отмечено");
  return (
    <Pressable testID={exercise.id} style={{ height: ROW }} onPress={() => setDone(!done)}>
      <Text>{done ? "✓ " : ""}{exercise.name}</Text>
    </Pressable>
  );
}

function WindowedList() {
  const [first, setFirst] = React.useState(0);
  const last = Math.min(catalog.length - 1, first + PER_SCREEN - 1);
  return (
    <ScrollView
      testID="catalog"
      style={{ height: FRAME }}
      scrollEventThrottle={16}
      onScroll={(e) => setFirst(visibleRange(e.nativeEvent.contentOffset.y, FRAME, ROW, catalog.length).first)}
    >
      <View style={{ height: first * ROW }} />
      {catalog.slice(first, last + 1).map((exercise) => (
        <Row key={exercise.id} exercise={exercise} />
      ))}
      <View style={{ height: (catalog.length - 1 - last) * ROW }} />
    </ScrollView>
  );
}

mount(<WindowedList />);
setTimeout(() => fireEvent.press("ex-1"), 100);
setTimeout(() => fireEvent.scroll("catalog", 600), 200);
setTimeout(() => fireEvent.scroll("catalog", 0), 500);

const { ScrollView, View, Text, Pressable } = ReactNative;
type Exercise = { id: string; name: string; group: string };
type Range = { first: number; last: number };
declare function makeCatalog(count: number): Exercise[];
declare function visibleRange(y: number, frameHeight: number, rowHeight: number, total: number): Range;

const ROW = 30;
const FRAME = 120;
const PER_SCREEN = Math.ceil(FRAME / ROW) + 1;
const catalog = makeCatalog(1000);

mount(<WindowedList />);
setTimeout(() => fireEvent.press("ex-1"), 100);
setTimeout(() => fireEvent.scroll("catalog", 600), 200);
setTimeout(() => fireEvent.scroll("catalog", 0), 500);

экран примера

Сначала предположите, что выведет код

Отметка пропала. Вернувшаяся строка — новый компонент с новым useState(false), а старый вместе с отметкой исчез, как только строка ушла за окно. У FlatList то же самое, и это записано прямо в исходнике: первая же оговорка в шапке VirtualizedList.js React Native 0.86 — внутреннее состояние не сохраняется, когда содержимое уходит за окно отрисовки. Данные там советуют держать в самом элементе списка или во внешнем хранилище. Как это сделать здесь, — первая задача.

Ключи в окне тоже требовательнее, чем в обычном списке. key={exercise.id} привязывает строку к упражнению. Ключ по месту в окне — индекс внутри slice — в обычном списке ломается при вставке и удалении (статья «Своя сверка: что на самом деле делает key»). В окне он ломается на каждой прокрутке: места в окне одни и те же, а упражнения под ними меняются каждые 30 точек. Это третья задача.

Соберём всё в один компонент: данные, высота рамки и строки, запас и функция, которая рисует строку. Ровно такой набор ручек будет у FlatList в следующей статье. Прогноз: сколько раз вызовется renderRow и сколько узлов окажется в разметке после прокрутки к 600?

rn

const { ScrollView, View, Text } = ReactNative;
type Exercise = { id: string; name: string; group: string };
type Range = { first: number; last: number };
declare function makeCatalog(count: number): Exercise[];
declare function countNodes(testID: string): number;
declare function visibleRange(y: number, frameHeight: number, rowHeight: number, total: number): Range;

type WindowedListProps<T> = {
  testID: string;
  data: T[];
  height: number;
  rowHeight: number;
  overscan: number;
  renderRow: (item: T) => React.ReactNode;
};

function WindowedList<T extends { id: string }>(props: WindowedListProps<T>) {
  const { testID, data, height, rowHeight, overscan, renderRow } = props;
  const [first, setFirst] = React.useState(0);
  const perScreen = Math.ceil(height / rowHeight) + 1;
  const start = Math.max(0, first - overscan);
  const end = Math.min(data.length - 1, first + perScreen - 1 + overscan);
  return (
    <ScrollView
      testID={testID}
      style={{ height }}
      scrollEventThrottle={16}
      onScroll={(e) => setFirst(visibleRange(e.nativeEvent.contentOffset.y, height, rowHeight, data.length).first)}
    >
      <View style={{ height: start * rowHeight }} />
      {data.slice(start, end + 1).map((item) => (
        <View key={item.id} style={{ height: rowHeight }}>
          {renderRow(item)}
        </View>
      ))}
      <View style={{ height: (data.length - 1 - end) * rowHeight }} />
    </ScrollView>
  );
}

let renderCalls = 0;
const catalog = makeCatalog(1000);

mount(
  <WindowedList
    testID="catalog"
    data={catalog}
    height={120}
    rowHeight={30}
    overscan={4}
    renderRow={(exercise) => {
      renderCalls += 1;
      return <Text>{exercise.name}</Text>;
    }}
  />,
);
setTimeout(() => fireEvent.scroll("catalog", 600), 100);
setTimeout(() => console.log("вызовов renderRow:", renderCalls, "| узлов:", countNodes("catalog")), 500);

const { ScrollView, View, Text } = ReactNative;
type Exercise = { id: string; name: string; group: string };
type Range = { first: number; last: number };
declare function makeCatalog(count: number): Exercise[];
declare function countNodes(testID: string): number;
declare function visibleRange(y: number, frameHeight: number, rowHeight: number, total: number): Range;

type WindowedListProps<T> = {
  testID: string;
  data: T[];
  height: number;
  rowHeight: number;
  overscan: number;
  renderRow: (item: T) => React.ReactNode;
};

function WindowedList<T extends { id: string }>(props: WindowedListProps<T>) {
  const { testID, data, height, rowHeight, overscan, renderRow } = props;
  const [first, setFirst] = React.useState(0);
  const perScreen = Math.ceil(height / rowHeight) + 1;
  const start = Math.max(0, first - overscan);
  const end = Math.min(data.length - 1, first + perScreen - 1 + overscan);
  return (
    <ScrollView
      testID={testID}
      style={{ height }}
      scrollEventThrottle={16}
      onScroll={(e) => setFirst(visibleRange(e.nativeEvent.contentOffset.y, height, rowHeight, data.length).first)}
    >
      <View style={{ height: start * rowHeight }} />
      {data.slice(start, end + 1).map((item) => (
        <View key={item.id} style={{ height: rowHeight }}>
          {renderRow(item)}
        </View>
      ))}
      <View style={{ height: (data.length - 1 - end) * rowHeight }} />
    </ScrollView>
  );
}

let renderCalls = 0;
const catalog = makeCatalog(1000);

mount(
  <WindowedList
    testID="catalog"
    data={catalog}
    height={120}
    rowHeight={30}
    overscan={4}
    renderRow={(exercise) => {
      renderCalls += 1;
      return <Text>{exercise.name}</Text>;
    }}
  />,
);
setTimeout(() => fireEvent.scroll("catalog", 600), 100);
setTimeout(() => console.log("вызовов renderRow:", renderCalls, "| узлов:", countNodes("catalog")), 500);

экран примера

Сначала предположите, что выведет код

Узлов 29. Окно при смещении 600 — строки 16…28, тринадцать штук: та самая дюжина вместо тысячи. Каждая строка — два узла, плюс две распорки и внутренняя коробка.

А вызовов 35, а не 22. Девять — при монтировании (строки 0…8), тринадцать — после прокрутки, и ещё тринадцать сверху. Лишний проход — досыл конца из прошлой статьи: react-native-web повторяет onScroll с тем же 600, и setFirst(20) кладёт в состояние то же число. Перерисовки не будет, но React не всегда видит это заранее: иногда он сначала вызывает сам компонент и лишь потом, сравнив состояние через Object.is, пропускает его детей. Такую оговорку делает и описание useState на react.dev. Строки-компоненты в таком проходе не вызываются — поэтому в разделе про распорки вызовов Row было ровно десять. А renderRow вызывается прямо в теле списка, и её проход не пропустить.

Поэтому FlatList вызывает renderItem не в своём теле, а внутри отдельного компонента ячейки — CellRenderer из VirtualizedListCellRenderer.js. В React Native 0.86 это PureComponent: с теми же пропсами ячейка не перерисовывается. В копии списка внутри react-native-web ячейка — обычный Component, так что в песочнице этой защиты нет; чем это оборачивается, покажут две следующие статьи. Остальное соответствует так:

Своё окно	`FlatList` (React Native 0.86)
высота строки и деление	`getItemLayout(data, index)` → `{ length, offset, index }`; без него строки меряются через `onLayout`, а для ещё не измеренных берётся средняя высота (`ListMetricsAggregator.js`)
запас `overscan` в строках	`windowSize` в высотах рамки, по умолчанию 21
первое окно по высоте рамки	`initialNumToRender`, по умолчанию 10 строк; дальше дорисовка пачками по `maxToRenderPerBatch`, тоже 10
распорки — пустые `View`	пустые `View` с ключом `$spacer-…` и высотой из метрик строк
`key={item.id}`	`keyExtractor`, а без него — поле `key` или `id` элемента
`renderRow` в теле списка	`renderItem` внутри ячейки `CellRenderer`; на телефоне она `PureComponent`
состояние строки пропадает за окном	то же самое — первая оговорка в шапке `VirtualizedList.js`

Всё это — нижний этаж, сам React Native: FlatList — тонкая обёртка из самого пакета react-native, а окно у неё — VirtualizedList из пакета @react-native/virtualized-lists; в песочнице работают их копии внутри react-native-web. Чего у нашего окна нет вовсе: строк разной высоты без подсказки, дорисовки запаса пачками, onEndReached. Следующая статья переведёт справочник на FlatList — и найдёт в нём всё, что собрано здесь.

Арифметика окна одинакова везде: деление, распорки и запас не знают, где выполняются. Расходится то, что происходит вокруг них, — прокрутка, события и то, что браузер делает сам. Сведём это в одно место; левая колонка проверена запусками выше, правая — по исходникам React Native 0.86.

Что	В песочнице (react-native-web 0.21)	На телефоне (React Native 0.86)
Когда JS узнаёт о прокрутке	браузер сдвигает узел сразу, `onScroll` приходит асинхронно — отсюда пустота, которую мерили в разделе про запас	содержимое едет в нативном потоке под пальцем, событие доходит до JS позже; пустота при броске та же, о ней предупреждает шапка `VirtualizedList.js`
Конец прокрутки	повтор `onScroll` с тем же смещением через 100 мс тишины — и лишний проход тела списка	повтора нет; конец жеста приходит отдельными событиями `onScrollEndDrag` и `onMomentumScrollEnd`
Над видимыми строками выросла распорка	браузерная привязка прокрутки сдвинула бы смещение, и окно поехало бы само; в подложке она выключена строкой `overflow-anchor: none`	смещение остаётся прежним, пока не задан проп `maintainVisibleContentPosition`
Смещение за краями	`scrollTop` браузера не выходит за края: просьба о −40 даёт 0, о 10000 — предел прокрутки	на iOS список по умолчанию пружинит (`bounces`), и во время отскока `y` выходит за края — ради этого в `visibleRange` стоят `Math.max` и `Math.min`
Ячейка `FlatList`	`CellRenderer` — `React.Component`: перерисовывается с каждым проходом списка	`CellRenderer` — `React.PureComponent`: с теми же пропсами не перерисовывается

Правило то же, что во всей главе: код окна пишется так, чтобы быть верным в обеих колонках. Смещение режется с обеих сторон, даже если в предпросмотре оно за края не выходит. Обработчик onScroll спокойно переживает повтор. В состоянии лежит номер строки, а не смещение.

Окно — это деление: первая строка Math.floor(y / h), последняя Math.ceil((y + H) / h) - 1, с отсечкой по краям. Рамка, сдвинутая не на целое число строк, задевает на одну строку больше, чем в неё влезает.
Распорки — пустые View сверху и снизу — держат полную высоту содержимого и ставят каждую строку на её место. Без них прокрутка упирается в нарисованное.
В состоянии лежит номер первой строки, а не смещение: перерисовка раз в строку, а не каждый кадр. Итог — дюжина строк и 29 узлов вместо тысячи строк и 2001 узла.
Запас с обеих сторон закрывает пустоту, пока onScroll в пути. Бросок дальше запаса всё равно покажет пустоту — у FlatList тоже; там запас задаёт windowSize, по умолчанию 21 экран.
Строка за окном размонтируется вместе со своим состоянием. Ключ — упражнение, а не место в окне; состояние, которое должно пережить прокрутку, держат выше строки.
FlatList — та же миниатюра: getItemLayout вместо деления, windowSize вместо запаса, распорки $spacer-…, keyExtractor вместо key и renderItem внутри ячейки CellRenderer, которая на телефоне с теми же пропсами не перерисовывается.

1/4Рамка 120 точек, строка 30, смещение 45. Сколько строк задевает рамка?

2/4Окно рисует пять строк, а распорок нет. Что увидит пользователь справочника на тысячу упражнений?

3/4В нашем окне у строки своё состояние «отмечено». Строку отметили, прокрутили на тысячу строк вниз и вернулись. Что с отметкой?

4/4Что значит windowSize={21} у FlatList?

Отметка переживает прокрутку

Отметка из раздела «Строка за краем окна» пропадает, стоит строке уехать. Сделайте так, чтобы после возвращения к началу она осталась на месте — не отказываясь от окна.

rn

const { ScrollView, View, Text, Pressable } = ReactNative;
type Exercise = { id: string; name: string; group: string };
type Range = { first: number; last: number };
declare function makeCatalog(count: number): Exercise[];
declare function visibleRange(y: number, frameHeight: number, rowHeight: number, total: number): Range;

const ROW = 30;
const FRAME = 120;
const PER_SCREEN = Math.ceil(FRAME / ROW) + 1;
const catalog = makeCatalog(1000);

function Row({ exercise }: { exercise: Exercise }) {
  const [done, setDone] = React.useState(false);
  if (exercise.id === "ex-1") console.log(exercise.name + ":", done ? "отмечено" : "не отмечено");
  return (
    <Pressable testID={exercise.id} style={{ height: ROW }} onPress={() => setDone(!done)}>
      <Text>{done ? "✓ " : ""}{exercise.name}</Text>
    </Pressable>
  );
}

function WindowedList() {
  const [first, setFirst] = React.useState(0);
  const last = Math.min(catalog.length - 1, first + PER_SCREEN - 1);
  return (
    <ScrollView
      testID="catalog"
      style={{ height: FRAME }}
      scrollEventThrottle={16}
      onScroll={(e) => setFirst(visibleRange(e.nativeEvent.contentOffset.y, FRAME, ROW, catalog.length).first)}
    >
      <View style={{ height: first * ROW }} />
      {catalog.slice(first, last + 1).map((exercise) => (
        <Row key={exercise.id} exercise={exercise} />
      ))}
      <View style={{ height: (catalog.length - 1 - last) * ROW }} />
    </ScrollView>
  );
}

mount(<WindowedList />);
setTimeout(() => fireEvent.press("ex-1"), 100);
setTimeout(() => fireEvent.scroll("catalog", 600), 200);
setTimeout(() => fireEvent.scroll("catalog", 0), 500);
// сейчас после возвращения к началу «не отмечено», а нужно «отмечено» — и окно остаётся окном

const { ScrollView, View, Text, Pressable } = ReactNative;
type Exercise = { id: string; name: string; group: string };
type Range = { first: number; last: number };
declare function makeCatalog(count: number): Exercise[];
declare function visibleRange(y: number, frameHeight: number, rowHeight: number, total: number): Range;

const ROW = 30;
const FRAME = 120;
const PER_SCREEN = Math.ceil(FRAME / ROW) + 1;
const catalog = makeCatalog(1000);

mount(<WindowedList />);
setTimeout(() => fireEvent.press("ex-1"), 100);
setTimeout(() => fireEvent.scroll("catalog", 600), 200);
setTimeout(() => fireEvent.scroll("catalog", 0), 500);
// сейчас после возвращения к началу «не отмечено», а нужно «отмечено» — и окно остаётся окном

экран примера

Сначала предположите, что выведет код

Строка живёт, пока она в окне, а список — пока жив экран. Значит, отметки переезжают из строки в список, и строка получает готовое done и функцию переключения:

tsxлистинг · не запускается

function Row({ exercise, done, onToggle }: { exercise: Exercise; done: boolean; onToggle: (id: string) => void }) {
  if (exercise.id === "ex-1") console.log(exercise.name + ":", done ? "отмечено" : "не отмечено");
  return (
    <Pressable testID={exercise.id} style={{ height: ROW }} onPress={() => onToggle(exercise.id)}>
      <Text>{done ? "✓ " : ""}{exercise.name}</Text>
    </Pressable>
  );
}

function WindowedList() {
  const [first, setFirst] = React.useState(0);
  // отметки живут в списке, а не в строке: список прокрутка не размонтирует
  const [done, setDone] = React.useState<ReadonlySet<string>>(() => new Set());
  const toggle = (id: string) =>
    setDone((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  const last = Math.min(catalog.length - 1, first + PER_SCREEN - 1);
  return (
    <ScrollView
      testID="catalog"
      style={{ height: FRAME }}
      scrollEventThrottle={16}
      onScroll={(e) => setFirst(visibleRange(e.nativeEvent.contentOffset.y, FRAME, ROW, catalog.length).first)}
    >
      <View style={{ height: first * ROW }} />
      {catalog.slice(first, last + 1).map((exercise) => (
        <Row key={exercise.id} exercise={exercise} done={done.has(exercise.id)} onToggle={toggle} />
      ))}
      <View style={{ height: (catalog.length - 1 - last) * ROW }} />
    </ScrollView>
  );
}

function Row({ exercise, done, onToggle }: { exercise: Exercise; done: boolean; onToggle: (id: string) => void }) {
  if (exercise.id === "ex-1") console.log(exercise.name + ":", done ? "отмечено" : "не отмечено");
  return (
    <Pressable testID={exercise.id} style={{ height: ROW }} onPress={() => onToggle(exercise.id)}>
      <Text>{done ? "✓ " : ""}{exercise.name}</Text>
    </Pressable>
  );
}

function WindowedList() {
  const [first, setFirst] = React.useState(0);
  // отметки живут в списке, а не в строке: список прокрутка не размонтирует
  const [done, setDone] = React.useState<ReadonlySet<string>>(() => new Set());
  const toggle = (id: string) =>
    setDone((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  const last = Math.min(catalog.length - 1, first + PER_SCREEN - 1);
  return (
    <ScrollView
      testID="catalog"
      style={{ height: FRAME }}
      scrollEventThrottle={16}
      onScroll={(e) => setFirst(visibleRange(e.nativeEvent.contentOffset.y, FRAME, ROW, catalog.length).first)}
    >
      <View style={{ height: first * ROW }} />
      {catalog.slice(first, last + 1).map((exercise) => (
        <Row key={exercise.id} exercise={exercise} done={done.has(exercise.id)} onToggle={toggle} />
      ))}
      <View style={{ height: (catalog.length - 1 - last) * ROW }} />
    </ScrollView>
  );
}

Теперь третья строка — «отмечено»: вернувшаяся строка снова новый компонент, но спрашивает она список, а список всё помнит. Множество заменяется новым, а не правится на месте, — иначе Object.is не увидел бы изменения (как в части IV). В «Подходе» отметки потом переедут ещё выше, в хранилище главы 6. У FlatList есть подвох, которого нет у нашего окна: список — PureComponent, и если строки зависят от чего-то кроме data, это передают пропом extraData. Подробно — в следующей статье.

Строки разной высоты

В справочнике с заголовками групп первая строка группы вдвое выше: 60 вместо 30. Деление на 30 врёт с первой же строки. Перепишите rangeByOffsets так, чтобы она искала строки по массиву offsets — верхам всех строк, — и не перебирала его целиком.

ts

// в каждой группе первая строка выше остальных: над ней заголовок группы
const heights = Array.from({ length: 120 }, (_, i) => (i % 15 === 0 ? 60 : 30));
// offsets[i] — верх строки i; последний элемент — высота всего содержимого
const offsets = [0];
for (const h of heights) offsets.push(offsets[offsets.length - 1] + h);

function rangeByOffsets(offsets: number[], y: number, frameHeight: number): { first: number; last: number } {
  // ваш код: сейчас все строки считаются одинаковыми, по 30
  const total = offsets.length - 1;
  const top = Math.max(0, y);
  return {
    first: Math.min(total - 1, Math.floor(top / 30)),
    last: Math.min(total - 1, Math.ceil((top + frameHeight) / 30) - 1),
  };
}

for (const y of [0, 480, 1000]) {
  const { first, last } = rangeByOffsets(offsets, y, 120);
  console.log("y =", y, "→ строки", first, "…", last);
}
// сейчас выходит 0 … 3, 16 … 19 и 33 … 37, а видны 0 … 2, 15 … 17 и 30 … 34

страница примера

Сначала предположите, что выведет код

Верхи строк растут, поэтому строку, в которую попала точка, находит двоичный поиск: двадцать сравнений на миллион строк вместо миллиона.

tsлистинг · не запускается

// последняя строка, чей верх не ниже точки y; offsets растут — поэтому двоичный поиск
function rowAt(offsets: number[], y: number): number {
  let lo = 0;
  let hi = offsets.length - 2;
  while (lo < hi) {
    const mid = Math.ceil((lo + hi) / 2);
    if (offsets[mid] <= y) lo = mid;
    else hi = mid - 1;
  }
  return lo;
}

function rangeByOffsets(offsets: number[], y: number, frameHeight: number): { first: number; last: number } {
  const top = Math.max(0, y);
  const bottom = top + frameHeight;
  const first = rowAt(offsets, top);
  const last = rowAt(offsets, bottom);
  // низ рамки ровно на верхней границе строки эту строку ещё не показывает
  return { first, last: last > first && offsets[last] === bottom ? last - 1 : last };
}

// последняя строка, чей верх не ниже точки y; offsets растут — поэтому двоичный поиск
function rowAt(offsets: number[], y: number): number {
  let lo = 0;
  let hi = offsets.length - 2;
  while (lo < hi) {
    const mid = Math.ceil((lo + hi) / 2);
    if (offsets[mid] <= y) lo = mid;
    else hi = mid - 1;
  }
  return lo;
}

function rangeByOffsets(offsets: number[], y: number, frameHeight: number): { first: number; last: number } {
  const top = Math.max(0, y);
  const bottom = top + frameHeight;
  const first = rowAt(offsets, top);
  const last = rowAt(offsets, bottom);
  // низ рамки ровно на верхней границе строки эту строку ещё не показывает
  return { first, last: last > first && offsets[last] === bottom ? last - 1 : last };
}

Выходит 0 … 2, 15 … 17 и 30 … 34. При смещении 1000 строка 30 начинается на 960 и высотой 60, а строка 34 — на 1110, и низ рамки на 1120 её задевает. Пара «верх строки и её высота» — ровно то, что возвращает getItemLayout у FlatList: { offset, length, index }. С ним список ищет строки так же, по готовым числам. Без него он строку сначала рисует, меряет через onLayout и до замера гадает по средней высоте. Как это сказывается на скорости, — через статью.

Отметка переезжает

Здесь ключ строки — её место в окне. Отметьте второе упражнение и прокрутите список на две строки. Предскажите вывод, объясните его и почините одной правкой.

rn

const { ScrollView, View, Text, Pressable } = ReactNative;
type Exercise = { id: string; name: string; group: string };
type Range = { first: number; last: number };
declare function makeCatalog(count: number): Exercise[];
declare function visibleRange(y: number, frameHeight: number, rowHeight: number, total: number): Range;

const ROW = 30;
const FRAME = 120;
const PER_SCREEN = Math.ceil(FRAME / ROW) + 1;
const catalog = makeCatalog(1000);

function Row({ exercise }: { exercise: Exercise }) {
  const [done, setDone] = React.useState(false);
  React.useEffect(() => {
    if (done) console.log("✓ стоит у:", exercise.name);
  }, [done, exercise.name]);
  return (
    <Pressable testID={exercise.id} style={{ height: ROW }} onPress={() => setDone(!done)}>
      <Text>{done ? "✓ " : ""}{exercise.name}</Text>
    </Pressable>
  );
}

function WindowedList() {
  const [first, setFirst] = React.useState(0);
  const last = Math.min(catalog.length - 1, first + PER_SCREEN - 1);
  return (
    <ScrollView
      testID="catalog"
      style={{ height: FRAME }}
      scrollEventThrottle={16}
      onScroll={(e) => setFirst(visibleRange(e.nativeEvent.contentOffset.y, FRAME, ROW, catalog.length).first)}
    >
      <View style={{ height: first * ROW }} />
      {catalog.slice(first, last + 1).map((exercise, slot) => (
        // ключ — место в окне, а не упражнение
        <Row key={slot} exercise={exercise} />
      ))}
      <View style={{ height: (catalog.length - 1 - last) * ROW }} />
    </ScrollView>
  );
}

mount(<WindowedList />);
setTimeout(() => fireEvent.press("ex-2"), 100);
setTimeout(() => fireEvent.scroll("catalog", 60), 200);
// нужно: отметка остаётся у того упражнения, которое нажали

const { ScrollView, View, Text, Pressable } = ReactNative;
type Exercise = { id: string; name: string; group: string };
type Range = { first: number; last: number };
declare function makeCatalog(count: number): Exercise[];
declare function visibleRange(y: number, frameHeight: number, rowHeight: number, total: number): Range;

const ROW = 30;
const FRAME = 120;
const PER_SCREEN = Math.ceil(FRAME / ROW) + 1;
const catalog = makeCatalog(1000);

mount(<WindowedList />);
setTimeout(() => fireEvent.press("ex-2"), 100);
setTimeout(() => fireEvent.scroll("catalog", 60), 200);
// нужно: отметка остаётся у того упражнения, которое нажали

экран примера

Сначала предположите, что выведет код

Вторая строка вывода называет упражнение, которое никто не отмечал. Ключи в окне — места 0…4, и после прокрутки они те же. React видит в месте 1 тот же компонент, оставляет ему состояние done = true и лишь подаёт новые пропсы: вместо «Жим гантелей лёжа» там теперь «Жим гантелей на наклонной скамье». Эффект видит новое имя и печатает. Отметка приклеена к месту на экране, а не к упражнению.

tsxлистинг · не запускается

<Row key={exercise.id} exercise={exercise} />

<Row key={exercise.id} exercise={exercise} />

С ключом по упражнению вывод — одна строка. После прокрутки «Жим гантелей лёжа» уходит из окна и размонтируется вместе с отметкой — это уже первая задача, и лечится она так же. FlatList ключ берёт сам: поле key или id элемента — так сказано в шапке VirtualizedList.js, — а если их нет, номер строки. На этот случай в исходнике VirtualizedList лежит предупреждение «VirtualizedList: missing keys for items…», и по нему выходит, что о номерах вместо ключей FlatList предупредит. Сбудется ли это обещание, проверит запуском следующая статья.

Собираем окно: список, который рисует только видимое

Видеоразбор темы за 5–7 минут

Окно — это делениеПервая и последняя видимая строка из трёх чисел

Распорки держат высотуПустые View вместо строк, которых нет

Запас: пока onScroll в путиПустота между прокруткой и перерисовкой и чем её закрывают

Строка за краем окнаОкно не прячет строки, а размонтирует их

Окно целиком — и что из него сделал FlatListОдна миниатюра, дюжина строк и таблица соответствий

Что на телефоне иначеАрифметика окна одна, а прокрутка вокруг неё — разная

Итогошпаргалка по теме

Проверьте себявопросы по теме

Задачизадачи с решениями

Отметка переживает прокрутку

Строки разной высоты

Отметка переезжает