javascript - 在 React Native 中使用 prop 启动计时器

Question

我有一个<Timer/>组件能够在几个不同的状态(编辑、就绪和勾选)之间转换，并且所有这些状态的 UI 都包含 <CountDown/>我创建的组件。 <CountDown/>组件采用 bool 值 edit它决定是否接受用户输入或仅显示倒计时。

我遇到的问题是更改 <CountDown/> 是否正在倒计时或仅显示静态数字。我的想法是制作<CountDown/>组件还采用 bool 值 ticking这将激活/停用倒计时，但目前看来我的实现每次 setInterval() 都会启动一个新的计时器(即调用 <CountDown/> )组件重新渲染(每秒)。

所以最大的问题是我应该如何设计我的<CountDown/>组件让它按照我想要的方式开始倒计时？

(如果解决方案使用新的 React 生命周期方法而不是 UNSAFE 的方法，我们将特别感激。)

我的 <Timer/> 的渲染函数看起来像这样(为简洁起见，省略了详细信息):

render () {
        let countDown;

        if (this.state.currentState == TimerStates.TICKING) {
            countDown = (
                    <Countdown
                        countdownFromSeconds={this.state.countDownFrom}
                        ticking={true}
                        updateProgress={this.handleProgressUpdate}
                    />
            );
        } else if (this.state.currentState == TimerStates.EDITING) {
            countDown = (
                <Countdown
                    edit={true}
                    ticking={false}
                    onEdit={this.handleSelectedTimeUpdate}
                />
            );
        } else if (this.state.currentState == TimerStates.READY) {
            countDown = (
                <Countdown
                    edit={false}
                    ticking={false}
                    countdownFromSeconds={this.state.countDownFrom}
                />
            );
        }

        return (
            <View style={styles.container}>
                {countDown}
            </View>
        );
    }

<CountDown/>组件如下所示(省略无关细节):

export default class Countdown extends Component {
    static propTypes = {
        countdownFromSeconds: Proptypes.number,
        edit: Proptypes.bool,
        ticking: Proptypes.bool,
    };

    constructor(props) {
        super(props);
        if (this.props.edit == true) {
            this.state = {
                totalTimeInSeconds: 0,
                ticking: false,
                seconds: 0,
                minutes: 0,
                hours: 0
            };
        } else if (this.props.ticking == true) {
            const startingTime = this.secondsToTimeComponents(props.countdownFromSeconds);
            console.log("Constructor for ticking");
            this.state = {
                totalTimeInSeconds: props.countdownFromSeconds,
                ticking: true,
                seconds: startingTime.seconds,
                minutes: startingTime.minutes,
                hours: startingTime.hours
            };
            if (this.props.ticking == true) {
                this.timerStart();
            }
        }
    }

    UNSAFE_componentWillReceiveProps(nextProps) {
        console.log("Got new prop: " + nextProps.ticking + " currently ticking: " + this.state.ticking);
        if (nextProps.ticking == true && this.state.ticking == false) {
            this.timerStart();
            return {
                ticking: true
            };
        } else return null;
    }

    componentWillUnmount() {
        this.timerStop();
    }

    timerStart = () => {
        console.log("Started timer");
        const interval = setInterval(this.tick, 1000);
        this.setState({
            interval,
        });
    }

    timerStop = () => {
        clearInterval(this.state.interval);
    }

    timerDone = () => {
        console.log("Timer done!");
    }

    tick = () => {
        if (this.state.totalTimeInSeconds == 0) {
            this.timerStop();
            this.timerDone();
        } else {
            this.setState({
                totalTimeInSeconds: this.state.totalTimeInSeconds - 1
            });
        }
        this.setState(this.secondsToTimeComponents(this.state.totalTimeInSeconds));
    }

    render() {
        return (
            <View style={styles.container}>
                <TimeUnitDisplay unit="hours" value={this.state.hours} edit={this.props.edit} onChange={this.handleHoursChanged} />
                <Text style={styles.separator}>:</Text>
                <TimeUnitDisplay unit="minutes" value={this.state.minutes} edit={this.props.edit} onChange={this.handleMinutesChanged} />
                <Text style={styles.separator}>:</Text>
                <TimeUnitDisplay unit="seconds" value={this.state.seconds} edit={this.props.edit} onChange={this.handleSecondsChanged} />
            </View>
        );
    }
}

这是我得到的调试输出:

04-29 14:06:32.764 19850 20081 I ReactNativeJS: Started timer
04-29 14:06:33.789 19850 20081 I ReactNativeJS: Timer done!
04-29 14:06:33.859 19850 20081 I ReactNativeJS: Started timer
04-29 14:06:34.877 19850 20081 I ReactNativeJS: Timer done!
04-29 14:06:34.957 19850 20081 I ReactNativeJS: Started timer
04-29 14:06:35.967 19850 20081 I ReactNativeJS: Timer done!
04-29 14:06:36.050 19850 20081 I ReactNativeJS: Started timer
04-29 14:06:37.064 19850 20081 I ReactNativeJS: Timer done!
etc...

Answer 1

您在 componentWillReceiveProps 中的 return { ticking: true } 不执行任何操作，因为它不使用返回值(与 getDerivedStateFromProps 不同)。您需要显式调用 setState({ ticking: true})。

当 props.ticking 为 false 时，不使用 clearInterval，并在为 true 时启动新的 interval，您可以考虑只保留初始值setInterval 实例处于事件状态，但避免在 props.ticking 为 false 时更新计时器:

tick = () => {
  if (!props.ticking) return;
  // rest of the code
}

但是，行为会略有不同，因为一旦 props.ticking 更改为 true，可能会执行滴答。

此外，还应在 componentDidMount 中调用 setInterval，而不是在 构造函数 中调用。