如何在react-relay中渲染一個長列表？

Question

用於react-web的惰性滾動列表組件 支持中繼連接，具有分頁提取， ，同時提供良好的性能和內存特性。

兩件事情來管理

• 數據通過提供分頁參數查詢，繼電器店
• 組件渲染，虛擬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 
      } 
     } 
     } 
    `, 
    }, 
});