Question

让我们说我的react.js应用程序将显示日期，我想应用客户端浏览器/操作系统中设置的格式。有多个组件显示日期，我可以使用几种方法在它们之间共享代码。

1.可重用的React.js组件，如：

var React = require('react');

module.exports = React.createClass({
    render : function(){
        if(this.props.value === null || this.props.value===undefined)
            return false;
        var formattedValue =  new Date(this.props.value).toLocaleDateString();
        return(
            <span>
                {formattedValue}
            </span>
        );
    }
});

然后使用它们：

var DateFormatter = require('./../formatters/Date');
<DateFormatter value={invoice.date} />

2.通过React.js mixins共享的实用功能，即：

module.exports = {
    renderDate : function(dateValue){
        if(dateValue === null || dateValue===undefined)
            return false;
        var formattedValue =  new Date(dateValue).toLocaleDateString();
        return(
            <span>
                {formattedValue}
            </span>
        );
    }
}

然后只需将mixin添加到组件中并使用类似

的内容

{this.renderDate(invoice.date)}

对我而言，目前这两种方法似乎没有太大区别。但我很想听听社区对每个解决方案的利弊的看法。 TIA！

Answer 1

一个方面是性能：如果你编写一个组件来显示上面的日期，你可以用PureRenderMixin标记它，因为渲染的输出只依赖于道具。这可能会加快渲染速度，因为格式化只需要在日期更改时完成。

从干净的代码的角度来看，我要么编写一个组件，要么使用一个非反应实用程序函数，它只是将日期格式化为一个字符串 - 无需将日期格式和dom元素结合起来。类似的东西：

function formatDate(dateValue){
    if(dateValue == null)
        return ""
    return new Date(dateValue).toLocaleDateString()
}

React.js：可重用组件与mixin的实用程序功能

1 个答案: