React Native Academy · Pelajaran

Worklet dan Menjalankan Kod pada Utas UI

Tandakan fungsi sebagai worklet dengan arahan 'worklet', fahami sebab pendekatan ini memintas jambatan JS, dan tulis pengendali gerak isyarat yang mengemas kini nilai dikongsi secara langsung.

Pelajaran 2 daripada 413 langkah

Worklet dan Menjalankan Kod pada Utas UI ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Apakah Fungsi Kerja?

Fungsi kerja ialah fungsi JavaScript yang dijalankan oleh Reanimated pada bebenang UI dan bukannya bebenang JavaScript. Pemalam Babel Reanimated mengesan fungsi yang ditandai dengan rentetan arahan 'worklet' pada bahagian atas kandungannya, lalu mengubahnya pada masa binaan kepada bentuk yang boleh dihantar dan dilaksanakan pada bebenang UI.

Fungsi kerja ialah mekanisme teras yang membolehkan Reanimated memproses data gerak isyarat dan mengemas kini animasi bingkai demi bingkai pada 60fps tanpa melibatkan bebenang JavaScript atau jambatan. Fungsi ini merupakan inovasi seni bina utama yang membezakan Reanimated daripada API Animated klasik.

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

Arahan 'worklet'

Literal rentetan 'worklet' pada bahagian atas kandungan fungsi ialah arahan khas — serupa dengan 'use strict'. Pemalam Babel Reanimated mengimbasnya dan mengubah fungsi tersebut supaya boleh disiri dan dijalankan pada bebenang UI. Tanpa arahan ini, memanggil fungsi daripada konteks fungsi kerja akan melaksanakannya secara senyap pada bebenang JS, lalu berpotensi menyebabkan ranap atau tingkah laku yang salah.

Fungsi yang dihantar kepada cangkuk Reanimated seperti useAnimatedStyle secara automatik dianggap sebagai fungsi kerja walaupun tanpa arahan tersebut. Fungsi utiliti biasa yang dipanggil daripada cangkuk itu memerlukan arahan tersebut secara jelas.

// 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;
}

Mengapa Bebenang UI Penting untuk Gerak Isyarat

Peristiwa sentuhan pada peranti mudah alih diproses pada bebenang UI. Apabila pengguna menyeret jari, peranti menjana peristiwa sentuhan berkali-kali sesaat (sehingga 120fps pada peranti moden). Jika pengendalian gerak isyarat memerlukan bebenang JavaScript, setiap peristiwa sentuhan perlu merentasi jambatan — lalu menambah kependaman yang menyebabkan interaksi terasa lambat dan tidak responsif.

Dengan fungsi kerja, pengendali gerak isyarat dan tindak balas animasi kedua-duanya dijalankan pada bebenang UI. Kemas kini nilai beranimasi berlaku dalam detik bebenang yang sama dengan peristiwa sentuhan, lalu menghasilkan tindak balas gerak isyarat tanpa kependaman sebenar yang terasa seperti interaksi natif iOS/Android.

Memanggil Fungsi Kerja daripada Pengendali Beranimasi

Reanimated menyediakan cangkuk seperti useAnimatedScrollHandler dan useAnimatedGestureHandler yang panggil baliknya dijalankan sebagai fungsi kerja pada bebenang UI. Dalam panggil balik ini, anda boleh memanggil terus sebarang fungsi yang ditandai dengan 'worklet', serta membaca dan menulis nilai dikongsi menggunakan .value.

Menulis pada nilai dikongsi dalam panggil balik gerak isyarat ialah cara anda membuat komponen beranimasi mengikuti jari pengguna dalam masa nyata — penulisan berlaku pada bebenang UI dan gaya beranimasi bertindak balas serta-merta.

import { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';

const scrollY = useSharedValue(0);

const scrollHandler = useAnimatedScrollHandler({
  onScroll: (event) => {
    'worklet';
    scrollY.value = event.contentOffset.y;
  },
});

runOnJS: Memanggil React daripada Fungsi Kerja

Fungsi kerja dijalankan pada bebenang UI dan tidak boleh memanggil fungsi React, setState atau kaedah navigasi secara langsung. Apabila anda perlu mencetuskan kod pada bebenang JavaScript daripada fungsi kerja (contohnya, mengemas kini keadaan React atau menavigasi selepas gerak isyarat selesai), gunakan runOnJS.

runOnJS(fn)(args) menjadualkan fungsi untuk dijalankan pada bebenang JS pada bingkai tersedia yang seterusnya. Ini membolehkan pengendali gerak isyarat mengemas kini keadaan React atau memanggil navigasi selepas interaksi tanpa melanggar model pelaksanaan fungsi kerja.

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: Memanggil Fungsi Kerja daripada Bebenang JS

Lawan kepada runOnJS ialah runOnUI. Ini membolehkan anda menjadualkan fungsi kerja untuk dilaksanakan pada bebenang UI daripada bebenang JavaScript. Ia berguna untuk mencetuskan animasi daripada pengendali peristiwa pada bebenang JS (seperti tekanan butang) sambil mengekalkan logik animasi dalam fungsi kerja.

Dalam kebanyakan keadaan, anda hanya menetapkan sharedValue.value (yang sememangnya berjalan pada bebenang UI), jadi runOnUI kurang diperlukan. Ia menjadi perlu apabila anda perlu mengumpulkan beberapa operasi bebenang UI secara atomik.

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 });
  })();
}

