ReactJS:如何刷新组件而没有1次点击延迟

Question

我正在学习 React，当父组件的状态被另一个子组件更改时，我在刷新子组件时遇到问题。我发现我应该使用 componentWillReceiveProps() 并且它可以工作，但有一键延迟。我应该更改什么才能立即更新？

我已在 CodePen 上发布了我的代码，以便更容易解释。如果最好直接在这里发布，请告诉我，我会更新。

FCC: PomodoroClock - CodePen

问题:

• 当我增加或减少 ClockSetter 中的长度(+ 和 - 按钮)时，父级的状态会立即更改，但计时器中的 session 长度会显示之前的值。
• 当我单击重置按钮时，父级的状态会立即更改，但 ClockSetter 的长度和计时器的长度不会更改为 ClockSetter 的长度。再次单击重置两个子项后，父项状态的更改将会持续。
• 如果我尝试在重置后增加或减少(而不是第二次重置点击)，它会变得疯狂(我找不到它如何变化的规则)

是否可以仅使用 React 来实现它，还是应该开始学习 Redux？

编辑:我的代码

import React from 'react';
import './PomodoroClock.scss';

class PomodoroClock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sessionLength: 25,
      breakLength: 5,
    };
    this.handleTime = this.handleTime.bind(this);
    this.handleReset = this.handleReset.bind(this);
  }

  handleTime(type, time) {
    this.setState({
      [type]: time
    });
  }

  handleReset() {
    this.setState({
      sessionLength: 25,
      breakLength: 5,
    });
  }

  render() {
    return (
      <div className="container">
        <ClockSetter clockType="break" initialLength={this.state.breakLength} handleTime={this.handleTime} />
        <ClockSetter clockType="session" initialLength={this.state.sessionLength} handleTime={this.handleTime} />
        <Timer sessionLength={this.state.sessionLength} reset={this.handleReset}/>
        <span>TEST: State session - {this.state.sessionLength} State break - {this.state.breakLength}</span>
      </div>
    );
  }
}

class ClockSetter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      length: this.props.initialLength
    }
    this.handleDecrease = this.handleDecrease.bind(this);
    this.handleIncrease = this.handleIncrease.bind(this);
    this.refresh = this.refresh.bind(this);
  }

  handleDecrease() {
    if(this.state.length > 1) {
      this.setState ({
        length: this.state.length - 1
      });
    }
    this.props.handleTime(this.props.clockType+'Length', this.state.length - 1);
  }

  handleIncrease() {
    if(this.state.length < 60) {
      this.setState ({
        length: this.state.length + 1
      });
    }
    this.props.handleTime(this.props.clockType+'Length', this.state.length + 1);
  }

  refresh() {
    this.setState({
      length: this.props.initialLength
    });
  }

  componentWillReceiveProps(props) {
    if(this.state.length !== this.props.initialLength) {
      this.refresh();
    }
  }

  render() {
    let type = this.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={this.handleDecrease}>-</span>
        <span id={type + '-length'}>{this.state.length}</span>
        <span id={type + '-increment'} className="button" onClick={this.handleIncrease}>+</span>
      </div>
    );
  }
}

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeCountdown: 'Session',
      length: this.props.sessionLength
    }
    this.refresh = this.refresh.bind(this);
  }

  refresh() {
    this.setState({
      length: this.props.sessionLength
    });
  }

  componentWillReceiveProps(props) {
    if(this.state.length !== this.props.sessionLength) {
      this.refresh();
    }
  }

  render() {
    return(
      <div className="timer">
        <span id="timer-label">{this.state.activeCountdown}</span>
        <div id="time-left">{this.state.length}</div>
        <span id="start_stop" className="button">Start/Stop</span>
        <span id="reset" className="button" onClick={this.props.reset}>Reset</span>
      </div>
    );
  }
}


export default PomodoroClock;

Answer 1

让我们重构您的代码，以解决眼前的问题，同时解决一些会让您头痛的不良做法和反模式。

因为您才刚刚开始，所以现在是了解 hooks 的最佳时机。因为它们将使您的代码更加简单且更易于遵循。

代码中的主要缺陷是状态重复。让我们从 Timer 组件开始。

您正在将其初始状态 length 设置为其父状态 sessionLength 的值。尽管您可以将其视为某种类型的“初始”状态，然后一旦倒计时开始，计时器的 length 将独立于 sessionLength，但这不是必需的。事实上..在 99% 的情况下没有必要重复状态。

那么定时器应该处于什么状态？我认为计时器可能有自己的内部计数器状态，以便您显示当前时间，如 this.props.sessionLength - this.state.elapsedTime，但在您的情况下，计时器实际上并不是做任何时间。无论如何，您都会在父级别跟踪当前时间。

知道了这一点..计时器状态应该是什么？没有什么!答案是没有状态。计时器可以是一个函数，而不是一个类，并且接收 Prop 并显示它们。

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 处理程序。您可以在 return 语句上方编写命名的 handleDecrease 和 handleIncrease 函数，并根据需要向它们传递 onClick。但这只是一个偏好问题。

*注意: Prop 现在是 length 而不是 initialLength。确保在渲染 ClockSetter 组件时进行更新

对于最后的重构，我更新了您的 React cdn 以指向最新的稳定版本 16.8.3，因为它包含钩子(Hook)。

我们不使用类，而是编写一个普通函数并使用 React.useState Hook 。代码现在看起来像这样:

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 两次。现在我们可以删除 ClockSetter 组件中的 type + Length 参数:

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')
);

<强> Link to codepen

我们减少了 50 多行代码，更容易阅读，并且不存在状态重复的潜在问题。

希望有所帮助，祝您编码愉快!如果您有需要，请提出任何问题。