Question

我刚刚看到了创建计时器的教程，并且我自己尝试了但不确定他们如何能够减去新的Date（） - Date.now（）;如果我硬编码，它会给我0。但如果Date.now（）作为道具传递它会增加。任何人都可以解释一下吗？

这是我的App.js文件。

    import React, { Component } from 'react';
import Timer from './Timer';
import './App.css';

class App extends Component {



  render() {
    return (
      <div className='App'>

        <Timer start={Date.now()} />

      </div>
    );
  }
}

export default App;

这是我的Timer.js文件

import React,{ Component } from 'react';

class Timer extends Component {

componentDidMount()
{
  console.log("component is mounted");
  setInterval(this.timer,1000);
}

constructor(props){
  super(props);

  this.state = {clock:0};
  this.timer = this.timer.bind(this);
}

timer()
{
  this.setState( {clock:new Date() - this.props.start} );

}

  render(){

    var clock = Math.round(this.state.clock/1000);
    return(
      <div>
        <p> you are in this site for </p>
        <span > {clock} </span>
        <br />
        <p> seconds </p>
      </div>
    );
  }
}

export default Timer ;

Answer 1

减去道具时它起作用的原因是因为你的父App component只渲染一次，因此start道具只设置了一次。但是，当您在子组件中执行new Date() - Date.now()时，由于setInterval函数触发的子组件中的state更新，每秒都会重新呈现0，这两个值都会被计算，因此它们会导致{{} 1}}

React js - 计时器所需的澄清

1 个答案: