react中将时间戳转化为时间

在src中创建文件夹util,在util下新建文件index.js,index.js中代码如下

// 工具包模块

export let formData=(num)=>{

    num=parseInt(num)

    let d=new Date(num)

    let yy=d.getFullYear()

    let mm=d.getMonth()+1

    mm=mm<10?'0'+mm:mm

    let dd=d.getDate()

    dd=dd<10?'0'+dd:dd

    return `${yy}-${mm}-${dd}`

}

在需要转化的位置引入工具包,代码如下

import { formData } from '../util'

<span>{formData(n.pubTime) }</span>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React 中的定时器通常涉及到如何在组件更新周期之外运行代码,比如执行某个操作一定时间后再停止,这在前端应用中非常常见。为了更好地理解和管理定时器的状态,React 提供了几种处理定时器的方式: ### 1. 使用 `setTimeout` 和 `clearTimeout` `setTimeout` 函数用于设置一个延迟后调用的函数。它接受三个参数: - 第一个参数是一个回调函数,即你要在指定毫秒数后执行的操作。 - 第二个参数是要等待的时间间隔(以毫秒为单位)。 - 第三个参数是一个唯一标识符,可以传递给 `clearTimeout` 或者 `clearInterval` 来取消这个定时器。 例如,在 React 组件中创建一个定时器可能会像这样: ```jsx import React from 'react'; class TimerExample extends React.Component { state = { currentTime: null }; componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 // 每隔一秒钟更新一次状态 ); } componentWillUnmount() { clearInterval(this.timerID); // 清除定时器以防内存泄漏 } tick() { const now = new Date().toLocaleTimeString(); console.log(now); this.setState({ currentTime: now }); } render() { return ( <div> Current Time: {this.state.currentTime} </div> ); } } export default TimerExample; ``` ### 2. `useEffect` Hook 在现代 React 开发中,推荐使用 `useEffect` 钩子来替代生命周期方法。`useEffect` 可以让你在组件挂载、卸载以及副作用(如设置定时器)发生时进行响应。下面是如何使用 `useEffect` 设置定时器的例子: ```jsx import React, { useEffect } from 'react'; function TimerComponent() { useEffect(() => { let timerID; if (props.active) { timerID = setInterval(() => { console.log('Timer is ticking...'); }, 1000); } return () => { clearInterval(timerID); }; }, [props.active]); // 依赖数组包含需要监视变化的变量 return <div>Timer Component</div>; } export default TimerComponent; ``` 在这个例子中,我们通过 `useEffect` 来检查 `props.active` 是否已更改。如果更改了,则设置定时器;当组件卸载或 `active` 属性变为 `false` 时清除定时器。 ### 相关问题: 1. **何时应该使用`setTimeout`而不是`setInterval`**?它们之间的区别是什么? - `setTimeout` 只会触发一次预定的任务,适用于只需要执行一次特定任务的情况。 - `setInterval` 则会在每次指定时间间隔后重复执行函数,适合需要定期执行的任务。 2. **如何优雅地取消一个已经设置的`setTimeout`或`setInterval`?** - 对于 `setTimeout`,可以使用 `clearTimeout`; - 对于 `setInterval`,可以使用 `clearInterval`。这两个函数都需要传入之前设置定时器时得到的唯一标识符作为参数。 3. **在 React 管理计时器时如何避免内存泄漏?** - 将定时器的 ID 存储在一个返回的清理函数中,并在组件卸载时调用该清理函数来取消定时器。这是使用生命周期方法或者 `useEffect` 的关键实践之一,防止不必要的资源占用和内存泄露。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值