Had Fungsi Kerja

Fungsi kerja bukan JavaScript sepenuhnya — ia berjalan dalam persekitaran terhad yang tidak boleh mengakses API Node.js, cangkuk React, keadaan komponen atau masa jalan JavaScript sepenuhnya. Anda tidak boleh menggunakan console.log daripada fungsi kerja dalam produksi (ia tidak melakukan apa-apa). Anda tidak boleh mengimport modul pihak ketiga dalam fungsi kerja melainkan modul tersebut menyokong Reanimated secara jelas.

Pastikan fungsi kerja tertumpu pada matematik dan pengiraan nilai: mengehadkan julat, memetakan julat, mengira fizik dan membaca data gerak isyarat. Pindahkan perkara lain ke bebenang JS menggunakan runOnJS.

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 untuk Memantau Nilai

useAnimatedReaction membolehkan anda memantau nilai dikongsi atau ungkapan terbitan dan menjalankan fungsi kerja (atau memanggil semula JS) apabila nilainya berubah. Ia menerima dua fungsi kerja: fungsi prepare yang membaca nilai, dan fungsi reaction yang menerima nilai semasa serta nilai sebelumnya.

Ini berguna untuk mencetuskan kesan sampingan apabila animasi mencapai ambang — seperti memanggil navigasi untuk menutup skrin apabila ofset melebihi 50% ketinggian skrin.

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 untuk Nilai Dikongsi Terhitung

useDerivedValue mencipta nilai dikongsi baharu yang dikira secara automatik daripada nilai dikongsi lain. Fungsi terbitan ialah fungsi kerja yang berjalan pada bebenang UI setiap kali mana-mana kebergantungan berubah. Ia merupakan setara Reanimated bagi useMemo, tetapi untuk nilai dikongsi.

Gunakan nilai terbitan untuk mengira transformasi kompleks sekali sahaja (bukannya mengulangi matematik dalam setiap useAnimatedStyle) atau untuk memacu beberapa cangkuk gaya daripada satu sumber kebenaran.

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;
});

Fungsi Kerja dalam Amalan: Paralaks Tatal

Pengepala paralaks tatal menunjukkan fungsi kerja dalam amalan. Ofset tatal memacu beberapa nilai terbitan — imej latar belakang bergerak pada separuh kelajuan, tajuk beransur hilang dan pengepala mini melekat beransur muncul. Semua terbitan ini berjalan sebagai fungsi kerja yang dicetuskan oleh penjejakan tatal Animated.event.

Keseluruhan kesan paralaks berjalan pada 60fps tanpa penglibatan bebenang JavaScript kerana setiap langkah — penjejakan tatal, penerbitan nilai dan pengiraan gaya — ialah fungsi kerja pada bebenang 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,
}));

Menyahpepijat Fungsi Kerja

Menyahpepijat fungsi kerja lebih sukar berbanding JavaScript biasa kerana fungsi tersebut berjalan pada bebenang berasingan. Gunakan console.log dalam fungsi kerja semasa pembangunan (ia berfungsi dalam mod nyahpepijat melalui Hermes), dan gunakan useAnimatedReaction bersama runOnJS(console.log) untuk pengelogan yang selamat dalam produksi.

Reanimated turut berintegrasi dengan React DevTools Profiler untuk menggambarkan fungsi kerja yang sedang berjalan. Jika animasi berkelakuan di luar jangkaan, tambahkan useDerivedValue untuk mengelog nilai terhitung pada setiap bingkai bagi mengenal pasti tempat pengiraan menyimpang daripada jangkaan.

// 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)
);

Semakan Pantas

Uji pemahaman anda tentang konsep Pembangunan Aplikasi Mudah Alih React Native daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Imbas Kembali Pelajaran

Dalam pelajaran ini, anda telah mempelajari bahawa: fungsi kerja ialah fungsi yang ditandai dengan arahan 'worklet' dan berjalan pada bebenang UI tanpa melalui jambatan, runOnJS menjadualkan panggilan pada bebenang JS daripada fungsi kerja untuk keadaan dan navigasi React, dan useDerivedValue serta useAnimatedReaction membolehkan anda menerbitkan dan memantau nilai dikongsi dalam konteks fungsi kerja. Seterusnya, kita akan membina kad yang boleh diseret menggunakan gerak isyarat Pan dengan React Native Gesture Handler.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 30
Pelajaran: 120

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Worklet dan Menjalankan Kod pada Utas UI” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Worklet dan Menjalankan Kod pada Utas UI”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Worklet dan Menjalankan Kod pada Utas UI”?

Tandakan fungsi sebagai worklet dengan arahan 'worklet', fahami sebab pendekatan ini memintas jambatan JS, dan tulis pengendali gerak isyarat yang mengemas kini nilai dikongsi secara langsung. Anda berlatih React Native Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan React Native Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Worklet dan Menjalankan Kod pada Utas UI” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Native Academy ini?

Ya. Setiap pelajaran React Native Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Memasang Reanimated dan Nilai Dikongsi
Worklet dan Menjalankan Kod pada Utas UI
Gerak Isyarat Seret dan Leret dengan Gesture Handler
Zum Cubit dan Putaran

← Kembali ke React Native Academy