如何在react-relay中呈現長列表？

Question

一個惰性滾動列表組件，用於反應網絡支持到中繼連接，具有分頁提取功能，同時提供良好的性能和內存特性。

要管理兩件事

• 數據獲取通過提供分頁參數來查詢，操縱中繼存儲
• 組件渲染，操縱虛擬DOM

是否有一些特定的列表組件可以很好地處理這個？ 是否存在實施這種共同機制的既定模式？

Answer 1

這種模式幾乎是連接的代表性場景。 這是一個假設的<PostsIndex>組件，它顯示了一個帶有“加載更多”按鈕的帖子列表。 如果您不希望在isLoading狀態下顯式更改UI，則可以刪除構造函數和setVariables回調。 添加基於視口的無限滾動也不難; 你只需要將一個滾動監聽器連接到你的setVariables調用。

class PostsIndex extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isLoading: false};
  }

  _handleLoadMore = () => {
    this.props.relay.setVariables({
      count: this.props.relay.variables.count + 10,
    }, ({ready, done, error, aborted}) => {
      this.setState({isLoading: !ready && !(done || error || aborted)});
    });
  }

  render() {
    return (
      <div>
        {
          this.props.viewer.posts.edges.map(({node}) => (
            <Post key={node.id} post={node} />
          ))
        }
        {
          this.props.viewer.posts.pageInfo.hasNextPage ?
            <LoadMoreButton
              isLoading={this.state.isLoading}
              onLoadMore={this._handleLoadMore}
            /> :
            null
        }
      </div>
    );
  }
}

export default Relay.createContainer(PostsIndex, {
  initialVariables: {
    count: 10,
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on User {
        posts(first: $count) {
          edges {
            node {
              id
              ${Post.getFragment('post')}
            }
          }
          pageInfo {
            hasNextPage
          }
        }
      }
    `,
  },
});