首页 > 其他 > 详细

[react]使用hook改写的一个react class 时钟例子

时间:2019-10-29 01:55:12      阅读:96      评论:0      收藏:0      [点我收藏+]

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‘)
);

 

[react]使用hook改写的一个react class 时钟例子

原文:https://www.cnblogs.com/sx00xs/p/11756421.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!