[react]使用hook改寫的一個react class 時鍾例子


React中文網中有一個用class寫就的時鍾例子https://react.docschina.org/docs/state-and-lifecycle.html

現在React又推出了新的hook api,便順手用hook改寫了一下這個例子:

import React, { useState, useEffect} from 'react';
import ReactDOM from 'react-dom';


function Clock(){
  const [date,setDate]=useState(new Date());

  useEffect(()=>{
    function tick(){
      setDate(new Date());
    }
    const timerID = setInterval(tick,1000);

    return function clearTick(){
      clearInterval(timerID);
    };
  });
  
  return(
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );  
}

ReactDOM.render(
  <Clock/>,
  document.getElementById('root')
);

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM