时间戳

首页 > 解决方案 > 2个子组件无限重新渲染

reactjs - 2个子组件无限重新渲染

问题描述

我有 2 个组件，我知道问题是它们无限地相互重新渲染，但我该如何以不同的方式做到这一点？渲染“Subs”组件时，它会渲染范围表组件。渲染范围表时，我需要重新渲染 Subs 组件，因为它形成了一种弹出窗口。我还能怎么做呢？

子组件 -

const Subs = connect(
  mapStateToProps,
  mapDispatchToProps
)((props) => { 

const { project, section, bid, bidId } = props;


return (
<>

<div>other things</div>

<Scopesheet
          
          bidId={bidId}
          bid={bid}
          section={section}
          project={project}
         
        />
</>
)


})

export default Subs;

范围表组件 -

function Scopesheet(props) {
  const classes = useStyles();
  const canvasRef = useRef();
  const canvasWrapper = useRef();

  const {
    section,
    bid,
    bidId,
    project,
   
    
  } = props;

  const subUI = useMemo(() => {
    const subsArray = [];

    subsArray.push(
      <Subs key={bidId} section={section} bid={bid} project={project} />
    );

    return (<div>{subArray}</div>);

  }, [section, bid, project, bidId]);

  return (
    <>
      <div ref={canvasWrapper} className={classes.scopesheetCanvasWrapper}>

        {subUI}

        <canvas style={{ float: 'right' }} ref={canvasRef}></canvas>
      </div>
     

    </>
  );
}

export default Scopesheet;

我正在将重要信息从 Subs 传递到 Scopesheet，例如我需要从中执行不同操作的 bidId 和 props，但在 scopesheet 中我需要能够再次呈现 Subs 组件以形成弹出窗口。有没有办法我可以以不同的方式做到这一点？

标签： reactjs

解决方案

将组件作为彼此的子组件只会给您带来这种性能。我强烈建议你使用回调道具的形式来更新你的subs. 并从 Scopesheet 组件中删除 useMemo 以及 subs。现在像这样在 subs 中向 Scopesheet 添加一个新道具......

<Scopesheet
          
          bidId={bidId}
          bid={bid}
          section={section}
          project={project}
          cb={cbFunction} 
         
        />

并且 cbFunction 应该需要这些参数

function cbFunction(bidId,bid,section,project) {
// update your state through here
}

建议：考虑使用useState钩子或useReducer管理您的状态。

更新：

我很难理解 cbFunction 的用途到底是什么。我没有更新任何一个组件的状态，所以我不确定你想说什么。有没有一种方法可以只在 subs 内渲染 scopesheet 组件一次？基本上，有一个包含名为 subs 的信息的容器，在 subs 中我呈现范围表，在范围表中我有按钮，单击这些按钮会导致弹出窗口，然后我需要在弹出窗口中再次呈现 subs 容器，但这会导致一个无限循环。抱歉，如果我的问题不清楚。

  1. 有没有一种方法可以只在 subs 内渲染 scopesheet 组件一次？

如果 subs 中的信息/数据是可变的，它仍然会导致范围表重新渲染，具体取决于您处理数据的方式。您可以检查useRef是否不想更改数据以重新呈现您的范围表。

  1. 在范围表中我有按钮，单击这些按钮会导致弹出窗口，然后我需要在弹出窗口中再次呈现 subs 容器，但这会导致无限循环。

如前所述，如果您再次将子容器作为范围表的子容器，则无限循环是不可避免的。一个简单的解决方法是使用material-ui modal。设置一个新的 DOM_Node 并使用一些纯 js 和 css 样式为您的弹出窗口。你可以参考这篇文章。如果我的回答仍然不够清楚，您可以尝试提供更多的实现代码片段，并更连贯地说明您想要实现的目标。其他 stachoverflowers 或许能给出答案。

快乐的编码...

推荐阅读