Un po 'in ritardo alla festa, ma ecco una risposta più completa con esempi:
Reagire
React è una libreria UI basata su componenti che utilizza un "DOM ombra" per aggiornare in modo efficiente il DOM con ciò che è cambiato invece di ricostruire l'intero albero DOM per ogni modifica. Inizialmente è stato creato per le app Web, ma ora può essere utilizzato anche per dispositivi mobili e 3D / vr.
I componenti tra React e React Native non possono essere scambiati perché React Native si associa a elementi dell'interfaccia utente mobile nativi ma è possibile riutilizzare la logica aziendale e il codice relativo al non rendering.
ReactDOM
Inizialmente è stato incluso con la libreria React ma è stato suddiviso una volta che React veniva utilizzato per altre piattaforme oltre al semplice web. Serve come punto di accesso al DOM e viene utilizzato in unione con React.
Esempio:
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'));
Reagisci nativo
React Native è un framework mobile multipiattaforma che utilizza React e comunica tra Javascript e la sua controparte nativa tramite un "ponte". Per questo motivo, gran parte della strutturazione dell'interfaccia utente deve essere diversa quando si utilizza React Native. Ad esempio: durante la creazione di un elenco, si verificheranno importanti problemi di prestazioni se si tenta di utilizzare mapper compilare l'elenco anziché React NativeFlatList . React Native può essere utilizzato per sviluppare app mobili IOS / Android, nonché per orologi e TV intelligenti.
Expo
Expo è il punto di partenza quando si avvia una nuova app React Native.
Expo è un framework e una piattaforma per applicazioni React universali. È un insieme di strumenti e servizi costruiti attorno a React Native e piattaforme native che ti aiutano a sviluppare, costruire, distribuire e iterare rapidamente su iOS, Android e app Web
Nota: quando si utilizza Expo, è possibile utilizzare solo le API native che forniscono. Tutte le librerie aggiuntive che includerai dovranno essere pure javascript o dovrai espellere expo.
Stesso esempio usando 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,
},
});
differenze:
- Si noti che tutto al di fuori del rendering può rimanere lo stesso, ecco perché la logica aziendale / il codice della logica del ciclo di vita possono essere riutilizzati in React e React Native
- In React Native tutti i componenti devono essere importati da reattivo-nativo o da un'altra libreria UI
- L'uso di determinate API associate ai componenti nativi sarà generalmente più performante rispetto al tentativo di gestire tutto sul lato javascript. ex. mappare i componenti per creare un elenco rispetto all'utilizzo dell'elenco piatto
- Differenze sottili: cose come
onClicktrasformarsi in onPress, React Native usa i fogli di stile per definire gli stili in modo più performante e React Native usa la flexbox come struttura di layout predefinita per mantenere le cose reattive.
- Poiché non esiste un "DOM" tradizionale in React Native, solo le librerie javascript pure possono essere utilizzate sia in React che in React Native
React360
Vale anche la pena ricordare che React può essere utilizzato anche per sviluppare applicazioni 3D / VR. La struttura del componente è molto simile a React Native. https://facebook.github.io/react-360/
