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

Question

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

目标：当SomeComponent组件的单个实例的内容更新时，我希望避免重新渲染整个组件循环。如果可能的话，我还希望避免重新渲染新更新的SomeComponent周围的高阶组件Panel。

问题：当前执行此操作时，所有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>
)
}

有没有一个我还没有学会的功能可以让我只重新呈现一个Panel的SomeComponent，或者我应该用另一种方式构建我的代码？(假设SomeComponent内部有逻辑，根据接收到的道具呈现不同的内容(。

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

感谢

Answer 1

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

Answer 2

您可以使SomeComponent成为React.PureComponent.