在 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 组件在其状态更改时被重新渲染，我认为 'lifting up state' 到 App 级别会很糟糕，但 React 似乎鼓励这样做。

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

Answer 1

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

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

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

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

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

Doesn't lifting up state in React cause unnecessary re-rendering?

javascript

state

render

reactjs