О бесконечной прокрутке в React. js и Material_ui

Question

Я нахожусь в проекте с реакции. js

Для проекта я должен включить доску с бесконечной прокруткой, как Facebook

В этом у меня есть вопрос.

Когда я прокручиваю доску и вспоминаю больше постов, таких как Facebook, работает ли он

, независимо от того, содержит ли он aws только дополнительные посты внизу поста или

, он напоминает весь список и редр aws это

ex) case 1 :  {1,2,3} > scroll > {1,2,3} + {4,5} (additional posts)
    case 2 :  {1,2,3} > scroll > {1,2,3,4,5} (whole posts)

если я сделаю вариант 1, я хочу ноу-хау.

Спасибо!

Answer 1

Вы должны абсолютно предпочесть 1-й метод. Это позволит вам иметь меньший размер полезной нагрузки при извлечении данных из API и обеспечить более плавный пользовательский опыт в целом.

Предположим, что ваш API уже предоставляет вам способ получения posts в определенном диапазоне индекса Например, https://myapi.com/posts?start=0&end=10 вернет вам список из 10 первых сообщений.

В вашем React. js -app вы должны отслеживать последние выбранные вами индексы, и когда вы достигнете конца страницы, вы добавите проиндексировать и получить больше сообщений. Я вставил сюда минималистскую c кодовую базу для блоков, чтобы добиться этого, работающую демонстрацию на CodeSandbox

// Store current index of posts
const [startIndex, setStartIndex] = React.useState(0);

const LoadMorePosts = () => {
  // Load 10 more
  setStartIndex(prev => prev + 10);
};

React.useEffect(() => {
  (async () => {
    // Add search range to url
    const url = `?start=${startIndex}&end=${startIndex + 10}`;
    const posts = await mockApi(url);
    // Append new posts to end of old ones
    setPosts(prev => [...prev, ...posts]);
  })();
}, [startIndex]); // Run this effect when startIndex changes