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

下面是一个场景：我有一个计时器，从60计数到0，当它完成时（它在0上），用户可以选择一个按钮（位于父组件中）重新启动计数器。现在计时器有一个onFinish属性，它在计时器完成后执行，在其中我使用increment key属性来重新创建计时器组件。像这样：

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;

从“React”导入React；
设计数器=0；
持续时间=59；
常量SMS确认：React.FC=（）=>{
常量[timerFinished，setTimerFinished]=useState（false）
const onTimerFinish=（）=>{
setTimerFinished（真）；
}
常量重新启动=（）=>{
setTimerFinished（假）；
计数器++；
}
const handleButtonClick=（）=>{
如果（timerFinished）重新启动（）；
}
返回(
)
}
导出默认SMS确认；

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

---

你的看法是什么？

在我看来，一个更好的方法是在每次滴答声中存储计时器状态，并更新绑定到计时器的状态，这样你就不需要重新创建任何东西，只需重置状态并重新启动它

这与受控计时器方法相同，不是吗？是的，类似于@Mahdi