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

Question

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

每个注释项目符号都是一个“Cell”组件，其中包含一个用于更多子 Cell 组件的内部 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 状态下注释对象中的相应注释(Cells 有一个从 App 传递的 onBlur 处理程序，它传递了 Cell 的 ID，然后我搜索注释对象该 id 并更改内容)，这会导致整个页面重新呈现，因为顶级状态已更改。这不是违背了 React 的全部目的吗？如果整个 App 组件在状态改变时被重新渲染，我认为“提升状态”到 App 级别是不好的，但 React 似乎鼓励这样做。

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

Answer 1

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

当 React 构建虚拟 DOM 并看到它与渲染的 DOM 相同时，它不会执行实际的渲染。

因此，操纵高级状态的成本并不像您想象的那么高。

也就是说；为什么要在这么高的层面上管理这个状态呢？严重依赖全局状态通常是一种不好的做法，并且您的组件似乎需要全局状态，这并没有立即显而易见的事情。如果你能把东西放在本地，你会过得更好!