在 React 中使用键重新创建组件是一种不好的做法吗？

Question

场景如下：我有一个从 60 到 0 计数的计时器，当它完成时（它在 0 上），用户可以 select 一个按钮（位于父组件中）来重新启动柜台。现在 Timer 有一个 onFinish 道具，一旦计时器完成就会执行，我在其中增加 key 道具以重新创建 Timer 组件。像这样：

import React from 'react';

let counter = 0;
const timerDuration = 59;


const SMSConfirmation: React.FC = () => {


    const [timerFinished, setTimerFinished] = useState<boolean>(false)   

    const onTimerFinish = () => {
        setTimerFinished(true);
    }

    const restart = () => {
        setTimerFinished(false);
        counter++;
    }

    const handleButtonClick = () => {
        if (timerFinished) restart();
    }

    return (
        <div>

            <Timer key={counter}
            duration={timerDuration}  
            onFinish={onTimerFinish} />

            <Button onClick={handleButtonClick} />
        </div>
    )
}

export default SMSConfirmation;

另一种方法是使 Timer 组件受控并具有 onChange 属性。考虑到我只需要知道计时器何时结束而不需要每秒的确切值，我使用了第一种方法，但它似乎有点像一种不好的做法，因为我很少看到这种方法。

你怎么看？

Answer 1

在我看来，更好的方法是在每个滴答声中存储定时器状态并更新绑定到定时器的状态，这样您就不会重新创建任何东西，您只需重置状态并重新开始

在 React 中使用键重新创建组件是一种不好的做法吗？

Is using keys in React to recreate a component a bad practice?

timer

reactjs

controlled-component