ReactJS: как обновить компонент без задержки в 1 клик

Давайте проведем рефакторинг вашего кода таким образом, чтобы решить насущную проблему, и в то же время решить некоторые неправильные практики и антипаттерны, которые вызовут у вас головную боль в дальнейшем.

И поскольку вы только начинаете, это идеальное время, чтобы узнать о хуки, потому что они сделают ваш код намного проще и понятнее.

Основная ловушка в вашем коде — дублирование состояния. Начнем с компонента Timer.

Вы устанавливаете его начальное состояние length равным значению его родительского состояния sessionLength. Даже если вы можете воспринимать это как некое «начальное» состояние, а затем после начала обратного отсчета length таймера не будет зависеть от sessionLength, в этом нет необходимости. На самом деле... дублирование состояния не требуется в 99% ситуаций.

Итак, какое состояние у должен у Таймера? Я бы предположил, что у таймера может быть собственное внутреннее состояние счетчика, чтобы вы отображали текущее время, например this.props.sessionLength - this.state.elapsedTime, но в вашем случае таймер на самом деле не отсчитывает время. В любом случае вы отслеживаете текущее время на родительском уровне.

Зная это... каким должно быть состояние таймера? Ничего такого! Ответ - нет государства. Таймер может быть функцией, а не классом, получать свойства и отображать их.

function Timer(props) {
  return (
    <div className = "timer">
      <span id = "timer-label">Session</span>
      <div id = "time-left">{props.sessionLength}</div>
      <span id = "start_stop" className = "button">
        Start/Stop
      </span>
      <span id = "reset" className = "button" onClick = {props.reset}>
        Reset
      </span>
    </div>
  )
}

Если это все, что вы меняете, это уже решает ваш вопрос.

Далее давайте посмотрим на компонент ClockSetter. Вы дублируете состояние здесь точно таким же образом, и не только это, у вас есть дополнительные обработчики, которые просто вызывают обработчик родителей handleTime, внося дополнительные шаги и сложность, которые добавляют ненужный шум в ваше приложение. Давайте вообще избавимся от состояния и дополнительных обработчиков, и поэтому мы снова сможем использовать функцию вместо класса:

function ClockSetter(props) {
  let type = props.clockType
  return (
    <div className = "clock-setter">
      <div id = {type + '-label'} className = "first-letter-capitalize">
        {type + ' Length'}
      </div>
      <span
        id = {type + '-decrement'}
        className = "button"
        onClick = {() => props.handleTime(type + 'Length', props.length - 1)}
      >
        -
      </span>
      <span id = {type + '-length'}>{props.length}</span>
      <span
        id = {type + '-increment'}
        className = "button"
        onClick = {() => props.handleTime(type + 'Length', props.length + 1)}
      >
        +
      </span>
    </div>
  )
}

Я встроил обработчики onClick для краткости. Вы можете написать именованные функции handleDecrease и handleIncrease над оператором return и передать им onClick, если хотите. Хотя это всего лишь вопрос предпочтений.

*Примечание: реквизит теперь length, а не initialLength. Обязательно обновите это при рендеринге компонентов ClockSetter.

Для этого последнего рефакторинга я обновил ваш cdn React, чтобы он указывал на последнюю стабильную версию 16.8.3, так как она включает хуки.

Вместо использования класса давайте напишем обычную функцию и воспользуемся хуком React.useState. Теперь код выглядит так:

function PomodoroClock() {
  let [sessionLength, setSessionLength] = React.useState(25)
  let [breakLength, setBreakLength] = React.useState(5)

  function handleReset() {
    setSessionLength(25)
    setBreakLength(5)
  }

  return (
    <div className = "container">
      <ClockSetter
        clockType = "break"
        length = {breakLength}
        handleTime = {setBreakLength}
      />
      <ClockSetter
        clockType = "session"
        length = {sessionLength}
        handleTime = {setSessionLength}
      />
      <Timer
        sessionLength = {sessionLength}
        reset = {handleReset}
      />
      <span>
        Parent's state TEST: session - {sessionLength} break -
        {breakLength}
      </span>
    </div>
  )
}

и вместо того, чтобы иметь один объект состояния с ключами, которые ссылаются на каждый таймер, поскольку раньше это был единственный способ для компонентов с состоянием, мы дважды вызываем useState каждый с их соответствующим состоянием и обработчиками. Теперь мы можем удалить аргумент type + Length в нашем компоненте ClockSetter:

onClick = {() => props.handleTime(props.length + 1)}

Теперь вся программа:

function PomodoroClock() {
  let [sessionLength, setSessionLength] = React.useState(25)
  let [breakLength, setBreakLength] = React.useState(5)

  function handleReset() {
    setSessionLength(25)
    setBreakLength(5)
  }

  return (
    <div className = "container">
      <ClockSetter
        clockType = "break"
        length = {breakLength}
        handleTime = {setBreakLength}
      />
      <ClockSetter
        clockType = "session"
        length = {sessionLength}
        handleTime = {setSessionLength}
      />
      <Timer
        sessionLength = {sessionLength}
        reset = {handleReset}
      />
      <span>
        Parent's state TEST: session - {sessionLength} break -
        {breakLength}
      </span>
    </div>
  )
}

function ClockSetter(props) {
  let type = props.clockType
  return (
    <div className = "clock-setter">
      <div id = {type + '-label'} className = "first-letter-capitalize">
        {type + ' Length'}
      </div>
      <span
        id = {type + '-decrement'}
        className = "button"
        onClick = {() => props.handleTime(props.length - 1)}
      >
        -
      </span>
      <span id = {type + '-length'}>{props.length}</span>
      <span
        id = {type + '-increment'}
        className = "button"
        onClick = {() => props.handleTime(props.length + 1)}
      >
        +
      </span>
    </div>
  )
}

function Timer(props) {
  return (
    <div className = "timer">
      <span id = "timer-label">Session</span>
      <div id = "time-left">{props.sessionLength}</div>
      <span id = "start_stop" className = "button">
        Start/Stop
      </span>
      <span id = "reset" className = "button" onClick = {props.reset}>
        Reset
      </span>
    </div>
  )
}

ReactDOM.render(
  <PomodoroClock />,
  document.getElementById('root')
);

Ссылка на кодеп

Мы сократили более 50 строк кода, его стало намного легче читать, и нет потенциальной проблемы с дублированием состояния.

Надеюсь, что это поможет и удачного кодирования! Пожалуйста, задавайте любые вопросы, если вам нужно.