Reactjs 以redux为单位的相对时间

我有一些带有日期时间字段的数据，我想用momentJS

fromNow（）

显示相对日期时间。但是，在初始加载之后，它在几秒钟前将时间戳显示为

。但在触发下一个状态更改之前，不会更新此信息。通过
componentdiddupdate
中的计时器功能
setInterval
在状态树和控件中保持另一个状态是否是一种良好的做法

render()
{
   // get the new prop value here which triggered from a setInterval -> action -> reducer -> state change -> propagate to connected components
   const text = comment.get('text');
   const dateTime = moment(comment.get('dateTime')).fromNow();
   return (
     // add the new prop into the component
     <div key={id}>
        <Comment
         text = {text}
         dateTime = {dateTime}
     </div>
}

render（）
{
//在这里获取新的prop值，该值由setInterval->action->reducer->state change->传播到连接的组件触发
const text=comment.get（'text'）；
const dateTime=moment（comment.get（'dateTime'））.fromNow（）；
返回(
//将新道具添加到构件中
我草草写下了一个组件，该组件带有一个历元时间戳，并为其显示momentjs文本。
文本通过内部组件状态每300ms更新一次，您可以随意更改

您可以在上注意到，控制台中记录了每一条新文本。45秒后，您应该会看到文本从“几秒钟前”更改为“一分钟前”

，代码如下：

var MomentTime = React.createClass({
  getInitialState: function() {
    return {text: ""};
  },

  componentWillMount: function() {
    this._updateMomentText();
    this.interval = setInterval(this._updateMomentText, 300);
  },

  componentWillUnmount: function() {
    clearInterval(this.interval);
  },

  _updateMomentText: function() {
    var text = moment(this.props.timestamp).fromNow()
    console.log(text)
    if(text !== this.state.text) {
        this.setState({text: text});
    }
  },

  render: function() {
    return <div>{this.state.text}</div>;
  }
});

ReactDOM.render(
  <MomentTime timestamp={new Date().getTime()} />,
  document.getElementById('container')
);

var MomentTime=React.createClass({
getInitialState:函数（）{
返回{text:：}；
},
componentWillMount:function（）{
这是。_updatementtext（）；
this.interval=setInterval（this.\u updatementtext，300）；
},
componentWillUnmount:function（）{
clearInterval（这个.interval）；
},
_updateMomentText:function（）{
var text=moment（this.props.timestamp）.fromNow（）
console.log（文本）
if（text！==this.state.text）{
this.setState（{text:text}）；
}
},
render:function（）{
返回{this.state.text}；
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);
rule of thumb=>如果您可以在渲染时间内从道具计算它，而不需要太多资源，那么就不要将其置于状态。是的，这是对的，但问题是如何在一段时间后重新渲染，以相对方式显示时间戳。当它第二次渲染时，它将根据这行
矩计算道具的相对时间（comment.get（'dateTime'））.fromNow（）；
我同意@harun，您仍然可以保留您的解决方案。我不会将
时刻
的结果文本置于您的redux状态，而是将其置于本地组件状态，并使其在内部每隔一段时间更新一次，而不会影响系统的其余部分。@MotiAzu是的，我不会将文本从瞬间变为红色ux状态..我可以从
setInterval
生成一个随机数，并将其保持在状态以进行重新渲染。我想我可以这样继续：）这是一种非常粗俗的方式，因为这种状态只用于重新渲染。我认为本地组件状态更合理。虽然这是一个很好的解决方案，但我认为，这会造成性能问题。因为它将计时器附加到所有
MomentTime
组件上，浏览器负载将迅速增加。当我们有1个00的组件，它将导致重大的响应问题。你认为呢？除非矩返回不同的文本，否则它不会更新。但如果你有这么多这样的组件，我建议你将300毫秒的间隔改为30秒（或该区域的其他内容）.由于此文本不会每秒钟更改一次，因此这可能是非常合理的，并且不会对您的应用程序造成影响。