Javascript 从服务器加载时呈现React组件上的占位符项

我正在开发一个MERN应用程序，人们可以在其中添加用户创建的内容。我已经合并了一个基本的加载功能，以便在从服务器获取数据时向用户提供反馈。不过，我希望能有一些改进，以提高性能并缩短加载时间

我目前的做法是：

作为一个例子，我将解释我的PostComponent，它将通过调度的redux操作（getPosts）从数据库请求用户创建的帖子。帖子在子组件PostFeed中呈现，随后映射到各个PostItem组件中

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import PostForm from './PostForm';
import PostFeed from './PostFeed';
import Spinner from '../common/Spinner';
import { getPosts } from '../../actions/postActions';

class Posts extends Component {
  componentDidMount() {
    this.props.getPosts();
  }

  render() {
    const { posts, loading } = this.props.post;
    let postContent;

    if (posts === null || loading) {
      postContent = <Spinner />;
    } else {
      postContent = <PostFeed posts={posts} />;
    }

    return (
      <div className="feed">
        <div className="container">
          <div className="row">
            <div className="col-md-12">
              <PostForm />
              {postContent}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Posts.propTypes = {
  getPosts: PropTypes.func.isRequired,
  post: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  post: state.post,
});

export default connect(mapStateToProps, { getPosts })(Posts);

后减速器：

...
export default function (state = initialState, action) {
  switch (action.type) {
    case POST_LOADING:
      return {
        ...state,
        loading: true,
      };
    case GET_POSTS:
      return {
        ...state,
        posts: action.payload,
        loading: false,
      };
...

这一切都很好，但我对这种方法有两个顾虑：

首先，在加载组件时使用微调器会使页面上的内容有点跳跃。虽然不一定是坏事，但我喜欢创建最无缝的用户体验，并发现实现占位符是一个更优雅的解决方案

如何为每个单独的组件实现占位符项，使内容在加载时不会跳转并保持良好的位置

其次，在加载帖子时，它会加载存储在数据库中的所有可用帖子。我可以想象，当有过多的帖子时，加载所有单个帖子可能会花费太长时间，并占用大量不必要的带宽

如何添加只加载浏览器窗口中显示的内容的功能，以便在用户向下滚动时加载更多内容？可能是通过scroll eventhandler？但它如何决定渲染哪个positem以及保留哪个positem作为占位符呢

希望我解释得足够清楚，对react/redux来说还是比较新的，所以这里可能会有一些错误。欢迎提供任何提示、建议或最佳实践

---

非常感谢

你在这里问了很多问题。首先，听起来您已经掌握了为每个组件显示“骨架”的方法，好消息是有几种解决方案可用，例如使用可定制的SVG（或者您可以自己使用）。文档将解释如何根据您的要求管理每个组件的转换

关于axios API调用返回的“过多”项，如果不知道大致数字（100、1000或更多等）以及返回的数据量是否存在性能问题，则很难说。如果该数字最终出现问题，则您所寻找的称为“虚拟（或无限）”“滚动”和分页，您不是一次请求所有数据，而是分块请求。例如，StackOverflow使用分页，新Reddit使用无限滚动。同样，也有NPM包，例如

...
export default function (state = initialState, action) {
  switch (action.type) {
    case POST_LOADING:
      return {
        ...state,
        loading: true,
      };
    case GET_POSTS:
      return {
        ...state,
        posts: action.payload,
        loading: false,
      };
...