[英]How to render a long list in react-relay?
一个惰性滚动列表组件,用于反应网络支持到中继连接,具有分页提取功能,同时提供良好的性能和内存特性。
要管理两件事
是否有一些特定的列表组件可以很好地处理这个? 是否存在实施这种共同机制的既定模式?
这种模式几乎是连接的代表性场景。 这是一个假设的<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
}
}
}
`,
},
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.