在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首先在不实际在DOM上构建的情况下隐式执行了render函数。它将虚拟渲染与当前虚拟渲染进行比较，以查看是否存在差异。

当react构建虚拟DOM并发现它与渲染的DOM相同时，它不会执行实际的渲染。

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

说；为什么需要在如此高的级别上管理状态？严重依赖全局状态通常是一种不好的做法，而且对于要求全局状态的组件而言，没有什么立即显而易见的。如果您可以将事情保留在本地，那么您会更好！