Ein bisschen spät zur Party, aber hier ist eine umfassendere Antwort mit Beispielen:
Reagieren
React ist eine komponentenbasierte UI-Bibliothek, die ein "Schatten-DOM" verwendet, um das DOM effizient mit den Änderungen zu aktualisieren, anstatt den gesamten DOM-Baum für jede Änderung neu zu erstellen. Es wurde ursprünglich für Web-Apps entwickelt, kann jetzt aber auch für Mobilgeräte und 3D / VR verwendet werden.
Komponenten zwischen React und React Native können nicht ausgetauscht werden, da React Native nativen Elementen der mobilen Benutzeroberfläche zugeordnet ist, Geschäftslogik und nicht mit dem Rendering verbundener Code jedoch wiederverwendet werden können.
ReactDOM
War ursprünglich in der React-Bibliothek enthalten, wurde jedoch aufgeteilt, sobald React für andere Plattformen als nur das Web verwendet wurde. Es dient als Einstiegspunkt in das DOM und wird in Verbindung mit React verwendet.
Beispiel:
import React from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
state = {
data: [],
}
componentDidMount() {
const data = API.getData(); // fetch some data
this.setState({ data })
}
clearData = () => {
this.setState({
data: [],
});
}
render() {
return (
<div>
{this.state.data.map((data) => (
<p key={data.id}>{data.label}</p>
))}
<button onClick={this.clearData}>
Clear list
</button>
</div>
);
}
}
ReactDOM.render(App, document.getElementById('app'));
Native reagieren
React Native ist ein plattformübergreifendes mobiles Framework, das React verwendet und über eine "Brücke" zwischen Javascript und seinem nativen Gegenstück kommuniziert. Aus diesem Grund muss die Strukturierung der Benutzeroberfläche bei Verwendung von React Native unterschiedlich sein. Beispiel: Wenn Sie eine Liste maperstellen, treten erhebliche Leistungsprobleme auf, wenn Sie versuchen , die Liste anstelle der von React Native zu erstellen FlatList. React Native kann zum Erstellen von IOS / Android-Apps für Mobilgeräte sowie für Smartwatches und Fernseher verwendet werden.
Messe
Die Expo ist die erste Adresse, wenn Sie eine neue React Native-App starten.
Die Expo ist ein Framework und eine Plattform für universelle React-Anwendungen. Es handelt sich um eine Reihe von Tools und Diensten, die auf React Native und nativen Plattformen basieren und Ihnen helfen, iOS-, Android- und Web-Apps zu entwickeln, zu erstellen, bereitzustellen und schnell zu iterieren
Hinweis: Wenn Sie Expo verwenden, können Sie nur die von ihnen bereitgestellten nativen APIs verwenden. Alle zusätzlichen Bibliotheken, die Sie einschließen, müssen aus reinem Javascript bestehen, oder Sie müssen expo auswerfen.
Gleiches Beispiel mit React Native:
import React, { Component } from 'react';
import { Flatlist, View, Text, StyleSheet } from 'react-native';
export default class App extends Component {
state = {
data: [],
}
componentDidMount() {
const data = API.getData(); // fetch some data
this.setState({ data })
}
clearData = () => {
this.setState({
data: [],
});
}
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.data}
renderItem={({ item }) => <Text key={item.id}>{item.label}</Text>}
/>
<Button title="Clear list" onPress={this.clearData}></Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
Unterschiede:
- Beachten Sie, dass alles außerhalb des Renderns gleich bleiben kann. Aus diesem Grund kann der Code für Geschäftslogik / Lebenszykluslogik in React und React Native wiederverwendet werden
- In React Native müssen alle Komponenten aus React-Native oder einer anderen UI-Bibliothek importiert werden
- Die Verwendung bestimmter APIs, die nativen Komponenten zugeordnet sind, ist normalerweise leistungsfähiger als der Versuch, alles auf der Javascript-Seite zu handhaben. Ex. Zuordnen von Komponenten zum Erstellen einer Liste im Vergleich zur Verwendung von Flatlist
- Subtile Unterschiede: Dinge wie
onClickverwandeln sich inonPress , Reaktion india Anwendungen Sheets Stile in einer leistungsfähigere Weise zu definieren, und Reagieren india Verwendungen Flexbox als Standard - Layout - Struktur zu halten Dinge anspricht.
- Da es in React Native kein traditionelles "DOM" gibt, können sowohl in React als auch in React Native nur reine Javascript-Bibliotheken verwendet werden
React360
Erwähnenswert ist auch, dass React auch zur Entwicklung von 3D / VR-Anwendungen verwendet werden kann. Die Komponentenstruktur ist React Native sehr ähnlich. https://facebook.github.io/react-360/
