Javascript 反应惰性加载/无限滚动解决方案

我花了一段时间才弄明白如何使用优秀的

演示惰性加载了滚动图像，但在测试时，我无法获得相同的行为

罪魁祸首是溢出：自动与按预期工作的组件冲突

在React中延迟加载大型图像库/幻灯片的最佳方法是什么

（非常喜欢此组件，但希望调查其他组件）

（看起来很重，但功能丰富）

（由于复杂性，进入壁垒更高）

（直截了当，但不确定是否适合图像）

其他…？

---

我有一个通用的/同构的应用程序，因此上面的一些应用程序将由于无法在服务器上使用窗口对象而中断。

我是的作者，它应该可以与同构的应用程序一起工作。

如果您想要一个更简单的延迟加载解决方案，而不必使用其他人的包/代码，尝试使用

IntersectionObserver

API

我写了一篇关于如何使用它在React组件中延迟加载图像的中级文章（实现与vanillajs基本相同）

您只需要这部分代码（上面文章的片段）：

从“React”导入React；
从“道具类型”导入道具类型；
从“axios”导入axios；
从“反应无限滚动条”导入无限滚动条；
常量样式=主题=>({
根目录：{
textAlign：“居中”，
paddingTop:theme.spating.unit*20
}
});
类父类扩展了React.Component{
状态={
所有职位：[]，
员额：[]，
哈斯莫尔：没错，
第页：0，
页面大小：30，
总计页：0，
总数：0
};
componentDidMount（）{
axios.get（“https://jsonplaceholder.typicode.com/posts）然后（res=>{
设curpage=this.state.curpage；
让posts=res.data.slice(
curpage*this.state.pagesize，
（curpage+1）*this.state.pagesize
);
这是我的国家({
所有帖子：res.data，
职位：职位，
总计：res.data.length，
totalPage:Math.ceil（res.data.length/this.state.pagesize）
});
});
}
loadmoreItem（）{
if（this.state.curpage+1{
日志（“道具：”，道具）；
返回(
身份证件
标题
身体
{props.posts.map（项=>{
返回(
{item.id}
{item.title}
{item.body}
);
})}
下一个
);
};

在这里查看实例

this.observer = new IntersectionObserver(
  entries => {
    entries.forEach(entry => {
      const { isIntersecting } = entry;
      if (isIntersecting) {
        this.element.src = this.props.src;
        this.observer = this.observer.disconnect();
      }
    });
  }, {}
);

import React from "react";
import PropTypes from "prop-types";
import axios from "axios";
import InfiniteScroll from "react-infinite-scroller";
const styles = theme => ({
  root: {
    textAlign: "center",
    paddingTop: theme.spacing.unit * 20
  }
});

class Parent extends React.Component {
  state = {
    allposts: [],
    posts: [],
    hasMore: true,
    curpage: 0,
    pagesize: 30,
    totalPage: 0,
    total: 0
  };

  componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/posts").then(res => {
      let curpage = this.state.curpage;
      let posts = res.data.slice(
        curpage * this.state.pagesize,
        (curpage + 1) * this.state.pagesize
      );
      this.setState({
        allposts: res.data,
        posts: posts,
        total: res.data.length,
        totalPage: Math.ceil(res.data.length / this.state.pagesize)
      });
    });
  }

  loadmoreItem() {
    if (this.state.curpage + 1 < this.state.totalPage) {
      let curpage =
        this.state.curpage < this.state.totalPage
          ? this.state.curpage + 1
          : this.state.curpage;
      let posts = this.state.allposts.slice(
        0,
        (curpage + 1) * this.state.pagesize
      );
      this.setState({ posts: posts, curpage });
    } else {
      this.setState({ hasMore: false });
    }
  }

  render() {
    if (this.state.posts.length === 0) return <h1>loading...</h1>;
    else {
      console.log(this.state);
      return (
        <div>
          <Table
            hasMore={this.state.hasMore}
            posts={this.state.posts}
            loadmoreItem={this.loadmoreItem.bind(this)}
          />
        </div>
      );
    }
  }
}

export default Parent;

const Table = props => {
  console.log("props: ", props);
  return (
    <React.Fragment>
      <div style={{ height: "400px", overflow: "auto" }}>
        <InfiniteScroll
          pageStart={0}
          loadMore={props.loadmoreItem}
          hasMore={props.hasMore}
          loader={
            <div className="loader" key={0}>
              Loading ...
            </div>
          }
          useWindow={false}
          threshold={350}
        >
          <table>
            <tr>
              <th>id</th>
              <th>title</th>
              <th>body</th>
            </tr>
            {props.posts.map(item => {
              return (
                <tr>
                  <td>{item.id}</td>
                  <td>{item.title}</td>
                  <td>{item.body}</td>
                </tr>
              );
            })}
          </table>
        </InfiniteScroll>
      </div>
      <button onClick={props.loadmoreItem}>next</button>
    </React.Fragment>
  );
};