Reactjs - Orientato agli oggetti?

Question

Sto iniziando a utilizzare Reactjs, e provenendo da uno sfondo OO (Java) ero curioso di poter usare React in un vero modo Object Oriented con vera ereditarietà e composizione.

USE CASE: Stiamo creando componenti React in una libreria per consentire ai nostri sviluppatori di riutilizzarli. Possiamo progettare questo in modo orientato agli oggetti? Per esempio, posso avere un campo di testo di input generico, con alcuni stili/comportamenti di base, quindi avere un altro campo MyInput che estende Input che è in grado di sfruttare le proprietà e i comportamenti di Input?

Sembra che la maggior parte di ciò che ho imparato React usi stati e riduttori all'interno dell'applicazione stessa per gestire tutto; a me sembra che manchi il punto di forza del design OO. Ma forse mi sbaglio. Qualsiasi informazione sarebbe più utile

Answer 1

È possibile creare mixins per condividere la funzionalità tra i componenti. Forza di ereditarietà: accoppiamento stretto dei componenti e nel lungo periodo questo può essere controproducente.

Answer 2

Prima di tutto vorrei dirvi che Reagire si basa su Javascript che è ovviamente orientata agli oggetti (ma non esattamente simile a linguaggi come Java, C++, e molte altre lingue tradional Object Oriented ) .

React stesso non applica alcuna tecnica orientata agli oggetti ma I componenti di reazione sono totalmente riutilizzabili. È possibile creare componenti generici da una casella di testo di input molto semplice, etichette a uno complesso e possono essere riutilizzati più volte.

se si proviene da JAVA mondo allora vorrei suggerire di utilizzare Javascript ES6 per ottenere il gusto di classe in maniera in qualche modo simile.

Un campione Reagire componente Javascript ES6

class Text extends React.Component { 
    render() { 
    return <p>{this.props.children}</p>; 
    } 
} 

React.render(<Text>Hello World</Text>, document.body); 

Vedere come eredità sta lavorando qui

class Point { 
    constructor(x, y) { 
     this.x = x; 
     this.y = y; 
    } 
    toString() { 
     return '(' + this.x + ', ' + this.y + ')'; 
    } 
} 

class CPoint extends Point { 
    constructor(x, y, color) { 
     super(x, y); 
     this.color = color; 
    } 
    toString() { 
     return super.toString() + ' in ' + this.color; 
    } 
} 

Tutto il codice che vedete è in Javascript!

Per Reagire si può dividere l'applicazione per avere componenti di presentazione e componenti container per una migliore usabilità e ri-strutturazione.

• componenti di presentazione: riguardato principalmente con la ricezione dei dati tramite oggetti di scena e la loro visualizzazione. Non specificano come i dati sono caricati o mutati e non hanno i loro stati.

Esempio

const Text = ({ children = 'Hello World!' }) => <p>{children}</p> 

• componenti Contenitore: passa i dati e il comportamento di componenti contenitore di presentazione o altri. Hanno i loro stati. Puoi generare qui i dati e passarli ai componenti di presentazione.

Esempio

class Contacts extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
      message:"new message" 
    }; 
    } 
    render() { 
    return (
     <div><Text children={this.state.message}/></div> 
    ); 
    } 
} 

vorrei suggerire stare lontano da mixin. I mixaggi non sono supportati nelle classi ES6.