MobX 或 SWR 突变中状态更新的部分组件渲染

Question

问题：当更新 MobX 中的状态或调用 SWR 中的突变时，所有组件都会重新渲染，尽管我只想更新一个元素。

示例代码： 在 React 沙箱中，选择元素时会发生两次渲染（可能是由于 StrictMode）： [React 沙箱链接]

在 Next.js 沙箱中，选择元素时会发生五次渲染： [链接到 Next.js 沙箱]

我尝试在选择帖子时调用 mutate 并添加 active 属性来确定元素是否处于活动状态。然而，这种方法并没有帮助。此外，它并不能完全解决我的问题，因为如果我导航到存在相同帖子的另一个部分，它不会突出显示。

我想要实现的目标：当选择一个元素（例如，一篇文章）时，它会被全局存储并突出显示。如果用户导航到其他部分（未选择新帖子），则在返回到包含所选帖子的部分后，该帖子将继续突出显示。此功能类似于音乐播放器中的功能，其中选择曲目会触发动画，并且当返回到该部分时，动画会持续存在，从而允许用户暂停它。

我还有一个想法，为每个元素添加唯一标识符，然后在 DOM 树中搜索它来具体更改它。但是，我不确定这是否是正确的方法以及是否值得尝试实施。

如果您能提供任何帮助或建议来解决此问题，我将不胜感激！

我正在使用： Next.js 14.2.3 反应18 驻波比2.2.5 MobX 6.12.3 mobx-react-lite 4.0.7

Answer 1

现在您订阅了每个帖子组件中的活动帖子。因此，当活动的更改时，所有这些都会重新渲染，因为它们订阅了这一更改。如果您想减少重新渲染的次数，则需要将

isActive

作为 prop 传递，并仅在父 List 组件中订阅活动帖子。

您还需要保持对传递给 Post 的所有道具的稳定引用，可以通过

observer

来记忆它，为此，我直接将

selectPost={statePosts.setCurentPost}

传递给 Post。

  return (
    <div>
      {posts.map((post, index) => {
        const isActive = currentPost && currentPost.id === post.id;

        return (
          <RenderPost
            post={post}
            index={index}
            selectPost={statePosts.setCurentPost}
            isActive={isActive}
            key={post.id}
          />
        );
      })}
    </div>
  );

因此，重新渲染的数量现在只有 2 次，1 次用于组件处于活动状态，1 次用于组件变为活动状态。

我禁用了严格模式以使其更清晰：

https://codesandbox.io/p/devbox/twilight-moon-forked-6w3nx6