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

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)}

在我看来，这两种方法目前似乎没有太大区别。但我很想听听社区对每种解决方案的优缺点的看法。蒂亚！

Answer 1

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

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

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