Reactjs 输出组件循环并避免在只有一个组件更新时重新渲染整个循环

我多次输出同一组件的循环

目标：当

SomeComponent

组件的单个实例的内容更新时，我希望避免重新渲染整个组件循环。如果可能的话，我还希望避免重新渲染围绕新更新的

SomeComponent

的高阶组件

Panel

问题：当前，当我执行此操作时，所有

面板

及其子项

SomeComponent

都会重新渲染

创建组件数组的函数：

createPanels=（）=>{
常数numberOfPanels=4
const panelsArray=[]
对于（让索引=0；索引面板）
}

渲染功能：

渲染（道具）{
返回(
{this.createPanels（）}
)
}

是否有一个功能我还没有学会，它允许我只重新渲染一个

面板
的
某个组件
，或者我应该以另一种方式构造代码？（假设
SomeComponent
内部有逻辑，根据接收到的道具呈现不同的内容）

注意：我之所以使用数组，是因为在某些情况下，该数组中项目的顺序需要颠倒

感谢您可以将
SomeComponent
a.
React组件可以封装在其中，在某些情况下通过记忆结果来提高性能。它检查道具的变化：

这将仅重新呈现更新的项目：

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>
  );
}

const面板=（{children}）=>{
控制台日志（“面板”）；
返回{children}；
};
常量SomeComponent=（{theProp}）=>{
console.log（theProp）；
返回一些组件数据{theProp}；
};
const PanelComponent=React.memo（{theProp}）=>(
));
导出默认函数App（）{
const[data，setData]=useState([
{theProp:“theProp 1”}，
{theProp:“theProp 2”}，
{theProp:“theProp 3”}
]);
useffect（（）=>{
设置超时（（）=>{
设置数据（上一个=>{
prev[0]。theProp=“theProp Updated”；
return[…prev]；//强制更新项0
});
}, 2000);
}, []);
返回(
{data.map（（项目，索引）=>(
))}
);
}

工作示例：
棒极了，效果很好。谢谢你的解释。对于正在阅读的其他人，这与useMemo挂钩不同；）谢谢，这是有意义的，但我只知道您的组件是一个可以扩展PureComponent的类。如果我错了，请纠正我，但如果您试图避免对功能组件进行重新渲染，我认为这是行不通的。是的，您是对的。尚不清楚
SomeComponent
是否是类组件。
render(props) {
  return (
    <div>
      <Wrapper>{this.createPanels()}</Wrapper>
    </div>
  )
}

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>
  );
}