পার্টিতে কিছুটা দেরি হলেও এখানে উদাহরণ সহ আরও বিস্তৃত উত্তর:
প্রতিক্রিয়া
প্রতিক্রিয়া হ'ল একটি উপাদান ভিত্তিক ইউআই লাইব্রেরি যা প্রতিটি পরিবর্তনের জন্য পুরো ডিওএম ট্রি পুনর্নির্মাণের পরিবর্তে যা পরিবর্তিত হয়েছে তা দিয়ে ডিওএমকে দক্ষতার সাথে আপডেট করতে "শেডো ডিওএম" ব্যবহার করে। এটি প্রাথমিকভাবে ওয়েব অ্যাপ্লিকেশনগুলির জন্য নির্মিত হয়েছিল, তবে এখন মোবাইল এবং 3 ডি / ভিআর জন্যও ব্যবহার করা যেতে পারে।
প্রতিক্রিয়া এবং প্রতিক্রিয়া নেটিভের মধ্যে উপাদানগুলি আদান প্রদান করা যায় না কারণ দেশীয় মোবাইল ইউআই উপাদানগুলিতে প্রতিক্রিয়া নেটিভ মানচিত্র তবে ব্যবসায়িক যুক্তি এবং নন-রেন্ডার সম্পর্কিত কোডটি আবার ব্যবহার করা যেতে পারে।
ReactDOM
প্রাথমিকভাবে প্রতিক্রিয়া পাঠাগারটির সাথে অন্তর্ভুক্ত ছিল তবে একবার কেবল ওয়েবের চেয়ে প্রতিক্রিয়া অন্য প্ল্যাটফর্মের জন্য ব্যবহৃত হচ্ছে। এটি ডিওএম-এ প্রবেশের পয়েন্ট হিসাবে কাজ করে এবং প্রতিক্রিয়াটির সাথে মিলিতভাবে ব্যবহৃত হয়।
উদাহরণ:
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'));
নেটিভ প্রতিক্রিয়া
প্রতিক্রিয়া নেটিভ একটি ক্রস-প্ল্যাটফর্ম মোবাইল কাঠামো যা প্রতিক্রিয়া ব্যবহার করে এবং জাভাস্ক্রিপ্ট এবং এটি একটি "ব্রিজ" এর মাধ্যমে নেটিভ সহযোগী অংশের মধ্যে যোগাযোগ করে। এর কারণে, রিঅ্যাক্ট নেটিভ ব্যবহার করার সময় অনেকগুলি ইউআই স্ট্রাকচারিং আলাদা হতে হবে। উদাহরণস্বরূপ: একটি তালিকা তৈরি করার সময়, আপনি যদি 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,
},
});
পার্থক্য:
- লক্ষ্য করুন যে রেন্ডারের বাইরের সমস্ত কিছু একই থাকতে পারে, এ কারণেই ব্যবসায়িক যুক্তি / লাইফসাইकल লজিক কোডটি পুনরায় প্রতিক্রিয়া এবং প্রতিক্রিয়া নেটিভ জুড়ে পুনরায় ব্যবহার করা যেতে পারে
- রিএ্যাক্ট নেটিভতে সমস্ত উপাদানকে রিএ্যাক্ট নেটিভ বা অন্য একটি ইউআই লাইব্রেরি থেকে আমদানি করা প্রয়োজন
- নেটিভ উপাদানগুলিতে নির্দিষ্ট এপিআই-র সেই মানচিত্রটি ব্যবহার করা সাধারণত জাভাস্ক্রিপ্টের পাশে থাকা সমস্ত কিছুই হ্যান্ডেল করার চেষ্টা করার চেয়ে আরও পারফরম্যান্স হতে চলেছে। প্রাক্তন। ফ্ল্যাটলিস্ট ব্যবহার করে একটি তালিকা তৈরি করতে উপাদানগুলির ম্যাপিং
- সূক্ষ্ম পার্থক্য:
onClickপরিবর্তিত মত জিনিসonPress , রিএকটিভ নেটিভ আরও দক্ষতার সাথে স্টাইলগুলি সংজ্ঞায়িত করতে স্টাইলশিট ব্যবহার করে এবং প্রতিক্রিয়াশীল নেটিভ জিনিসগুলিকে প্রতিক্রিয়াশীল রাখতে ডিফল্ট লেআউট কাঠামো হিসাবে ফ্লেক্সবক্স ব্যবহার করে।
- প্রতিক্রিয়া নেটিভে যেহেতু কোনও traditionalতিহ্যবাহী "DOM" নেই, তাই কেবল খাঁটি জাভাস্ক্রিপ্ট লাইব্রেরিগুলি প্রতিক্রিয়া এবং প্রতিক্রিয়া নেটিভ উভয়ই ব্যবহার করা যেতে পারে
React360
এটি আরও উল্লেখযোগ্য যে প্রতিক্রিয়াটি 3 ডি / ভিআর অ্যাপ্লিকেশনগুলি বিকাশ করতেও ব্যবহার করা যেতে পারে। উপাদান কাঠামো প্রতিক্রিয়া নেটিভ খুব অনুরূপ। https://facebook.github.io/react-360/
