Worklets और UI थ्रेड पर कोड चलाना
'worklet' निर्देश से फ़ंक्शन को worklet के रूप में चिह्नित करें, समझें कि यह JS ब्रिज को क्यों दरकिनार करता है और ऐसे gesture handlers लिखें जो shared values को सीधे अपडेट करें।
Worklets और UI थ्रेड पर कोड चलाना, CoddyKit पर React Native Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह React Native Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
वर्कलेट क्या है
वर्कलेट एक JavaScript फ़ंक्शन है जिसे Reanimated, JavaScript थ्रेड के बजाय UI थ्रेड पर चलाता है। Reanimated का Babel प्लगइन उन फ़ंक्शन्स को पहचानता है जिनके बॉडी के आरंभ में 'worklet' डायरेक्टिव स्ट्रिंग होती है और बिल्ड के समय उन्हें ऐसे रूप में बदल देता है जिसे UI थ्रेड पर भेजकर चलाया जा सके।
वर्कलेट्स वह मुख्य तंत्र हैं जो Reanimated को JavaScript थ्रेड या ब्रिज को शामिल किए बिना जेस्चर डेटा प्रोसेस करने और 60fps पर हर फ़्रेम में एनिमेशन अपडेट करने की अनुमति देते हैं। यही मुख्य आर्किटेक्चरल नवाचार Reanimated को क्लासिक Animated API से अलग करता है।
function clamp(value, min, max) {
'worklet'; // directive marks this as a worklet
return Math.min(Math.max(value, min), max);
}
// This function can now be called inside
// useAnimatedStyle, useAnimatedGestureHandler,
// and other Reanimated hooks‘वर्कलेट’ डायरेक्टिव
फ़ंक्शन बॉडी के आरंभ में मौजूद 'worklet' स्ट्रिंग लिटरल एक विशेष डायरेक्टिव है — यह 'use strict' के समान है। Reanimated का Babel प्लगइन इसे खोजता है और फ़ंक्शन को इस तरह बदलता है कि उसे सीरियलाइज़ करके UI थ्रेड पर चलाया जा सके। इस डायरेक्टिव के बिना, वर्कलेट संदर्भ से फ़ंक्शन को कॉल करने पर वह बिना किसी सूचना के JS थ्रेड पर चल सकता है, जिससे क्रैश या गलत व्यवहार हो सकता है।
useAnimatedStyle जैसे Reanimated हुक्स को दिए गए फ़ंक्शन डायरेक्टिव के बिना भी अपने-आप वर्कलेट माने जाते हैं। उन हुक्स से कॉल किए जाने वाले सामान्य यूटिलिटी फ़ंक्शन्स में डायरेक्टिव स्पष्ट रूप से देना पड़ता है।
// Automatically a worklet — Reanimated knows:
const animatedStyle = useAnimatedStyle(() => {
return { opacity: opacity.value };
});
// Utility function needs explicit directive:
function mapRange(value, inMin, inMax, outMin, outMax) {
'worklet';
return ((value - inMin) / (inMax - inMin)) * (outMax - outMin) + outMin;
}जेस्चर के लिए UI थ्रेड क्यों महत्वपूर्ण है
मोबाइल पर टच इवेंट्स UI थ्रेड पर प्रोसेस किए जाते हैं। जब उपयोगकर्ता उंगली खींचता है, तो डिवाइस हर सेकंड में कई बार टच इवेंट्स बनाता है (आधुनिक डिवाइसों पर 120fps तक)। यदि जेस्चर हैंडलिंग के लिए JavaScript थ्रेड की आवश्यकता होती, तो हर टच इवेंट ब्रिज से होकर गुजरता — इससे देरी आती और इंटरैक्शन धीमे तथा अनुत्तरदायी लगते।
वर्कलेट्स के साथ जेस्चर हैंडलर और एनिमेशन की प्रतिक्रिया दोनों UI थ्रेड पर चलते हैं। एनिमेटेड वैल्यू के अपडेट उसी थ्रेड टिक में होते हैं जिसमें टच इवेंट आता है, जिससे वास्तविक शून्य-विलंबता वाली जेस्चर प्रतिक्रिया मिलती है और इंटरैक्शन देशज iOS/Android ऐप्स जैसा महसूस होता है।
एनिमेटेड हैंडलर्स से वर्कलेट्स को कॉल करना
Reanimated, useAnimatedScrollHandler और useAnimatedGestureHandler जैसे हुक्स उपलब्ध कराता है, जिनके कॉलबैक UI थ्रेड पर वर्कलेट के रूप में चलते हैं। इन कॉलबैक्स के भीतर आप 'worklet' से चिह्नित किसी भी फ़ंक्शन को सीधे कॉल कर सकते हैं और .value का उपयोग करके शेयर्ड वैल्यूज़ पढ़ तथा लिख सकते हैं।
जेस्चर कॉलबैक के भीतर शेयर्ड वैल्यू में लिखना ही वह तरीका है जिससे आप किसी एनिमेटेड कॉम्पोनेंट को उपयोगकर्ता की उंगली के साथ रीयल टाइम में चला सकते हैं — लिखने की प्रक्रिया UI थ्रेड पर होती है और एनिमेटेड स्टाइल तुरंत प्रतिक्रिया देता है।
import { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
const scrollY = useSharedValue(0);
const scrollHandler = useAnimatedScrollHandler({
onScroll: (event) => {
'worklet';
scrollY.value = event.contentOffset.y;
},
});runOnJS: वर्कलेट्स से React को कॉल करना
वर्कलेट्स UI थ्रेड पर चलते हैं और React फ़ंक्शन्स, setState या नेविगेशन मेथड्स को सीधे कॉल नहीं कर सकते। जब आपको किसी वर्कलेट से JavaScript-थ्रेड कोड चलाना हो (जैसे, React स्टेट अपडेट करना या जेस्चर पूरा होने के बाद नेविगेट करना), तो runOnJS का उपयोग करें।
runOnJS(fn)(args) फ़ंक्शन को अगले उपलब्ध फ़्रेम पर JS थ्रेड पर चलाने के लिए शेड्यूल करता है। इससे जेस्चर हैंडलर वर्कलेट के निष्पादन मॉडल को बिगाड़े बिना React स्टेट अपडेट कर सकते हैं या इंटरैक्शन के बाद नेविगेशन कॉल कर सकते हैं।
import { runOnJS } from 'react-native-reanimated';
const [dismissed, setDismissed] = React.useState(false);
// Inside a gesture handler worklet:
function onSwipeComplete() {
'worklet';
// Cannot call setDismissed directly from UI thread!
runOnJS(setDismissed)(true); // schedules on JS thread
}runOnUI: JS थ्रेड से वर्कलेट्स को कॉल करना
runOnJS का उलटा runOnUI है। इसकी सहायता से आप JavaScript थ्रेड से किसी वर्कलेट फ़ंक्शन को UI थ्रेड पर चलाने के लिए शेड्यूल कर सकते हैं। यह JS-थ्रेड इवेंट हैंडलर्स (जैसे बटन दबाने) से एनिमेशन शुरू करने में उपयोगी है, जबकि एनिमेशन लॉजिक स्वयं वर्कलेट में रहता है।
अधिकांश मामलों में आप केवल sharedValue.value में असाइन करते हैं (जो पहले से ही UI थ्रेड पर चलता है), इसलिए runOnUI की आवश्यकता कम ही पड़ती है। जब आपको कई UI-थ्रेड कार्रवाइयों को एक ही परमाणु ऑपरेशन में करना हो, तब इसकी आवश्यकता होती है।
import { runOnUI } from 'react-native-reanimated';
function triggerComplexAnimation() {
runOnUI(() => {
'worklet';
// These run atomically on the UI thread:
offset.value = withSpring(200);
scale.value = withTiming(0.8, { duration: 300 });
opacity.value = withTiming(0.5, { duration: 300 });
})();
}वर्कलेट्स की सीमाएँ
वर्कलेट्स पूर्ण JavaScript नहीं होते — वे सीमित वातावरण में चलते हैं, जहाँ Node.js API, React हुक्स, कॉम्पोनेंट स्टेट या पूरा JavaScript रनटाइम उपलब्ध नहीं होता। प्रोडक्शन में वर्कलेट से console.log नहीं कर सकते (यह कोई कार्रवाई नहीं करता)। किसी वर्कलेट के भीतर थर्ड-पार्टी मॉड्यूल इंपोर्ट नहीं कर सकते, जब तक वे स्पष्ट रूप से Reanimated का समर्थन न करते हों।
वर्कलेट्स को गणित और वैल्यू की गणना तक सीमित रखें: सीमाबद्ध करना, रेंज मैप करना, भौतिकी की गणना करना और जेस्चर डेटा पढ़ना। बाकी सभी काम runOnJS का उपयोग करके JS थ्रेड पर ले जाएँ।
function gestureHandler(event) {
'worklet';
// OK in worklets:
const clamped = Math.max(0, Math.min(event.translationX, 300));
offset.value = clamped;
// NOT OK in worklets:
// console.log('position:', clamped); // no-op in prod
// setReactState(clamped); // crashes - use runOnJS
// navigation.navigate('Screen'); // crashes - use runOnJS
}वैल्यूज़ पर नज़र रखने के लिए useAnimatedReaction
useAnimatedReaction किसी शेयर्ड वैल्यू या व्युत्पन्न एक्सप्रेशन पर नज़र रखने और उसके बदलने पर वर्कलेट चलाने (या JS को कॉलबैक करने) की सुविधा देता है। इसमें दो वर्कलेट फ़ंक्शन लिए जाते हैं: एक तैयारी फ़ंक्शन, जो वैल्यूज़ पढ़ता है, और एक रिएक्शन फ़ंक्शन, जिसे वर्तमान तथा पिछली वैल्यूज़ मिलती हैं।
यह तब साइड इफ़ेक्ट शुरू करने के लिए उपयोगी है जब कोई एनिमेशन किसी सीमा तक पहुँच जाए — जैसे, ऑफ़सेट स्क्रीन की ऊँचाई के 50% से अधिक होने पर स्क्रीन हटाने के लिए नेविगेशन कॉल करना।
import { useAnimatedReaction, runOnJS } from 'react-native-reanimated';
useAnimatedReaction(
() => offset.value, // prepare: what to watch
(currentValue, previousValue) => { // reaction: what to do
'worklet';
if (currentValue > 200 && previousValue <= 200) {
runOnJS(onDismiss)(); // notify JS thread
}
}
);परिकलित शेयर्ड वैल्यूज़ के लिए useDerivedValue
useDerivedValue ऐसी नई शेयर्ड वैल्यू बनाता है जिसकी गणना अन्य शेयर्ड वैल्यूज़ से अपने-आप होती है। डेरिवेशन फ़ंक्शन एक वर्कलेट है, जो किसी भी निर्भरता के बदलने पर UI थ्रेड पर चलता है। यह शेयर्ड वैल्यूज़ के लिए useMemo के समान Reanimated सुविधा है।
जटिल रूपांतरणों की गणना एक ही बार करने के लिए डिराइव्ड वैल्यूज़ का उपयोग करें (हर useAnimatedStyle में गणित दोहराने के बजाय) या एक ही विश्वसनीय स्रोत से कई स्टाइल हुक्स को चलाने के लिए इनका उपयोग करें।
import { useDerivedValue } from 'react-native-reanimated';
const progress = useSharedValue(0); // 0 to 1
// Derived: convert progress to translateX
const translateX = useDerivedValue(() => {
'worklet';
return progress.value * 300;
});
// Derived: convert progress to opacity (inverse)
const opacity = useDerivedValue(() => {
'worklet';
return 1 - progress.value;
});व्यवहार में वर्कलेट्स: स्क्रॉल पैरालैक्स
स्क्रॉल पैरालैक्स हेडर, व्यवहार में वर्कलेट्स का एक अच्छा उदाहरण है। स्क्रॉल ऑफ़सेट कई डिराइव्ड वैल्यूज़ को चलाता है — बैकग्राउंड इमेज आधी गति से चलती है, शीर्षक धीरे-धीरे गायब होता है और एक स्थिर मिनी-हेडर धीरे-धीरे दिखाई देता है। ये सभी डेरिवेशन Animated.event की स्क्रॉल ट्रैकिंग से शुरू होने वाले वर्कलेट्स के रूप में चलते हैं।
पूरा पैरालैक्स प्रभाव JavaScript थ्रेड को शामिल किए बिना 60fps पर चलता है, क्योंकि हर चरण — स्क्रॉल ट्रैकिंग, वैल्यू डेरिवेशन और स्टाइल की गणना — UI थ्रेड पर चलने वाला वर्कलेट है।
const scrollY = useSharedValue(0);
const bgTranslateY = useDerivedValue(() => scrollY.value * 0.5);
const titleOpacity = useDerivedValue(() =>
Math.max(0, 1 - scrollY.value / 100)
);
const bgStyle = useAnimatedStyle(() => ({
transform: [{ translateY: bgTranslateY.value }],
}));
const titleStyle = useAnimatedStyle(() => ({
opacity: titleOpacity.value,
}));वर्कलेट्स को डीबग करना
वर्कलेट्स को डीबग करना सामान्य JavaScript की तुलना में कठिन है, क्योंकि वे अलग थ्रेड पर चलते हैं। विकास के दौरान वर्कलेट्स के भीतर console.log का उपयोग करें (यह Hermes के ज़रिए डीबग मोड में काम करता है), और प्रोडक्शन में सुरक्षित लॉगिंग के लिए useAnimatedReaction के साथ runOnJS(console.log) का उपयोग करें।
Reanimated, React DevTools Profiler के साथ भी एकीकृत होता है, जिससे यह देखा जा सकता है कि कौन-से वर्कलेट चल रहे हैं। यदि एनिमेशन अपेक्षा के अनुसार व्यवहार नहीं करते, तो प्रत्येक फ़्रेम में परिकलित वैल्यू लॉग करने के लिए useDerivedValue जोड़ें और पहचानें कि गणना अपेक्षा से कहाँ अलग हो रही है।
// Development: console.log works in Hermes debug
useAnimatedStyle(() => {
console.log('offset:', offset.value); // OK in dev mode
return { transform: [{ translateX: offset.value }] };
});
// Production-safe logging via runOnJS:
useAnimatedReaction(
() => offset.value,
(val) => runOnJS(console.log)('offset:', val)
);त्वरित जाँच
इस पाठ में React Native मोबाइल डेवलपमेंट की अवधारणाओं की अपनी समझ जाँचें।
पाठ का पुनरावलोकन
इस पाठ में आपने सीखा: वर्कलेट्स 'worklet' डायरेक्टिव से चिह्नित फ़ंक्शन होते हैं, जो ब्रिज को दरकिनार करके UI थ्रेड पर चलते हैं, runOnJS React स्टेट और नेविगेशन के लिए वर्कलेट्स से JS-थ्रेड कॉल शेड्यूल करता है, और useDerivedValue तथा useAnimatedReaction आपको वर्कलेट संदर्भ में शेयर्ड वैल्यूज़ डिराइव करने और उन पर नज़र रखने देते हैं। अब हम React Native Gesture Handler के साथ Pan जेस्चर का उपयोग करके एक ड्रैगेबल कार्ड बनाएँगे।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “Worklets और UI थ्रेड पर कोड चलाना” पाठ निःशुल्क है?
हाँ — React Native Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Worklets और UI थ्रेड पर कोड चलाना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“Worklets और UI थ्रेड पर कोड चलाना” में मैं क्या सीखूँगा?
'worklet' निर्देश से फ़ंक्शन को worklet के रूप में चिह्नित करें, समझें कि यह JS ब्रिज को क्यों दरकिनार करता है और ऐसे gesture handlers लिखें जो shared values को सीधे अपडेट करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Native Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या React Native Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Native Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“Worklets और UI थ्रेड पर कोड चलाना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस React Native Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर React Native Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Reanimated और Shared Values इंस्टॉल करना
- Worklets और UI थ्रेड पर कोड चलाना
- Gesture Handler से Pan और Swipe जेस्चर
- Pinch-to-Zoom और Rotation