React js - タイマーに必要な明確化

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があなたの親App componentは一度しかレンダリングしているので、start小道具は一度だけ設定されているため

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

あなたが小道具を引いたときにそれが動作する理由があるファイルです。あなたが理由のsetInterval関数によってトリガーされた子コンポーネントでstate更新の毎秒を再レンダリングされた子コンポーネントでnew Date() - Date.now()を行う際ただし、両方の値が評価されているので、彼らがいた0