Reactjs - obiekt zorientowany?

Question

Zaczynam używać Reactjs, a pochodząc z tła OO (Java) byłem ciekawy, czy możemy użyć React w prawdziwej mody zorientowanej obiektowo z prawdziwym dziedzictwem i kompozycją.

WYKORZYSTAJ CASE: Tworzymy komponenty React w bibliotece, aby nasi programiści mogli je ponownie wykorzystać. Czy możemy zaprojektować to w sposób zorientowany na obiekt? Na przykład, czy mogę mieć ogólne pole tekstowe wejściowe z kilkoma podstawowymi stylami/zachowaniami, a następnie mieć inne pole MyInput rozszerzające dane wejściowe, które może wykorzystać właściwości i zachowania z Input?

Wygląda na to, że większość z tego, czego się nauczyłem, React używa stanów i reduktorów w samej aplikacji do zarządzania wszystkim; co wydaje mi się, że brakuje punktu mocy projektowania OO. Ale może się mylę. Każda informacja byłaby najbardziej pomocna.

Answer 1

Możliwe jest utworzenie mixins w celu współużytkowania funkcji między komponentami. Siły dziedziczenia, ścisłe łączenie komponentów i na dłuższą metę może to być sprzeczne z produkcją.

Answer 2

Przede wszystkim chciałbym powiedzieć, że React opiera się na JavaScript co jest oczywiście obiektowego (ale nie dokładnie podobny do języków takich jak Java, C++, i wiele innych tradional obiektowe języki ) .

Sam Reagent nie wymusza żadnej techniki obiektowej, ale komponenty React są całkowicie wielokrotnego użytku. Możesz tworzyć ogólne komponenty z bardzo prostego pola tekstowego, etykiety do złożonego i można je wielokrotnie wykorzystywać.

Jeżeli przyjeżdżasz z JAVA świata następnie Proponuję użyć Javascript ES6, aby uzyskać smak klasy w nieco podobny sposób.

Próbkę React składnikiem JavaScript ES6

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

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

Zobacz jak dziedziczenie pracuje tutaj

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

Cały kod widzisz to w JavaScript!

Dla React można podzielić aplikację mieć prezentacyjnych komponenty i komponenty kontenerów dla lepszego ponownego użycia i strukturyzacji.

• prezentacyjne składniki: dotyczyły głównie odbieranie danych za pomocą rekwizytów i ich wyświetlania. Nie określają, w jaki sposób dane są ładowane lub zmutowane i nie mają własnych stanów.

Przykład

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

• składniki w opakowaniu: przekazuje dane i zachowania prezentacyjnych lub innych składników pojemnika. Mają swoje własne stany. Możesz tutaj generować dane i przekazywać je do komponentów prezentacji.

Przykład

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

Proponuję trzymać się z dala od wstawek. Mixiny nie są obsługiwane w klasach ES6.