在反应中提升状态是否会导致不必要的重呈现？

Question

我正在做一个简单的记录应用程序的反应。到目前为止，它看起来是这样的：

​

​

每个音符符号都是一个“Cell”组件，它包含一个内部div，用于更多子单元。应用程序包含一个div表示导航条，一个div表示notes，在notes中，我使用.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: []
        }
      ]

(我在构造函数中有一个函数，它在呈现App之前动态地为每个注释提供一个id号。)

我的问题是，每次用户修改便笺时，它都会在App状态下修改notes对象中的相应注释(单元格有一个从App传递来的onBlur处理程序，该处理程序将传递该单元格的id，然后我将搜索该id的notes对象并更改内容)，这将导致整个页面在顶层状态发生变化后重新进行更改。这不就是整个反应的目的吗？如果整个App组件在其状态更改时被重新呈现，我认为将状态提升到App级别是不好的，但它似乎鼓励了这一点。

我需要将注释存储在顶层状态，这样我就可以使用导航栏导出它们或更改到新的注释页，但是如果我这样做了，那么每次我更改任何项目注释时，其他每个注释都会重新呈现，这不是一个问题吗？

Answer 1

一般来说，这就是“虚拟DOM”的目的。首先，React对呈现函数执行隐藏，而不实际在DOM上构建它。它将此虚拟呈现与当前呈现进行比较，以查看是否存在任何差异。

当react构建虚拟DOM并看到它与呈现的DOM相同时，它不会执行实际的呈现。

因此，操纵高水平状态的代价并不像你想象的那么高。

尽管如此，为什么你需要在这么高的水平上管理国家呢？严重依赖全局状态通常是一种糟糕的做法，而且您的组件似乎需要全局状态，没有什么是显而易见的。如果你能保持本土化，你就会过得更好！