react-web 的延迟滚动列表组件 返回到中继连接,并进行分页抓取, 同时提供良好的性能和内存特性。
有两件事需要管理
- 通过提供分页参数来查询、操作中继存储来获取数据
- 组件渲染、虚拟 DOM 操作
是否有一些特定的列表组件可以很好地处理这个问题? 是否有实现这种通用机制的既定模式?
最佳答案
这种模式几乎是连接的典型场景。这是一个假设的<PostsIndex>
显示带有“加载更多”按钮的帖子列表的组件。如果您不想在 isLoading
中显式更改 UI声明您可以删除构造函数和 setVariables
打回来。添加基于视口(viewport)的无限滚动也不难;你只需要连接一个滚动监听器到你 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
}
}
}
`,
},
});
关于reactjs - 如何在react-relay中渲染长列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35007667/