React：實例化一次組件並多次使用

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()一次，因此將該函數提取到更高級別的組件是有意義的，這樣它只運行一次而不需要任何其他屬性。

您可以閱讀有關提升層次結構反應狀態的更多信息： https ： //facebook.github.io/react/docs/lifting-state-up.html 。