React.js: componenti riutilizzabili vs funzioni di utilità di mixin

Question

Supponiamo che la mia app react.js visualizzi le date e vorrei applicare il formato impostato nel browser/sistema operativo del client. Ci sono più componenti che mostrano le date e posso usare un paio di modi per condividere il codice tra loro.

1.Re-utilizzabili React.js componenti come:

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

e quindi utilizzare come loro:

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

funzioni 2.Utility condivisi attraverso mixins React.js, cioè:

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

e poi basta aggiungere il mixin ad un componente e usare qualcosa come

{this.renderDate(invoice.date)} 

Per me sembra che non ci sia molta differenza tra questi 2 approcci per ora. Ma mi piacerebbe sentire l'opinione della comunità sui pro e contro di ciascuna soluzione. TIA!

Answer 1

Un aspetto sono le prestazioni: se scrivi un componente per visualizzare la data come hai fatto sopra, puoi contrassegnarlo con PureRenderMixin, poiché l'output renderizzato si basa solo sugli oggetti di scena. Questo potrebbe velocizzare un po 'il rendering, in quanto la formattazione deve essere eseguita solo quando la data cambia.

Dal punto di vista del codice pulito, vorrei scrivere un componente o utilizzare una funzione di utilità non reattiva che formatta semplicemente la data su una stringa: non è necessario accoppiare la formattazione della data e gli elementi dom. Qualcosa del tipo:

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