使用React编写简单的时钟组件

使用React可以很容易的创建复用UI组件(Widget)。

比如这样:

这个示例很简单,使用了React,另外使用momentjs对日期时间做处理。

示例见github

代码很简单,先用react创建一个类:

1
2
3
4
5
6
var ClockWidget = React.createClass({
render: function() {
var now=moment();
return React.DOM.p(null,now.format('H:mm:ss'));
}
});

主要是实现render方法。

然后,创建一个工厂类:

1
var AppFactory = React.createFactory(ClockWidget);

最后,在定时任务中(间隔50ms):

1
2
3
4
5
6
7
var start = new Date().getTime();
setInterval(function() {
React.render(
AppFactory(), //渲染对象
document.getElementById('container') //定位到dom元素
);
}, 50);