输出组件循环并避免仅更新一个组件时重新渲染整个循环

凯文

我多次输出相同组件的循环。

目标:SomeComponent组件的单个实例的内容更新时,我想避免重新呈现组件的整个循环。如果可能的话,我还想避免重新呈现Panel围绕新更新的的高阶组件SomeComponent

问题:目前,当我这样做时,所有人Panel和他们的孩子一起重新渲染SomeComponent

函数创建组件数组:

createPanels = () => {
  const numberOfPanels = 4
  const panelsArray = []
  for (let index = 0; index < numberOfPanels; index++) {
    panelsArray.push(
      <Panel>
        <SomeComponent theProp={willBeDynamic}/>
      </Panel>
    )
  }
  return panelsArray.map((panel) => panel)
}

渲染功能:

render(props) {
  return (
    <div>
      <Wrapper>{this.createPanels()}</Wrapper>
    </div>
  )
}

是否有一个我尚未学习的功能可以使我仅重新渲染一个PanelSomeComponent还是应该以另一种方式构造代码?(假设其中包含的逻辑SomeComponent根据接收到的道具呈现不同的内容)。

注意:我使用数组的原因是在某些情况下该数组中项目的顺序需要颠倒。

谢谢

礼节

可以将React组件包装在React.memo中,以通过记忆结果来提高性能。它检查道具更改:

这只会重新渲染更新的项目:

const Panel = ({ children }) => {
  console.log("panel");
  return <div>{children}</div>;
};

const SomeComponent = ({ theProp }) => {
  console.log(theProp);
  return <div>Some Component Data {theProp}</div>;
};

const PanelComponent = React.memo(({ theProp }) => (
  <Panel>
    <SomeComponent theProp={theProp} />
  </Panel>
));

export default function App() {
  const [data, setData] = useState([
    { theProp: "theProp 1" },
    { theProp: "theProp 2" },
    { theProp: "theProp 3" }
  ]);

  useEffect(() => {
    setTimeout(() => {
      setData(prev => {
        prev[0].theProp = "theProp Updated";
        return [...prev]; // force update item 0
      });
    }, 2000);
  }, []);

  return (
    <div>
      {data.map((item, index) => (
        <PanelComponent theProp={item.theProp} key={`item_${index}`} />
      ))}
    </div>
  );
}

工作示例:https//stackblitz.com/edit/react-3bsp6p

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在ReactJs React-Redux中仅创建或更新列表中的一个项目时,如何停止重新渲染整个项目列表?

仅更新一个状态变量时,所有组件都会重新渲染

Ember 每个循环在更新数组时重新渲染整个对象数组

React Native:通过setState更新ListView数据源是否会重新渲染整个组件?

React-每秒更新组件,而无需重新渲染整个表单

如何防止React重新渲染整个组件?

模态是否强制重新渲染整个组件?

React:切换 PopUp 重新渲染整个组件

更新状态而不渲染整个 React 组件(useState)

如何避免在调度新操作时通过循环存储对象而重新渲染组件

使用循环来响应渲染组件,但是当状态更新时,它会重新渲染所有内容

在一个组件的状态改变时重新渲染第二个组件

在 useState 中更新 Map 时避免重新渲染组件

渲染组件后,React重新渲染整个应用程序

React Hooks:如何避免在另一个状态更改时重新渲染组件?

如何在 ReactJS 中不重新渲染整个树的情况下渲染树组件的叶子组件

反应本机动态样式,而无需重新渲染整个组件

如果特定道具发生变化,则重新渲染整个组件

从另一个组件 Ember 重新渲染一个组件

如何强制从另一个组件重新渲染一个 Vue 组件

如何在 React 中从另一个组件重新渲染一个组件?

如何强制一个反应组件不重新渲染?

反应钩子问题。不是重新渲染一个组件

重新渲染一个React js功能组件SPA

从一个同级组件分派 redux 操作时,如何让所有同级组件正确重新渲染?

组件渲染函数中的无限更新循环

setState的回调函数仅将最后一个组件的状态填充为渲染时父组件的状态

从数组循环渲染组件

重新渲染时如何更新组件状态