Javascript React Reender之间的缓存组件

我有一个用例，我不知道该如何解决。假设我有一个名为

Viewer

的组件，它有一个正在渲染的iframe

render() {
    return <iframe src={props.url}>Some Content Loaded</iframe>

现在，如果我想更改3

Viewer

组件的位置，那么将发生一个事件，该事件将重新加载并将URL的顺序更改为“example3.com”、“example1.com”、“example2.com”。我不想重新启动

Viewer

并对每个“示例”端点进行网络调用。我想使用一个键缓存该组件，并检查url更改（如果存在），然后使用它

---

关于如何实现这一点的任何建议都会很有帮助

您是否可以使用flexbox，只需更改元素的

顺序

，这样您就不会真正重新招标（在某种意义上）但是，通过css重新组织dom？您是否可以使用flexbox并仅仅更改元素的

顺序

，这样您就不会真正重新命名（从反应意义上讲），而是通过css重新组织dom？

render() {
    <div>
        <Viewer url="https://example1.com"/>
        <Viewer url="https://example2.com"/>
        <Viewer url="https://example3.com"/>
    </div>
}