где установить `setInterval` при работе с перекомпоновкой?

Question

Я пытаюсь создать простой таймер, который будет запускаться и останавливаться при нажатии.весь мой проект основан на функциональных компонентах (с использованием перекомпоновки), поэтому я не уверен, где установить setInterval.

. Я пытался поиграть с этим до тех пор, пока полностью не потерял, где хранитьsetInterval так что я смогу очистить его на onStop fn (который сработает на кнопке) - так как в функциональном компоненте нет this, чтобы я мог поставить таймер и удалить его из ... чтофункциональные компоненты способ сделать это?

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

какие-либо предложения?- используя реактивную благодарность.

Answer 1

отлично работает, мой пример кода:

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} />

Answer 2

Здесь вам нужно 3 различных обработчика состояний: stopTimer, startTimer и updateValue (я использовал немного другое наименование, чем ваш код).

В startTimer необходимо создать таймер, который запускается updateValue по таймеру.Другими словами, вам нужно косвенно вызывать один обработчик состояния из другого.

не может это сделать .Но.Вы можете разделить эти обработчики на 2 набора: «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);