RECT:实例化组件一次，并多次使用

Question

是否可以重复使用React组件两次，但仅实例化一次？

现在，我需要在ComponentDidmount上触发超时，但是我只需要在同一页面上有几个组件。所以我想，也许可以实例化组件然后作为参数将其传递？

例如，有一个组件可以在渲染完成时运行超时：

export default ComponentOne extends React.Component {
   componentDidMount = () => {
       setTimeout(() => (this.doSomeStuff()), 10 * 1000);
   }
   doSomeStuff = () => {
       // Do something, that can be done only once
   }
}

因此，组件做一些只能完成一次的事情。但是在页面上，有两个组件根据屏幕分辨率（CSS媒体查询）出现，例如：

<div class="page-start block-that-appears-for-desktop">
    <ComponentOne />
</div>
<!-- ... -->
<div class="page-end block-that-appears-for-mobile">
    <ComponentOne />
</div>

所以现在我将拥有componentDidmount（），即两次和两个超时，即使隐藏了一个块。

Answer 1

由于您只想一次doSomeStuff()，因此将该功能提取到更高级别的组件是有意义的，因此它将仅运行一次而没有任何其他属性。

您可以阅读更多有关提升react react的信息，以提高层次结构：https：//facebook.github.io/react/docs/lifting-state-up.html。