React：实例化组件一次，多次使用答案

【问题标题】：React: Instantiate component once and use multiple timesReact：实例化组件一次，多次使用
【发布时间】：2017-03-04 03:55:09
【问题描述】：

是否可以重复使用 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() 两次和两次超时，即使其中一个块被隐藏。

【问题讨论】：

你能分享一些你的代码吗？我有点不确定你想做什么。
您可能应该将超时移到组件之外。
如果您可以控制 html 代码，为什么不使用道具来判断是否必须完成超时任务？像<ComponentOne doTask={true}/> 这样的东西，然后在componentDidMount 你可以测试this.props.doTask...

标签： javascript reactjs jsx

【解决方案1】：

由于您只想doSomeStuff() 一次，因此将该函数提取到更高级别的组件是有意义的，这样它只会运行一次而无需任何其他属性。

您可以阅读更多关于将反应状态提升到层次结构的信息：https://facebook.github.io/react/docs/lifting-state-up.html。

【讨论】：