reactjs - 如何避免重新渲染子组件

Question

我有一个无法修复的渲染问题。在我的应用程序中，我有一个 Posts 组件，它的状态包含一组帖子数据。

[
  { id: "P01", title: "First post", likeCount: 0 },
  { id: "P02", title: "Second post", likeCount: 0 }
]

在这个组件中，我映射了 posts 状态，为 posts 状态内的每个帖子返回一个 Post 组件。

帖子组件

export default function Posts() {
  const [posts, setPosts] = useState(null);

  const fetchPosts = () => {
    setPosts([
      { id: "P01", title: "First post", likeCount: 0 },
      { id: "P02", title: "Second post", likeCount: 0 }
    ]);
  };

  const handleLike = (id) => {
    setPosts(
      posts.map((post) =>
        post.id === id ? { ...post, likeCount: post.likeCount + 1 } : post
      )
    );
  };

  return (
    <div>
      <button onClick={fetchPosts}>Fetch posts</button>
      {posts !== null ? (
        posts.map((post, index) => {
          return <Post key={index} post={post} handleLike={handleLike} />;
        })
      ) : (
        <p>No post to dipslay</p>
      )}
    </div>
  );
}

帖子组件

function Post({ post, handleLike }) {
  console.count("Renders for: " + post.id);
  return (
    <div>
      <h1>{post.title}</h1>
      <p>Like count: {post.likeCount}</p>
      <button onClick={() => handleLike(post.id)}>Like</button>
    </div>
  );
}


export default React.memo(Post);

问题是，每当我喜欢 Post 时，所有其他 Post 组件都会重新呈现。我在子组件 Post 上添加了一个 console.count() 来展示它的实际效果(请参阅下面的沙盒链接)。因此，我遇到了性能问题，因为在我的应用程序中，我有很多帖子要显示，其中包含很多子组件。

我尝试使用 React.memo 包装 Post 组件，但它仍在重新渲染组件，因为 handleLike 函数传递为当 Posts 重新渲染时，组件的 props 也发生了变化。也许可以使用 useMemo/useCallback 钩子(Hook)来避免这个渲染问题，但我不熟悉这些，我无法让它们按我想要的方式工作。

我有哪些选择？

您可以在此处找到简化的演示代码:https://codesandbox.io/s/re-render-issue-esm01

Answer 1

切勿根据 React 的 official document 使用索引作为键.在 React 组件中使用索引作为键会导致不必要的重新渲染。

让我简单解释一下。键是 React 唯一用来识别 DOM 元素的东西。如果将一个项目插入列表或从中间删除一些东西会发生什么？它也会更改其他组件的所有键并重新渲染它们。

要进一步改进，您可以使用 React.memo 和 React.useCallback。您可以在 this link 中找到更多详细信息