C'è un buon modo per utilizzare variabili e metodi privati ​​in React.js

Question

ho notato che ho potuto utilizzare variabili private come questo:

var Hello = React.createClass(new (function(){ 

    var name; 

    this.getInitialState = function() { 
     name = "Sir " + this.props.name; 
     return null; 
    }; 

    this.render = function() { 
     return <div>Hello {name}</div>; 
    }; 
})()); 

React.render(<Hello name="World" />, document.getElementById('container')); 

Perché non dovremmo farlo?

Grazie per tutto l'aiuto

Answer 1

Io non credo che ci sia qualcosa di sbagliato con esso. La sintassi è un po 'funky, ma è un trucco intelligente.

Vorrei mettere in discussione la necessità di una variabile veramente privata. Posso solo pensare a due motivi per cui qualcuno potrebbe volerne uno, ma entrambi possono essere smentiti.

1) Si crea una libreria da consumare da altri ... Se qualcuno sta cercando all'interno del codice della biblioteca dove non dovrebbero essere, il loro o rompe la propria esperienza o aggira bug che ha trovato in il tuo codice. In ogni caso, nessun danno a te o agli altri. Caso peggiore, rompono la loro app. Le variabili private mi hanno lasciato davvero un brutto sapore in bocca. L'apertura di JavaScript è una boccata d'aria fresca IMO.

2) Si desidera nascondere i dati privati ​​all'interno della propria app ... Con i browser moderni, qualsiasi cosa in JavaScript può essere ispezionata e modificata in fase di esecuzione. È impossibile nascondere i dati dagli utenti in JavaScript. Puoi solo rendere le cose difficili da trovare.

So che questa alternativa non è veramente privata, ma l'utilizzo è lo stesso. Dal momento che non sono un grande fan di lottare duramente per rendere le cose private, lo includerò comunque. ; G)

var Hello = React.createClass({ 

    name: null, 

    getInitialState: function() { 
     this.name = "Sir " + this.props.name; 
     return null; 
    }, 

    render: function() { 
     return <div>Hello {this.name}</div>; 
    }; 
}); 

React.render(<Hello name="World" />, document.getElementById('container')); 

Answer 2

Se si utilizza ES7, è possibile definire le proprietà di classe come variabili private come questo:

class Hello extends React.Component { 
    name = 'Jack'; 
    render() { 
    return (
     <div> 
     {this.name} 
     </div> 
    ); 
    } 
} 
export default Hello; 

Assicurarsi di utilizzare babel per compilare il codice con stage 0

Answer 3

Le private vars sono perfette quando hai bisogno di informazioni di stato locali (private) per un componente che NON cambia o si riferisce al rendering direttamente. Tenete a mente, molte cose cambiano il rendering, quindi ho scoperto che uso raramente i private vars.

Inoltre, tieni presente che quando aggiungi una variabile alla classe nel modo in cui hai fatto, è un singleton che verrà condiviso con tutte le istanze di quel componente. Questo può portare a problemi se vuole veramente qualcosa di privato per ogni istanza - se è ciò che si vuole, allora avete bisogno di dichiararlo in uno dei metodi del ciclo di vita per la componente forse come questo

componentDidMount() { 
    this.name = 'hello'; 
},