Javascript React Redux-如何更新一段状态，而不会对不相关的组件造成不必要的重新渲染

我正在努力以简洁的方式提出这个问题。我的应用程序存在一些重大性能问题。我已经为react安装了Perf附加工具，可以看到问题所在，但是我不确定解决问题的最佳方法

我认为这可能与重新选择有关。。。但我们需要一些关于从哪里开始的指导

我有一个组件，可以渲染许多其他组件。这使用size me（计算浏览窗口的大小）和react grid布局（布局每个组件并允许更改它们的位置）。这是资源密集型的，所以我不能让这种情况不必要地发生

用户可以单击按钮打开模式窗口（添加或编辑网格中正在渲染的组件）

问题：当模态窗口打开时，底层组件重新渲染，导致大小me和反应网格布局重新渲染，从而导致模态“突然”打开

这是整个状态树：

这是打开模式时唯一更改的状态部分：

size me和react网格布局内容正在从状态树的formEngine.form部分呈现状态，但在对树的formEngine.addComponent部分进行状态更新时，它正在重新呈现

以下是性能日志：

如您所见，出现了一些浪费的渲染，这只会随着用户决定添加到表单中的嵌套布局组件的数量而递增

为了避免这个问题变得过于复杂，让我先问一下：

当我打开模式页面时，如何防止底层页面重新呈现

为什么当fromEngine.addComponent被修改时，监视formEngine.form的组件会被触发以重新渲染

多谢各位

---

编辑1:

我不确定这是否相关，但为了回答评论，我添加了这段代码。AddFormComponent是猛然打开的模态

Form.js：

const Form = (props) => (
  <div className="form-engine">
    <div className="card-block" style={{position: "relative"}}>
      {
        props.editMode && 
        <div className="nula-form-controls">
          <AddFormComponent parentId={"root"} />
        </div>
      }               
      {
        props.form.components.root.childComponentIds.length > 0 ?
          <LayoutComponent componentKey={"root"} />
        : 
          <EmptyGridLayout />
      }
    </div>
  </div>
)

const Form=（道具）=>(
{
props.editMode&&
}                  
)
}
else if（component.type==“fieldGroup”）{
返回(
{
//如果editMode={false}则隐藏
props.editMode&&
}                  
)
}
else if（component.type==“段落”）{
返回(
{
} 
)
}
否则{
返回(
{
}   
)
}        
})
}  
)
导出默认SizeMe（）（LayoutComponent）

如果使用纯组件，则必须手动处理任何性能优化（使用shouldComponentUpdate）。因为您使用的是redux，所以它可以为您处理这个问题。但是你必须把它“连接”到redux商店

如果您选择使用redux connect，请确保模态可见性与您的其他属性没有关联，特别是在您的情况下：

---

modalOpen嵌套在formEngine中。当它更改任何其他侦听formEngine的内容时，它将重新渲染组件的树结构是什么？模态组件是一个大小为me和react网格布局的兄弟组件？是的，我相信它是一个sibling。。。不太确定你是不是在问这个。。。但是我添加了一些代码。所以这里有AddFormComponent，它是打开的模式。它显示在页面顶部（在任何大小的me/react网格布局开始发挥作用之前）。但它也显示在每个“LayoutComponent”中，因为LayoutComponent可以包含嵌套组件/LayoutComponents。您是否大量使用

PureComponents

和/或

shouldComponentUpdate

？是否只向每个组件传递所需的道具（即，无通用状态扩散）？谢谢你的回答。我已经测试过了。我将modalOpen移到formEngine之外，但是我仍然在性能日志中得到相同的结果（它仍然重新呈现SizeMe/react网格布局）。我在上面添加了此组件的代码。这可能与SizeMe检测到宽度变化有关吗？即使没有向浏览器添加滚动条，它仍会重新渲染，因此可能不会。乍一看，您似乎正在传递“modalOpen”作为道具。由于父组件负责传递此值，modalOpen中的更改将导致父组件重新渲染，因为它必须向下传递道具。无论如何，这是我的猜测。尝试将您的模态目录连接到redux Store。我还在传递给connect的mapStateToProps方法中硬编码属性。我玩了aroun我不知道为什么，因为状态没有改变，但是当我从那里移除道具并将其作为还原器中的初始状态时，布局组件在我打开模式时停止重新渲染。