javascript - react .js : reusable components vs mixin's utility functions

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 mixin 共享的实用函数，即:

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来标记它。 ，因为渲染输出仅依赖于 Prop 。这可能会稍微加快渲染速度，因为格式化只需要在日期更改时完成。

从简洁代码的 Angular 来看，我要么编写一个组件，要么使用一个仅将日期格式化为字符串的非 React 实用函数——无需耦合日期格式化和 dom 元素。像这样的东西:

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