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。

React：实例化一次组件并多次使用

1 个答案: