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

Posted 2023-02-22

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

【英文标题】：Doesn't lifting up state in React cause unnecessary re-rendering?

【发布时间】：2019-04-21 08:06:57

【问题描述】：

我正在用 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，这不是问题吗？

【参考方案1】：

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

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

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

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

【讨论】：

我将其设为全局的原因是因为我希望能够轻松地将屏幕上的所有笔记保存或加载到相应的导航栏页面，或导出到文本文件。如果我将项目符号文本值保留在单个单元格状态中，当我试图在应用程序级别获取整个笔记页面时，访问它们的最佳方式是什么？父组件不应该读取其子组件的状态，对吧？

您可能会发现这很有帮助（如果扩大规模以满足您的需求）。这个想法是集中管理状态，而组件只根据需要进行更新。可能对你有用，可能不会。 ***.com/questions/38901106/…。这是此处文档中讨论的类型：reactjs.org/docs/…