6、React开发：从计时器应用到Instagram克隆

React开发：从计时器应用到Instagram克隆

1. 计时器应用开发

1.1 添加计时功能

在计时器应用中，创建、更新和删除功能已就绪，接下来要实现计时功能。可以通过每秒更新每个计时器的 elapsed 属性来实现，这就需要用到 isRunning 属性。示例代码如下：

this.setState({
    timers: timers.map(timer => {
        const { elapsed, isRunning } = timer;
        return {
            ...timer,
            elapsed: isRunning ? elapsed + 1000 : elapsed,
        };
    }),
});

为了每秒执行一次这个更新操作，可以使用JavaScript的 setInterval() 函数。在 componentDidMount 中设置间隔：

componentDidMount() {
    const TIME_INTERVAL = 1000;
    this.intervalId = setInterval(() => {
        const { timers } = this.state;
        this.setSta