使用重组时在哪里设置“setInterval”？

Question

我正在尝试构建一个简单的计时器，它会在单击时启动和停止。我所有的项目都是基于功能组件的（使用重组），所以我不确定在哪里设置 setInterval.

这是我尝试玩的东西，直到我完全迷失了存储 setInterval 的位置，这样我就可以在 onStop fn 上清除它（这将触发按钮） - 因为在功能组件中没有 this 我可以放置计时器并从中删除它......功能组件的实现方式是什么？

https://codepen.io/anon/pen/jQQZrm?editors=0010

有什么建议吗？ - 使用本机反应谢谢。

Answer 1

这里您需要 3 个不同的状态处理程序：stopTimer、startTimer 和 updateValue（我使用的命名与您的代码略有不同）。

在 startTimer 中，您需要创建由计时器运行 updateValue 的计时器。换句话说，您需要从另一个状态处理程序间接调用一个状态处理程序。

有no way doing that。但。您可以将这些处理程序分成两组："value + updateValue" 和 "stopTimer + startTimer + intervalId"。然后，您将能够从第一组中的第二组中获取状态处理程序，如 props:

const EnchanceApp = compose(
  withStateHandlers({
    timer: 0,
  }, {
    updateValue: ({timer}) => 
        () => ({timer: timer + 1})
  }),
  withStateHandlers({
    timerId: 0,
  }, {
    startTimer: ({timerId}, {updateValue}) => 
        () => {
            clearInterval(timerId);
            return {
                timerId: setInterval(updateValue, 1000)
            };
        },
    stopTimer: ({timerId}) => 
        () => clearInterval(timerId)
  })
)(App);

Answer 2

工作完美，我的代码示例：

const BgList = ({ bgs }) => (
  <PoseGroup>
    {bgs.map(item => <StyledBg key={item} style={{backgroundImage: 'url(/img/'+item+'.jpg)'}} />)}
  </PoseGroup>
);

const enhance = compose(
  withStateHanlders(
    () => ({
      index: 0,
      isVisible: false,
      bgs: _.shuffle([0,1,2,3]),
      timerId: 0,
    }),
    {
      startTimer: () => ({timerId}, {updateValue}) => {
        clearInterval(timerId);
        return {
            timerId: setInterval(updateValue, 5000)
        };
      },
      stopTimer: ({timerId}) => () => clearInterval(timerId),
      updateValue: ({bgs}) => 
        () => {
          return ({bgs: _.shuffle(bgs)})
        },
    },
  ),
  lifecycle({
    componentDidMount() {
      const {timerId, updateValue} = this.props;
      this.props.startTimer({timerId}, {updateValue})
    }
  }),

)

const BlockAnimated = enhance(({
  bgs
}) => {
  return (
    <BgList bgs={bgs} />

使用重组时在哪里设置“setInterval”？

where to set `setInterval` when working with recompose?

javascript

react-native

recompose