在 React 中提升状态不会导致不必要的重新渲染吗？

Question

我正在用 React 制作一个简单的笔记应用程序。到目前为止，它是这样的：

每个注释项目符号都是一个“单元”组件，其中包含一个用于更多子单元组件的内部 div。该应用程序包含一个用于导航栏的 div 和一个用于注释的 div，在注释 div 中我使用 .map() 渲染单元格。笔记存储在 App 状态是这样的...

notes: [
        {
          contents: "Learn React",
          children: [
            {
              contents: "Finish tutorial series",
              children: []
            },
            {
              contents: "Do example project",
              children: []
            }
          ]
        },
        {
          contents: "Learn Redux",
          children: []
        },
        {
          contents: "Build note-taking app",
          children: []
        }
      ]

（我在构造函数中有一个函数，它在渲染应用程序之前动态地为每个音符提供一个 id 号。）

我的问题是，每次用户修改注释时，都会在 App 状态下修改注释对象中的相应注释（单元格有一个从 App 传递的 onBlur 处理程序，该处理程序传递单元格的 id，然后我搜索注释对象id 并更改内容），这会导致整个页面重新呈现，因为顶级状态已更改。这不是违背了 React 的全部目的吗？如果整个 App 组件在其状态更改时重新渲染，我认为将状态“提升”到 App 级别会很糟糕，但 React 似乎鼓励这样做。

我需要将笔记存储在顶级状态，以便我可以导出它们或使用导航栏更改到新的笔记页面，但是如果我这样做，那么每次我更改任何项目符号注释时，每隔一个也会重新-renders，这不是问题吗？

Answer 1

嗯，一般来说，这就是“虚拟 DOM”的目的。 React 首先隐藏了 render 函数的执行，而不是在 DOM 上实际构建它。它将这个虚拟渲染与当前渲染进行比较，看看是否有任何差异。

react 构建虚拟 DOM 时，看到它与渲染的 DOM 相同，它并没有执行实际的渲染。

因此，操纵这种高级状态并不像您想象的那么昂贵。

这就是说；为什么需要在如此高的级别上为此管理状态？严重依赖全局状态通常是一种不好的做法，并且您的组件似乎没有任何明显的要求全局状态。如果您可以将内容保存在本地，那就更好了！