पार्टी के लिए थोड़ा देर से, लेकिन यहां उदाहरणों के साथ एक अधिक व्यापक जवाब दिया गया है:
प्रतिक्रिया
रिएक्ट एक घटक आधारित यूआई लाइब्रेरी है जो हर बदलाव के लिए संपूर्ण डोम ट्री के पुनर्निर्माण के बजाय डोम के साथ कुशलतापूर्वक अपडेट करने के लिए "शैडो डोम" का उपयोग करता है। यह शुरुआत में वेब ऐप के लिए बनाया गया था, लेकिन अब इसे मोबाइल और 3 डी / वीआर के लिए भी इस्तेमाल किया जा सकता है।
रिएक्ट और रिएक्टिव नेटिव के बीच के घटकों को आपस में जोड़ा नहीं जा सकता क्योंकि रिएक्टिव नेटिव मैप देशी मोबाइल यूआई तत्वों के लिए है लेकिन व्यावसायिक तर्क और गैर-रेंडर संबंधित कोड का फिर से उपयोग किया जा सकता है।
ReactDOM
शुरू में रिएक्ट लाइब्रेरी के साथ शामिल किया गया था लेकिन एक बार रिएक्ट सिर्फ वेब की तुलना में अन्य प्लेटफार्मों के लिए इस्तेमाल किया जा रहा था, लेकिन इसे अलग कर दिया गया था। यह DOM के प्रवेश बिंदु के रूप में कार्य करता है और इसका उपयोग React के साथ मिल कर किया जाता है।
उदाहरण:
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 का उपयोग करते समय बहुत सारे UI संरचना को अलग करना पड़ता है। उदाहरण के लिए: सूची बनाते समय, आप प्रमुख प्रदर्शन के मुद्दों में भाग लेंगे यदि आप mapप्रतिक्रिया मूल के बजाय सूची का निर्माण करने के लिए उपयोग करने का प्रयास करते हैं FlatList। रिएक्ट नेटिव का उपयोग आईओएस / एंड्रॉइड मोबाइल ऐप बनाने के लिए किया जा सकता है, साथ ही स्मार्ट घड़ियों और टीवी के लिए भी।
एक्सपो
एक्सपो एक नया रिएक्ट नेटिव ऐप शुरू करने के लिए जाने वाला है।
एक्सपो एक ढांचा और सार्वभौमिक प्रतिक्रिया अनुप्रयोगों के लिए एक मंच है। यह टूल्स और सेवाओं का एक सेट है जो रिएक्ट नेटिव और देशी प्लेटफार्मों के आसपास बनाया गया है जो आपको आईओएस, एंड्रॉइड और वेब ऐप्स पर विकसित करने, निर्माण करने, तैनाती करने और जल्दी से पुनरावृति करने में मदद करता है।
ध्यान दें: एक्सपो का उपयोग करते समय, आप केवल नेटिव एपि का उपयोग कर सकते हैं। आपके द्वारा शामिल किए जाने वाले सभी अतिरिक्त पुस्तकालयों के लिए शुद्ध जावास्क्रिप्ट की आवश्यकता होगी या आपको एक्सपो को बाहर निकालने की आवश्यकता होगी।
प्रतिक्रियाशील मूल का उपयोग करते हुए एक ही उदाहरण:
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,
},
});
अंतर:
- ध्यान दें कि रेंडर के बाहर सब कुछ समान हो सकता है, यही कारण है कि व्यावसायिक तर्क / जीवनचक्र तर्क कोड को रीएक्ट और रिएक्टिव नेटिव में फिर से उपयोग किया जा सकता है
- प्रतिक्रिया मूल में सभी घटकों को प्रतिक्रिया-मूल या किसी अन्य UI लाइब्रेरी से आयात करने की आवश्यकता होती है
- देशी घटकों के लिए कुछ एपीआई के नक्शे का उपयोग करना आमतौर पर जावास्क्रिप्ट पक्ष पर सब कुछ संभालने की कोशिश करने से अधिक प्रदर्शन करने वाला होता है। पूर्व। एक सूची बनाने के लिए घटक का मानचित्रण बनाम फ्लैटलिस्ट का उपयोग करना
- सूक्ष्म अंतर: चीजों को
onClickचालू करने की तरह onPress, रिएक्ट नेटिव शैलियों को अधिक प्रदर्शनकारी तरीके से परिभाषित करने के लिए स्टाइलशीट का उपयोग करता है, और रिएक्ट नेटिव चीजों को प्रतिक्रियाशील रखने के लिए डिफ़ॉल्ट लेआउट संरचना के रूप में फ्लेक्सबॉक्स का उपयोग करता है।
- चूंकि रिएक्टिव नेटिव में कोई पारंपरिक "DOM" नहीं है, केवल रिएक्ट और रिएक्टिव नेटिव दोनों में ही शुद्ध जावास्क्रिप्ट लाइब्रेरी का उपयोग किया जा सकता है
React360
यह भी उल्लेखनीय है कि रिएक्ट का उपयोग 3D / VR अनुप्रयोगों को विकसित करने के लिए भी किया जा सकता है। घटक संरचना रिएक्ट मूल के समान है। https://facebook.github.io/react-360/
