即使数组中的每个子项都有其唯一键，React 仍在重新呈现我的列表

Question

因此，据我所知，react 只会使用新键重新渲染新元素。但这对我不起作用。我有一个帖子列表，限制为 3。当用户滚动到页面底部时，我将 3 添加到限制中，这意味着在页面底部应该显示 3 个较旧的帖子。我现在的工作，但整个列表正在重新渲染。它跳到顶部，这也是不想要的（虽然我可以解决这个问题，主要问题是重新渲染）。它们都有唯一的键。我怎样才能防止这种行为？

thisGetsCalledWhenANewPostComesIn(newPost){
    let newPosts = _.clone(this.state.posts);
    newPosts.push(newPost);
    newPosts.sort((a,b) => b.time_posted - a.time_posted); 
    this.setState({posts: newPosts});
}

render(){
     return (
         <div ref={ref => {this.timelineRef = ref;}} style={styles.container}>
             {this.state.posts.map(post =>
                 <Post key={post.id} post={post} />
             )}
         </div>
     );
}

Answer 1

单独拥有唯一键并不能阻止重新渲染未更改的组件。除非你为组件扩展PureComponent或实现shouldComponentUpdate，否则React 将不得不render()将组件与最后的结果进行比较。

那么为什么我们真的需要钥匙shouldComponentUpdate呢？

给列表中的每个组件一个唯一键的目的是将 props 传递给“正确”的组件实例，以便它们可以正确比较新旧 props。

想象一下，我们有一个项目列表，例如：

• A -> 组件实例A
• B -> 组件实例B
• C -> 组件实例C

应用过滤器后，必须重新渲染列表以显示新的组件列表，例如：

• C-> ?

如果没有正确的唯一键，先前呈现的组件A现在将接收C. 即使C没有改变，组件也必须重新渲染，因为它收到了完全不同的数据：

• C -> componentInstanceA // 哦不！

使用正确的唯一键，渲染的组件C将C再次接收。shouldComponentUpdate然后将能够识别 render() 输出将是相同的，并且组件将不必重新渲染：

• C -> 组件实例C

如果您的项目列表需要很长时间来呈现，例如，如果它是一个长列表或每个元素都是一组复杂的数据，那么您将受益于防止不必要的重新呈现。

个人轶事

在一个包含 100 个项目的列表的项目中，每个项目产生 1000 个 DOM 元素，从

list.map((item, index) => <SomeComp key={index} ... />)

到

list.map(item => <SomeComp key={item.id} ... />)

将渲染时间减少了几秒钟。永远不要使用数组索引作为键。