Javascript 每秒钟更新一次React组件

我一直在玩React，下面的时间组件只是将

Date.now（）

呈现到屏幕上：

import React, { Component } from 'react';

class TimeComponent extends Component {
  constructor(props){
    super(props);
    this.state = { time: Date.now() };
  }
  render(){
    return(
      <div> { this.state.time } </div>
    );
  }
  componentDidMount() {
    console.log("TimeComponent Mounted...")
  }
}

export default TimeComponent;

import React，{Component}来自'React'；
类TimeComponent扩展组件{
建造师（道具）{
超级（道具）；
this.state={time:Date.now（）}；
}
render（）{
返回(
{this.state.time}
);
}
componentDidMount（）{
log（“时间组件已安装…”）
}
}
导出默认时间组件；

---

让此组件每秒更新一次以从React角度重新绘制时间的最佳方法是什么？

在组件的

componentDidMount

生命周期方法中，您可以设置一个间隔来调用更新状态的函数

 componentDidMount() {
      setInterval(() => this.setState({ time: Date.now()}), 1000)
 }

---

在组件的

componentDidMount

lifecycle方法中，可以设置调用更新状态的函数的间隔

 componentDidMount() {
      setInterval(() => this.setState({ time: Date.now()}), 1000)
 }

---

下面的代码是React.js网站上的一个修改示例

原始代码可在以下位置获得：

类计时器扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
秒：parseInt（props.startTimeInSeconds，10）| 0
};
}
勾选（）{
this.setState（state=>({
秒数：state.seconds+1
}));
}
componentDidMount（）{
this.interval=setInterval（（）=>this.tick（），1000）；
}
组件将卸载（）{
clearInterval（这个.interval）；
}
格式化时间（秒）{
让小时数=数学楼层（秒/3600）；
分钟=数学地板（秒/60）%60；
让秒=秒%60；
返回[小时、分钟、秒]
.map（v=>（''+v）.padStart（2，'0'））
.filter（（v，i）=>v！='00'| i>0）
。加入（“：”）；
}
render（）{
返回(
计时器：{this.formatTime（this.state.seconds）}
);
}
}
ReactDOM.render(
,
document.getElementById（'timer-example'））
);

以下代码是React.js网站上的一个修改示例

原始代码可在以下位置获得：

类计时器扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
秒：parseInt（props.startTimeInSeconds，10）| 0
};
}
勾选（）{
this.setState（state=>({
秒数：state.seconds+1
}));
}
componentDidMount（）{
this.interval=setInterval（（）=>this.tick（），1000）；
}
组件将卸载（）{
clearInterval（这个.interval）；
}
格式化时间（秒）{
让小时数=数学楼层（秒/3600）；
分钟=数学地板（秒/60）%60；
让秒=秒%60；
返回[小时、分钟、秒]
.map（v=>（''+v）.padStart（2，'0'））
.filter（（v，i）=>v！='00'| i>0）
。加入（“：”）；
}
render（）{
返回(
计时器：{this.formatTime（this.state.seconds）}
);
}
}
ReactDOM.render(
,
document.getElementById（'timer-example'））
);

您需要使用

setInterval

来触发更改，但您还需要在组件卸载时清除计时器，以防止其留下错误和内存泄漏：

componentDidMount（）{
this.interval=setInterval（（）=>this.setState（{time:Date.now（）}），1000）；
}
组件将卸载（）{
clearInterval（这个.interval）；
}

您需要使用

setInterval

来触发更改，但您还需要在组件卸载时清除计时器，以防止其留下错误和内存泄漏：

componentDidMount（）{
this.interval=setInterval（（）=>this.setState（{time:Date.now（）}），1000）；
}
组件将卸载（）{
clearInterval（这个.interval）；
}

类ShowDateTime扩展React.Component{
构造函数（）{
超级（）；
此.state={
curTime:null
}
}
componentDidMount（）{
设置间隔（（）=>{
这是我的国家({
curTime:new Date（）.toLocaleString（）新日期
})
},1000)
}
render（）{
返回(
{this.state.curTime}
);
}
}

类ShowDateTime扩展React.Component{
构造函数（）{
超级（）；
此.state={
curTime:null
}
}
componentDidMount（）{
设置间隔（（）=>{
这是我的国家({
curTime:new Date（）.toLocaleString（）新日期
})
},1000)
}
render（）{
返回(
{this.state.curTime}
);
}
}

所以你走对了方向。在

componentDidMount（）

内部，您可以通过实现

setInterval（）

触发更改来完成作业，但请记住更新组件状态的方法是通过

setState（）

，因此在

componentDidMount（）

内部，您可以执行以下操作：

componentDidMount() {
  setInterval(() => {
   this.setState({time: Date.now()})    
  }, 1000)
}

此外，您还可以使用

Date.now（）

，它可以与我上面提供的

componentDidMount（）

实现一起工作，但是您将得到一系列令人讨厌的数字更新，这些数字不是人类可读的，但从技术上讲，是从1970年1月1日起每秒更新一次，以毫秒为单位，但是我们想让这个时间对我们人类阅读时间的方式具有可读性，因此除了学习和实现

setInterval

之外，您还想学习

newdate（）

和

toLocaleTimeString（）

并且您会像这样实现它：

class TimeComponent extends Component {
  state = { time: new Date().toLocaleTimeString() };
}

componentDidMount() {
  setInterval(() => {
   this.setState({ time: new Date().toLocaleTimeString() })    
  }, 1000)
}

---

请注意，我还删除了

constructor（）

函数，您不一定需要它，我的重构100%等同于使用

constructor（）

函数初始化站点。

所以您的思路是正确的。在

componentDidMount（）

内部，您可以通过实现

setInterval（）

触发更改来完成作业，但请记住更新组件状态的方法是通过

setState（）

，因此在

componentDidMount（）

内部，您可以执行以下操作：

componentDidMount() {
  setInterval(() => {
   this.setState({time: Date.now()})    
  }, 1000)
}

此外，您还可以使用

Date.now（）

，它与

组件didmoun一起工作
    class SomeClass extends React.Component<Props, State> {
  static getDerivedStateFromProps(nextProps: Readonly<Props>): Partial<State> | null {
    return {
      time: nextProps.time
    };
  }

  timerInterval: any;

  componentDidMount() {
    this.timerInterval = setInterval(this.tick.bind(this), 1000);
  }

  tick() {
    this.setState({ time: this.props.time });
  }

  componentWillUnmount() {
    clearInterval(this.timerInterval);
  }

  render() {
    return <div>{this.state.time}</div>;
  }
}