为什么使用 useRef 钩子定义的计数器在每次渲染时都不会递增?

Question

我正在尝试使用钩子useRef((来保留下一个要显示的项目的计数器，并在每次渲染时增加计数器并使用计数器值在数组中切片元素。在每次渲染时，计数器 index.current 应该增加 10，但就我而言，它不会增加，并且我一遍又一遍地获得相同的 10 个元素。我不知道为什么。此处的集合概述组件在集合预览组件上映射了 4 次。

//CollectionPreview
const CollectionPreview = ({title,movieItems,Counter}) =>  {
const index = React.useRef(0)
const movieData = movieItems.slice(index.current, index.current + 10)
index.current += 10
return (
<div className="collection-preview">
<h1 className="title">{title.toUpperCase()}</h1>
<div className="preview"> 
{console.log(movieData)}
</div>
</div>
);
}
const mapStateToProps = state => ({
movieItems: selectMovieItems(state),
})
export default connect(mapStateToProps)(CollectionPreview);

//CollectionOverview
class CollectionOverview extends React.Component {
render() {
return (
<div className="collection-overview">
{
CollectionData.map(items => 
<CollectionPreview key={items.id} title={items.title} />)
}
</div>
);
}
}
export default CollectionOverview;

Answer 1

我个人认为计算渲染的数量是一种糟糕的模式，因为渲染可以在不同的场合多次调用，并且随着应用程序变大，很难跟踪每个渲染调用。

我认为更好的方法是在某个州的某个州initialIndex或pageIndex。当您使用 Redux 时，我认为您应该将其放入化简器中并创建适当的操作来增加此值。