React.js: yeniden kullanılabilir bileşenler vs mixin yardımcı programı işlevleri

Question

Benim react.js uygulamasının tarihleri ​​görüntüleyeceğini ve istemcinin tarayıcısında/işletim sisteminde ayarlanmış biçimi uygulamak istediğimi varsayalım. Tarihleri ​​gösteren birden çok bileşen var ve aralarındaki kodu paylaşmanın birkaç yolunu kullanabilirim.

1.Re kullanılabilen React.js bileşenler gibi: React.js Mixins ile ortak

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

2.Utility fonksiyonları, yani:

sonra

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

ve bunları gibi kullanımı

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

ve sonra miksini bir bileşene ekleyin ve

gibi bir şey kullanın

{this.renderDate(invoice.date)} 

Şimdilik, şu an için bu 2 yaklaşım arasında fazla bir fark olmadığı görülmektedir. Ancak toplumun her çözümün artıları ve eksileri hakkındaki görüşlerini duymak isterim. TIA!

Answer 1

Performansın bir yönü: yukarıdaki gibi bir tarihi görüntülemek için bir bileşen yazarsanız, işlenen çıktı yalnızca sahne öğelerine bağlı olduğundan, PureRenderMixin ile işaretleyebilirsiniz. Bu, biçimlendirmeyi biraz hızlandırabilir, çünkü biçimlendirme sadece tarih değiştiğinde yapılmalıdır.

Temiz kod açısından, bir dizeyi ya da tarih biçimini ve dom öğelerini eşlemeye gerek kalmadan tarihi bir dizeye biçimlendiren yardımcı olmayan bir işlev işlevi kullanırım.