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

Question

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

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() 组件并将其与最后的结果进行比较。

那么为什么我们需要keys什么时候才是真正关于shouldComponentUpdate？

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

假设我们有一个项目列表，例如:

• A -> componentInstanceA
• B -> componentInstanceB
• C -> componentInstanceC

应用过滤器后，必须重新呈现列表以显示新的组件列表，例如:

• C -> ?

如果没有适当的唯一键，之前呈现A 的组件现在将收到C 的prop(s)。即使 C 没有改变，组件也必须重新渲染，因为它接收到完全不同的数据:

• C -> componentInstanceA//哦不!

通过适当的唯一键，呈现C 的组件将再次收到C。 shouldComponentUpdate 然后将能够识别 render() 输出将是相同的，并且组件将不必重新渲染:

• C -> componentInstanceC

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

个人轶事

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

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

到

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

将渲染时间缩短了几秒钟。切勿使用数组索引作为键。