Partiye biraz geç, ama işte örneklerle daha kapsamlı bir cevap:
Tepki
React, DOM'u her değişiklik için tüm DOM ağacını yeniden oluşturmak yerine değişenlerle verimli bir şekilde güncellemek için "gölge DOM" kullanan bileşen tabanlı bir kullanıcı arayüzü kütüphanesidir. Başlangıçta web uygulamaları için üretildi, ancak şimdi mobil ve 3D / vr için de kullanılabilir.
React ve React Native arasındaki bileşenler birbirinin yerine kullanılamaz çünkü React yerel mobil kullanıcı arabirimi öğeleriyle yerel eşleşir, ancak iş mantığı ve oluşturma ile ilgili olmayan kod yeniden kullanılabilir.
ReactDOM
Başlangıçta React kütüphanesine dahil edildi, ancak React sadece web dışındaki diğer platformlar için kullanıldığında ayrıldı. DOM'a giriş noktası görevi görür ve React ile birlikte kullanılır.
Misal:
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'));
Yerli Tepki
React Native, React kullanan ve Javascript ile yerel karşılığı arasında bir "köprü" aracılığıyla iletişim kuran çapraz platformlu bir mobil çerçevedir. Bu nedenle, React Native kullanırken birçok UI yapılandırması farklı olmalıdır. Örneğin: bir liste oluştururken, mapReact Native yerine listeyi oluşturmak için kullanmaya çalışırsanız önemli performans sorunlarıyla karşılaşırsınız FlatList. React Native, akıllı saatler ve TV'lerin yanı sıra IOS / Android mobil uygulamalar oluşturmak için kullanılabilir.
Expo
Yeni bir React Native uygulaması başlatılırken Expo en iyisidir.
Expo evrensel React uygulamaları için bir çerçeve ve platformdur. İOS, Android ve web uygulamalarını geliştirmenize, derlemenize, dağıtmanıza ve hızlı bir şekilde yinelemenize yardımcı olan React Native ve yerel platformlar etrafında oluşturulmuş bir dizi araç ve hizmettir
Not: Expo kullanırken yalnızca sağladıkları Yerel Api'leri kullanabilirsiniz. Eklediğiniz tüm ek kitaplıkların saf javascript olması veya expo'yu çıkarmanız gerekecektir.
React Native kullanan aynı örnek:
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,
},
});
farklılıklar:
- Oluşturma dışındaki her şeyin aynı kalabileceğine dikkat edin, bu nedenle iş mantığı / yaşam döngüsü mantık kodu React ve React Native'de yeniden kullanılabilir
- React Native'de tüm bileşenlerin reat-native veya başka bir UI kütüphanesinden içe aktarılması gerekir
- Yerel bileşenlerle eşlenen belirli API'leri kullanmak genellikle javascript tarafındaki her şeyi ele almaya çalışmaktan daha performanslı olacaktır. ex. Liste oluşturmak için düzleme kullanarak düz listeyi kullanma
- İnce farklar:
onClickdönüşmek gibi şeyler onPress, React Native, stilleri daha verimli bir şekilde tanımlamak için stil sayfalarını kullanır ve React Native, şeyleri yanıtlamak için varsayılan düzen yapısı olarak flexbox kullanır.
- React Native'de geleneksel "DOM" olmadığından, React ve React Native'de yalnızca saf javascript kütüphaneleri kullanılabilir
React360
React'in 3D / VR uygulamaları geliştirmek için de kullanılabileceğini belirtmek gerekir. Bileşen yapısı React Native'e çok benzer. https://facebook.github.io/react-360/
