Trochę późno na imprezę, ale oto bardziej wyczerpująca odpowiedź z przykładami:
Reagować
React to oparta na komponentach biblioteka interfejsu użytkownika, która wykorzystuje „cieńowy DOM” do wydajnej aktualizacji DOM o zmiany, zamiast przebudowywania całego drzewa DOM dla każdej zmiany. Początkowo został zbudowany dla aplikacji internetowych, ale teraz można go również używać na urządzeniach mobilnych i 3D / vr.
Komponentów między React i React Native nie można zamieniać, ponieważ React Native odwzorowuje na natywne elementy mobilnego interfejsu użytkownika, ale logiki biznesowej i kodu niezwiązanego z renderowaniem można ponownie użyć.
ReactDOM
Początkowo był dołączony do biblioteki React, ale został podzielony, gdy React był używany na innych platformach niż tylko w Internecie. Służy jako punkt wejścia do DOM i jest używany w połączeniu z React.
Przykład:
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'));
React Native
React Native to wieloplatformowa platforma mobilna, która wykorzystuje React i komunikuje się między Javascriptem a jego rodzimym odpowiednikiem poprzez „most”. Z tego powodu wiele struktur interfejsu użytkownika musi się różnić podczas korzystania z React Native. Na przykład: podczas budowania listy napotkasz poważne problemy z wydajnością, jeśli spróbujesz użyć mapdo zbudowania listy zamiast React NativeFlatList . React Native może być wykorzystywany do tworzenia aplikacji mobilnych na iOS / Android, a także do inteligentnych zegarków i telewizorów.
Expo
Expo jest punktem wyjścia przy uruchamianiu nowej aplikacji React Native.
Expo to platforma i platforma dla uniwersalnych aplikacji React. Jest to zestaw narzędzi i usług opartych na platformach React Native i macierzystych, które pomagają opracowywać, budować, wdrażać i szybko iterować w aplikacjach na iOS, Android i aplikacje internetowe
Uwaga: Korzystając z Expo, możesz używać tylko natywnych API, które zapewniają. Wszystkie dodatkowe biblioteki, które dołączasz, będą musiały być czystym językiem JavaScript lub będziesz musiał wysunąć expo.
Ten sam przykład z wykorzystaniem 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,
},
});
Różnice:
- Zauważ, że wszystko poza renderowaniem może pozostać takie samo, dlatego kod logiki biznesowej / cyklu życia może być ponownie użyty w React i React Native
- W React Native wszystkie komponenty muszą zostać zaimportowane z Reaktywnej lub innej biblioteki interfejsu użytkownika
- Używanie niektórych interfejsów API, które odwzorowują na komponenty natywne, zwykle będzie bardziej wydajne niż próba obsłużenia wszystkiego po stronie javascript. dawny. odwzorowywanie komponentów w celu zbudowania listy w porównaniu z użyciem płaskiej listy
- Subtelne różnice: rzeczy takie jak
onClickzamień sięonPress , React Native używa arkuszy stylów do definiowania stylów w bardziej wydajny sposób, a React Native używa Flexbox jako domyślnej struktury układu, aby utrzymać reakcję.
- Ponieważ w React Native nie ma tradycyjnego „DOM”, w bibliotekach React i React Native można używać tylko czystych bibliotek javascript
React360
Warto również wspomnieć, że React może być również wykorzystywany do tworzenia aplikacji 3D / VR. Struktura komponentu jest bardzo podobna do React Native. https://facebook.github.io/react-360/
