admin 管理员组

文章数量: 1086019

I am on the project with react.js

For the project, I am supposed to include board with infinite scroll like Facebook

In that, I have a question.

When I scroll the board and recall more post like Facebook, is it working

whether it draws only additional posts under the bottom of post or

it recalls the whole list and redraws it

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)

if I do case 1, I wanna know-how.

Thanks!

I am on the project with react.js

For the project, I am supposed to include board with infinite scroll like Facebook

In that, I have a question.

When I scroll the board and recall more post like Facebook, is it working

whether it draws only additional posts under the bottom of post or

it recalls the whole list and redraws it

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)

if I do case 1, I wanna know-how.

Thanks!

  • javascript
  • reactjs
  • material-ui
  • infinite-scroll
Share Improve this question edited Mar 21, 2020 at 15:49 keikai 15.2k10 gold badges55 silver badges72 bronze badges asked Mar 21, 2020 at 14:27 Seong Woo KangSeong Woo Kang 511 gold badge1 silver badge2 bronze badges 1
  • If there are a million things in the list and the user scrolls down then eventually there will be a million things on the page and the browser will crash (probably much earlier). Instead of making your life more difficult why not use virtualized. I think this is wat facebook changed to as well so you don't get too many items rendered at some point. – HMR Commented Mar 21, 2020 at 15:58
Add a ment  | 

1 Answer 1

Reset to default 4

You should absolutely prefer 1st method. It will enable you to have smaller payload size when you fetch data from api and provide smoother user experience in general.

Let's assume that your api already provides you a way to fetch posts with in certain index-range, example https://myapi./posts?start=0&end=10 would return you a list of 10 first posts.

In your React.js -app you should then keep track of latest index you have fetched and when you reach end of page you add to index and fetch for more posts. I pasted here minimalistic codebase for blocks to achieve this, working demo on 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

本文标签： javascriptAbout Infinite Scroll in Reactjs and MaterialuiStack Overflow

版权声明：本文标题：javascript - About Infinite Scroll in React.js and Material_ui - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1743998446a2516003.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。