Worklet: функция, уехавшая в другой поток

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Второй поток лежит в подложке примеров. Это Worker: браузер выполняет его код в отдельном потоке, со своей кучей и своим глобальным объектом. Общих переменных со страницей у него нет, дорога одна — сообщение: postMessage на одной стороне, onmessage на другой. Пример говорит с потоком через sendToWorker из подложки: она отправляет значение, а второй поток отвечает текстом того, что получил. Сам Worker пример не называет, как не называет document: на телефоне его нет, и в типах React Native — тоже. Назовите — и компилятор ответит «Не удается найти имя "Worker"».

Отправим то, что нужно решению свайпа: состояние жеста { dx, vx } — и сразу после отправки поменяем в нём dx. Потом отправим само решение. Прогноз: что получит второй поток и в каком порядке появятся строки?

rn

// второй поток и sendToWorker — в подложке примера
declare function sendToWorker(value: unknown): Promise<string>;

const WIDTH = 300;
// решение строки подхода из прошлой статьи: дальше трети ширины — удаляем
const decide = (dx: number) => (dx < -WIDTH / 3 ? "удаляем" : "назад");
const gesture = { dx: -120, vx: -0.8 };

sendToWorker(gesture).then((arrived) => console.log("второй поток получил:", arrived));
// меняем уже отправленное
gesture.dx = 0;
try {
  sendToWorker(decide);
} catch (e) {
  console.log(String(e));
}
console.log("отправка кончилась");

экран примера

Сначала предположите, что выведет код

Функцию не пропустили — и не молча, как JSON.stringify в модели границы из статьи про нативный драйвер, а исключением DataCloneError прямо в вызове postMessage: строка с ошибкой стоит раньше «отправка кончилась». Текст ошибки здесь от Chrome, в других браузерах слова другие, а имя то же. Состояние жеста дошло таким, каким было в момент отправки: dx равен −120, хотя строкой ниже его обнулили. И дошло последним: ответ второго потока — тоже сообщение, и этот поток прочёл его, только закончив свой такт.

Сообщение копирует структурное клонирование — алгоритм, общий для postMessage и structuredClone (сам structuredClone разобран в статье части I «Копирование объектов: поверхностное и глубокое»). Он обходит значение и строит такое же в куче получателя, и связи с оригиналом у копии нет. Функцию он не копирует: функция — не только текст, но и окружение, в котором её создали, а окружение живёт в куче отправителя и в чужую не переносится.

Что отправляют	Что получит второй поток
число, строку, `true`, `null`	то же значение
массив, простой объект, `Date`, `Map`, `Set`	копию всей глубины, снятую в момент отправки
функцию или объект, где среди полей есть функция	ничего: `postMessage` бросает `DataCloneError`, сообщение не уходит

Раз функцию не скопировать, отправим её текст: toString() у функции отдаёт исходник. На этом стоит runOnWorker(функция, ...аргументы) из подложки: текст и аргументы уходят сообщением, второй поток собирает из текста функцию, вызывает её и присылает результат, а runOnWorker отдаёт его промисом. Отправим одно и то же решение в двух видах: decideWith получает ширину аргументом, decide берёт её снаружи — как строка подхода в прошлой статье. Прогноз?

rn

// второй поток и runOnWorker — в подложке примера
declare function runOnWorker<A extends unknown[], R>(fn: (...args: A) => R, ...args: A): Promise<Awaited<R>>;

const WIDTH = 300;
const decide = (dx: number) => (dx < -WIDTH / 3 ? "удаляем" : "назад");
// то же решение, но всё, что нужно, приходит аргументами
const decideWith = (dx: number, width: number) => (dx < -width / 3 ? "удаляем" : "назад");

console.log("этот поток:", decide(-120));
runOnWorker(decideWith, -120, WIDTH).then((r) => console.log("второй поток, decideWith:", r));
runOnWorker(decide, -120).then(
  (r) => console.log("второй поток, decide:", r),
  (e: Error) => console.log("второй поток, decide:", e.message),
);

экран примера

Сначала предположите, что выведет код

decideWith доехала и решила так же, как здесь. decide, которая в этом потоке работает, во втором упала: WIDTH там не объявлена. Текст функции несёт имя WIDTH, но не значение. Значение лежит в окружении, где функцию создали, — в её замыкании (как функция помнит окружение, разобрано в статье части I «Замыкания: как функция помнит своё окружение»). Окружение осталось в этой куче, а во второй текст собрался заново — среди глобалей Worker, где никакой WIDTH нет.

Почему бы не отправить окружение вместе с текстом? Потому что из JavaScript его не видно. Посмотрим, что можно узнать о замыкании, имея только функцию. Прогноз: будут ли в тексте типы и найдётся ли среди собственных ключей функции хоть что-то про WIDTH?

rn

const WIDTH = 300;
const decide = (dx: number) => (dx < -WIDTH / 3 ? "удаляем" : "назад");

console.log(decide.toString());
console.log("свойства:", Reflect.ownKeys(decide).join(", "));

экран примера

Сначала предположите, что выведет код

Типов в тексте нет: toString отдаёт то, что выполняется, а выполняется код после компилятора. Замыкания нет ни в тексте, ни среди ключей: у стрелки их два, length и name. Спросить у функции «какие внешние переменные ты держишь и чему они равны» в языке нечем — замыкание видит только движок. Значит, библиотека, которая хочет увезти функцию в другой поток, во время выполнения не узнает, что прихватить с собой.

Узнать это можно по исходнику, пока код ещё не собран: найти в теле функции имена, объявленные снаружи, и приложить к функции их значения. Это работа для сборки, и это та самая причина, по которой понадобились worklet-ы. Worklet — функция, у которой текст и список внешних имён собраны заранее, при сборке, и поэтому она переносится в другой поток целиком.

Сделаем за сборку её работу руками. worklet(функция, замыкание) из подложки ничего не вычисляет: она кладёт в свойство __closure объект с внешними переменными, которые перечислили вы. runOnWorker, увидев такое свойство, отправляет вместе с текстом копию этого объекта. Второй поток превращает ключи копии в параметры обёртки и вызывает её со значениями — внутри обёртки текст функции снова стоит в окружении, где эти имена есть:

jsлистинг · не запускается

// из подложки, код второго потока: функция приехала текстом, замыкание — копией
var names = Object.keys(job.closure);
var make = Function.apply(null, names.concat("return (" + job.code + ");"));
var fn = make.apply(null, names.map(function (n) { return job.closure[n]; }));

// из подложки, код второго потока: функция приехала текстом, замыкание — копией
var names = Object.keys(job.closure);
var make = Function.apply(null, names.concat("return (" + job.code + ");"));
var fn = make.apply(null, names.map(function (n) { return job.closure[n]; }));

Остаётся вопрос, когда снимается копия замыкания: при каждой отправке, как состояние жеста в первом разделе, или однажды. Проверим на пороге свайпа: в «Подходе» он лежит в настройках, и его меняют, не уходя с экрана. Прогноз: что ответят оба потока после правки?

rn

// второй поток, runOnWorker и worklet — в подложке примера
declare function runOnWorker<A extends unknown[], R>(fn: (...args: A) => R, ...args: A): Promise<Awaited<R>>;
declare function worklet<F extends Function>(fn: F, closure: Record<string, unknown>): F;

// порог свайпа из настроек: его меняют, не уходя с экрана
const limits = { swipe: 100 };
// замыкание перечислено руками — ровно то, что в Reanimated делает плагин
const decide = worklet((dx: number) => (dx < -limits.swipe ? "удаляем" : "назад"), { limits });

runOnWorker(decide, -150).then((r) => console.log("второй поток до правки:", r));
limits.swipe = 200;
console.log("этот поток после правки:", decide(-150));
runOnWorker(decide, -150).then((r) => console.log("второй поток после правки:", r));

экран примера

Сначала предположите, что выведет код

Первый ответ второго потока — «удаляем»: порог доехал, и 150 точек больше сотни. Но и после правки второй поток ответил «удаляем», а этот — «назад». Копия замыкания снята при первой отправке, и правка до неё не дошла. У одной функции в двух потоках теперь разные пороги, и заметно это только по свайпу, который удалил лишнее.

Снимать копию однажды — не прихоть миниатюры. scheduleOnUI из react-native-worklets переводит worklet вместе с замыканием в переносимый вид и кеширует перевод: в комментарии к ней сказано, что для одного worklet-а перевод делается один раз. А чтобы правка вроде нашей не проходила молча, в отладочной сборке объекты замыкания после перевода замораживаются:

tsлистинг · не запускается

// react-native-worklets 0.10.1, src/memory/serializable.native.ts (с сокращениями)
function freezeObjectInDev<TValue extends object>(value: TValue) {
  if (!__DEV__ || globalThis.__RUNTIME_KIND !== RuntimeKind.ReactNative) {
    return;
  }
  Object.entries(value).forEach(([key, element]) => {
    // …
    Object.defineProperty(value, key, {
      get() {
        return element;
      },
      set() {
        logger.warn(
          `Tried to modify key \`${key}\` of an object which has been already passed to a worklet. See …`
        );
      },
    });
  });
  Object.preventExtensions(value);
}

// react-native-worklets 0.10.1, src/memory/serializable.native.ts (с сокращениями)
function freezeObjectInDev<TValue extends object>(value: TValue) {
  if (!__DEV__ || globalThis.__RUNTIME_KIND !== RuntimeKind.ReactNative) {
    return;
  }
  Object.entries(value).forEach(([key, element]) => {
    // …
    Object.defineProperty(value, key, {
      get() {
        return element;
      },
      set() {
        logger.warn(
          `Tried to modify key \`${key}\` of an object which has been already passed to a worklet. See …`
        );
      },
    });
  });
  Object.preventExtensions(value);
}

Присваивание такому ключу значения не меняет, а печатает «[Worklets] Tried to modify key `swipe` of an object which has been already passed to a worklet…». В выпускной сборке заморозки нет, и расклад там наш: этот поток видит новый порог, второй — старый. Значение, которое меняют и читают обе стороны, в Reanimated держат не в замыкании, а в shared value — о нём следующая статья. А worklet, объявленный в компоненте, создаётся заново в каждой отрисовке и увозит пропсы и состояние этой отрисовки — тот же снимок, что в статье части IV «Состояние — снимок, а не переменная», только его копия живёт в чужой куче.

Перечислять замыкание руками неудобно и опасно: забытое имя — тот же ReferenceError, только на телефоне и в чужом потоке (первая задача). Поэтому в Reanimated замыкание перечисляет сборка. Функцию помечают строкой "worklet" в начале тела, а Babel-плагин react-native-worklets находит в ней внешние имена и переписывает определение. Вот что он сделал с решением свайпа — настоящий вывод плагина:

jsлистинг · не запускается

const WIDTH = 300;
const isGone = (dx) => {
  "worklet";
  return dx < -WIDTH / 3;
};

const WIDTH = 300;
const isGone = (dx) => {
  "worklet";
  return dx < -WIDTH / 3;
};

вывод · вывод Babel-плагина react-native-worklets 0.10.1, сборка production
const WIDTH = 300;
const _worklet_9180618560978_init_data = {
  code: "function swipeJs1(dx){const{WIDTH}=this.__closure;return dx<-WIDTH/3;}"
};
const isGone = function swipeJs1Factory({
  _worklet_9180618560978_init_data,
  WIDTH
}) {
  const swipeJs1 = function (dx) {
    return dx < -WIDTH / 3;
  };
  swipeJs1.__closure = {
    WIDTH
  };
  swipeJs1.__workletHash = 9180618560978;
  swipeJs1.__initData = _worklet_9180618560978_init_data;
  return swipeJs1;
}({
  _worklet_9180618560978_init_data,
  WIDTH
});

Узнаётся всё. __closure — второй аргумент нашей worklet, только собранный плагином. В __initData.code — текст функции, но не тот, что вернул бы toString: плагин кладёт его в сборку заранее, сжатым, и переписывает так, что внешние имена читаются из this.__closure. Остальное делает второй рантайм, и делает как наш Worker: в valueUnpacker.native.ts он собирает функцию из этого текста через eval (в отладочной сборке — через его варианты evalWithSourceMap и evalWithSourceUrl, чтобы отладчик знал, откуда код) и привязывает её к объекту, где лежит копия замыкания, — отсюда и this. Зачем плагин обязателен и что ещё он делает — следующая статья.

Зачем всё это. В статье про нативный драйвер опыт с занятым JS-потоком дал в предпросмотре одинаковый ответ для обоих прогонов: второго потока не было, и простояло всё. Теперь он есть. Повторим опыт: самую длинную паузу между тиками таймера меряют оба потока, а этот, как только второй откликнется, на 400 мс уходит в тяжёлую работу. longestPause уезжает во второй поток одним текстом — внешних имён у неё нет. Рядом идёт короткий замер на 300 мс: во втором потоке он кончится раньше, чем этот освободится. Прогноз: какие будут паузы и когда этот поток узнает о коротком замере?

rn

// второй поток, sendToWorker и runOnWorker — в подложке примера
declare function sendToWorker(value: unknown): Promise<string>;
declare function runOnWorker<A extends unknown[], R>(fn: (...args: A) => R, ...args: A): Promise<Awaited<R>>;

// тяжёлая работа в этом потоке: разбор большого ответа, рендер длинного списка
function busy(ms: number) {
  const end = Date.now() + ms;
  while (Date.now() < end) {}
}

// самая длинная пауза между тиками таймера; внешних имён нет — хватит одного текста
const longestPause = (ms: number) =>
  new Promise<number>((resolve) => {
    let last = Date.now();
    let longest = 0;
    const id = setInterval(() => {
      longest = Math.max(longest, Date.now() - last);
      last = Date.now();
    }, 10);
    setTimeout(() => {
      clearInterval(id);
      resolve(longest);
    }, ms);
  });

const say = (ms: number) => (ms > 300 ? "больше 300 мс" : "меньше 300 мс");
let freed = false;
runOnWorker(longestPause, 300).then(() =>
  console.log("короткий замер прочитан:", freed ? "после занятости" : "вовремя"),
);
Promise.all([longestPause(800), runOnWorker(longestPause, 800)]).then(([here, there]) => {
  console.log("этот поток: самая длинная пауза", say(here));
  console.log("второй поток: самая длинная пауза", say(there));
});
// занятость начинается, как только второй поток откликнулся: замеры там уже идут
sendToWorker("на месте?").then(() => {
  busy(400);
  freed = true;
});

// второй поток, sendToWorker и runOnWorker — в подложке примера
declare function sendToWorker(value: unknown): Promise<string>;
declare function runOnWorker<A extends unknown[], R>(fn: (...args: A) => R, ...args: A): Promise<Awaited<R>>;

// тяжёлая работа в этом потоке: разбор большого ответа, рендер длинного списка
function busy(ms: number) {
  const end = Date.now() + ms;
  while (Date.now() < end) {}
}

// самая длинная пауза между тиками таймера; внешних имён нет — хватит одного текста
const longestPause = (ms: number) =>
  new Promise<number>((resolve) => {
    let last = Date.now();
    let longest = 0;
    const id = setInterval(() => {
      longest = Math.max(longest, Date.now() - last);
      last = Date.now();
    }, 10);
    setTimeout(() => {
      clearInterval(id);
      resolve(longest);
    }, ms);
  });

const say = (ms: number) => (ms > 300 ? "больше 300 мс" : "меньше 300 мс");
let freed = false;
runOnWorker(longestPause, 300).then(() =>
  console.log("короткий замер прочитан:", freed ? "после занятости" : "вовремя"),
);
Promise.all([longestPause(800), runOnWorker(longestPause, 800)]).then(([here, there]) => {
  console.log("этот поток: самая длинная пауза", say(here));
  console.log("второй поток: самая длинная пауза", say(there));
});
// занятость начинается, как только второй поток откликнулся: замеры там уже идут
sendToWorker("на месте?").then(() => {
  busy(400);
  freed = true;
});

экран примера

Сначала предположите, что выведет код

Разошлись: этот поток простоял больше 300 мс, второй не заметил ничего. Короткий замер показал обратную сторону. Второй поток досчитал его к 300-й миллисекунде, но ответ прочитан, только когда этот поток освободился: сообщение ждёт в очереди получателя, как события onAnimatedValueUpdate ждут слушателей нативной анимации. Всё, что второй поток делает сам, делается вовремя; всё, что он отдаёт этому, ждёт.

Отсюда граница миниатюры. Worker рисовать не умеет: у него нет ни document, ни доступа к экрану, и результат его работы всё равно приходит в поток страницы и ждёт очереди. Строка подхода, которую двигал бы Worker, ехала бы за пальцем не раньше, чем освободится занятый поток. Второй рантайм Reanimated живёт в другом месте — в главном потоке, том самом, который рисует интерфейс и принимает касания. Worklet жеста выполняется там же, где приходят касания, и новый стиль попадает в вид без очереди к JS-потоку; поэтому жест на Reanimated и не проседает. Как именно — следующая статья.

Устройство переезда на телефоне то же: текст функции, копия замыкания, второй рантайм со своей кучей. Отличается всё вокруг.

	Миниатюра: Web Worker	Телефон: react-native-worklets 0.10
Где второй поток	`Worker`: отдельный поток со своей кучей, без экрана	UI-рантайм: второй экземпляр JS-движка в главном потоке, рядом с экраном
Откуда текст функции	`toString()` в момент отправки	`__initData.code`: плагин положил его в сборку
Кто перечисляет замыкание	вы, вторым аргументом `worklet`	Babel-плагин, по директиве `"worklet"`
Копия замыкания	`structuredClone` при первой отправке	перевод в переносимый вид при первой отправке, с кешем; в отладочной сборке объекты замораживаются
Вызов	`runOnWorker(fn, ...args)` — ответ промисом	`scheduleOnUI(fn, ...args)` — без ответа; `runOnUISync` ждёт ответа синхронно
Обычная функция вместо worklet-а	уезжает текстом и падает на первом внешнем имени	в отладочной сборке `scheduleOnUI` бросает «[Worklets] `scheduleOnUI` can only be used with worklets.»
Обратно в JS	ответ сообщением	`scheduleOnRN(fn, ...args)`: вызов встаёт в очередь JS-потока

Последняя оговорка — про веб-версию приложения на Expo. Даже будь Reanimated в предпросмотре, второго потока там не было бы: у react-native-worklets для веба свой файл threads.ts, и его scheduleOnUI выполняет worklet в том же потоке, в ближайшем кадре:

tsлистинг · не запускается

// react-native-worklets 0.10.1, src/threads.ts — файл для веба (с сокращениями)
export function scheduleOnUI<Args extends unknown[], ReturnValue>(
  worklet: (...args: Args) => ReturnValue,
  ...args: Args
): void {
  enqueueUI(worklet, args);
}
// …
function flushUIQueue(): void {
  queueMicrotask(() => {
    const queue = runOnUIQueue;
    runOnUIQueue = [];
    requestAnimationFrameImpl(() => {
      queue.forEach(([workletFunction, workletArgs, jobResolve]) => {
        const result = workletFunction(...workletArgs);
        if (jobResolve) {
          jobResolve(result);
        }
      });
    });
  });
}

// react-native-worklets 0.10.1, src/threads.ts — файл для веба (с сокращениями)
export function scheduleOnUI<Args extends unknown[], ReturnValue>(
  worklet: (...args: Args) => ReturnValue,
  ...args: Args
): void {
  enqueueUI(worklet, args);
}
// …
function flushUIQueue(): void {
  queueMicrotask(() => {
    const queue = runOnUIQueue;
    runOnUIQueue = [];
    requestAnimationFrameImpl(() => {
      queue.forEach(([workletFunction, workletArgs, jobResolve]) => {
        const result = workletFunction(...workletArgs);
        if (jobResolve) {
          jobResolve(result);
        }
      });
    });
  });
}

В вебе worklet — обычная функция, которую вызывают в ближайшем кадре, и копия её замыкания никуда не едет. То, что в этой статье ломалось во втором потоке, веб-версия не покажет, а телефон покажет. Поэтому второй поток здесь браузерный, а worklet-ы проверяют на телефоне.

На телефоне иначе: worklet выполняется во втором JS-рантайме в главном потоке, и попадают туда только текст функции, положенный в сборку плагином, и копия её замыкания. В веб-версии второго рантайма нет: scheduleOnUI вызывает worklet в том же потоке, в ближайшем кадре.

Второй поток, sendToWorker, runOnWorker и worklet — в том виде, в каком они лежат в подложке и едут в следующую статью. В подложке первой задачи рядом с ними — палец и строка подхода из прошлой статьи, которая спрашивает решение отпускания у второго потока.

jsлистинг · не запускается

// Миниатюра статьи — в таком виде она лежит в подложке и едет в следующую статью.
// Второй поток для примеров — настоящий Web Worker. На телефоне Worker нет:
// на его месте второй JS-рантайм react-native-worklets.
// Код потока — текст функции workerMain: внешних имён у неё нет, поэтому
// текста ей хватает — почему это важно, разобрано в разделе «Функция текстом».
function workerMain() {
  onmessage = function (e) {
    var job = e.data;
    var reply = function (ok, value) { postMessage({ id: job.id, ok: ok, value: value }); };
    if (job.kind === "data") return reply(true, JSON.stringify(job.value));
    try {
      // функция приехала текстом, замыкание — копией: имена из замыкания
      // становятся параметрами обёртки, и текст снова видит их значения
      var names = Object.keys(job.closure);
      var make = Function.apply(null, names.concat("return (" + job.code + ");"));
      var fn = make.apply(null, names.map(function (n) { return job.closure[n]; }));
      Promise.resolve(fn.apply(null, job.args)).then(function (v) { reply(true, v); },
        function (err) { reply(false, err.name + ": " + err.message); });
    } catch (err) {
      reply(false, err.name + ": " + err.message);
    }
  };
}
var secondThread = new Worker(URL.createObjectURL(new Blob(["(" + workerMain + ")();"], { type: "text/javascript" })));
var pending = {};
var lastId = 0;
secondThread.onmessage = function (e) {
  var job = pending[e.data.id];
  delete pending[e.data.id];
  if (e.data.ok) job.resolve(e.data.value);
  else job.reject(new Error(e.data.value));
};
// postMessage стоит раньше промиса: то, что не копируется, бросает сразу, в том же такте
function post(message) {
  message.id = ++lastId;
  secondThread.postMessage(message);
  return new Promise(function (resolve, reject) {
    pending[message.id] = { resolve: resolve, reject: reject };
  });
}
// отправить данные: второй поток отвечает тем, что получил
function sendToWorker(value) {
  return post({ kind: "data", value: value });
}
// worklet своими руками: внешние имена функции перечислены явно — эту работу
// в Reanimated делает Babel-плагин
function worklet(fn, closure) {
  fn.__closure = closure;
  return fn;
}
// копия замыкания снимается при первой отправке и дальше не меняется:
// так же react-native-worklets кеширует перевод worklet-а
var snapshots = new WeakMap();
function runOnWorker(fn) {
  var args = Array.prototype.slice.call(arguments, 1);
  if (fn.__closure && !snapshots.has(fn)) snapshots.set(fn, structuredClone(fn.__closure));
  return post({ kind: "run", code: fn.toString(), closure: snapshots.get(fn) || {}, args: args });
}

// Миниатюра статьи — в таком виде она лежит в подложке и едет в следующую статью.
// Второй поток для примеров — настоящий Web Worker. На телефоне Worker нет:
// на его месте второй JS-рантайм react-native-worklets.
// Код потока — текст функции workerMain: внешних имён у неё нет, поэтому
// текста ей хватает — почему это важно, разобрано в разделе «Функция текстом».
function workerMain() {
  onmessage = function (e) {
    var job = e.data;
    var reply = function (ok, value) { postMessage({ id: job.id, ok: ok, value: value }); };
    if (job.kind === "data") return reply(true, JSON.stringify(job.value));
    try {
      // функция приехала текстом, замыкание — копией: имена из замыкания
      // становятся параметрами обёртки, и текст снова видит их значения
      var names = Object.keys(job.closure);
      var make = Function.apply(null, names.concat("return (" + job.code + ");"));
      var fn = make.apply(null, names.map(function (n) { return job.closure[n]; }));
      Promise.resolve(fn.apply(null, job.args)).then(function (v) { reply(true, v); },
        function (err) { reply(false, err.name + ": " + err.message); });
    } catch (err) {
      reply(false, err.name + ": " + err.message);
    }
  };
}
var secondThread = new Worker(URL.createObjectURL(new Blob(["(" + workerMain + ")();"], { type: "text/javascript" })));
var pending = {};
var lastId = 0;
secondThread.onmessage = function (e) {
  var job = pending[e.data.id];
  delete pending[e.data.id];
  if (e.data.ok) job.resolve(e.data.value);
  else job.reject(new Error(e.data.value));
};
// postMessage стоит раньше промиса: то, что не копируется, бросает сразу, в том же такте
function post(message) {
  message.id = ++lastId;
  secondThread.postMessage(message);
  return new Promise(function (resolve, reject) {
    pending[message.id] = { resolve: resolve, reject: reject };
  });
}
// отправить данные: второй поток отвечает тем, что получил
function sendToWorker(value) {
  return post({ kind: "data", value: value });
}
// worklet своими руками: внешние имена функции перечислены явно — эту работу
// в Reanimated делает Babel-плагин
function worklet(fn, closure) {
  fn.__closure = closure;
  return fn;
}
// копия замыкания снимается при первой отправке и дальше не меняется:
// так же react-native-worklets кеширует перевод worklet-а
var snapshots = new WeakMap();
function runOnWorker(fn) {
  var args = Array.prototype.slice.call(arguments, 1);
  if (fn.__closure && !snapshots.has(fn)) snapshots.set(fn, structuredClone(fn.__closure));
  return post({ kind: "run", code: fn.toString(), closure: snapshots.get(fn) || {}, args: args });
}

Потоки не делят память: между ними ходят только сообщения, и структурное клонирование копирует их в момент отправки. Функцию оно не копирует и бросает DataCloneError.
Текст функции (toString) переносится, но несёт имена, а не значения: во втором потоке внешняя переменная даёт ReferenceError. Замыкание осталось в куче того, кто функцию создал.
Замыкание не видно из JavaScript: ни текст, ни свойства функции не называют её внешних переменных. Их находят по исходнику, при сборке, — поэтому worklet-ы делает Babel-плагин: __closure со значениями и __initData.code с текстом.
Копия замыкания снимается однажды: правка после первой отправки до второго потока не доходит. react-native-worklets кеширует перевод и в отладочной сборке замораживает объекты замыкания. Меняющееся передают аргументом, общее — держат в shared value.
Второй поток не ждёт занятого первого, но всё, что он отдаёт обратно, ждёт очереди. Worker рисовать не умеет, а UI-рантайм Reanimated живёт в главном потоке, рядом с экраном. В веб-версии второго рантайма нет: scheduleOnUI вызывает worklet в том же потоке.

1/4Второму потоку отправляют { dx: -120, decide }, где decide — функция. Что будет?

2/4Функцию отправили во второй поток текстом через toString(). Внутри она читает внешнюю константу WIDTH. Что будет при вызове?

3/4Почему worklet-ам нужен плагин сборки, а не одна библиотека?

4/4Worklet прихватил объект limits и уже был отправлен во второй поток. Потом в JS поменяли limits.swipe. Что увидит второй поток при следующем вызове того же worklet-а?

Бросок не удаляет подход

Строка подхода из прошлой статьи теперь спрашивает решение у второго потока: в подложке лежит SwipeRow, чей onPanResponderRelease отдаёт decide, сдвиг dx и скорость vx в runOnWorker и ждёт ответа. Удалять подход нужно не только за длинный свайп, но и за бросок — короткий и быстрый. Сейчас бросок строку возвращает. Почините decide, не трогая Sets.

rn

declare const finger: { down(testID: string): void; move(dx: number, dy: number): void; up(): void };
// в подложке — палец, второй поток и SwipeRow, которая спрашивает решение у второго потока
declare function worklet<F extends Function>(fn: F, closure: Record<string, unknown>): F;
interface SwipeRowProps {
  title: string;
  decide(dx: number, vx: number): boolean;
  onDelete(): void;
}
declare function SwipeRow(props: SwipeRowProps): React.ReactNode;
const { View } = ReactNative;

const WIDTH = 300;
// бросок: палец быстрее 0.5 точки за миллисекунду
const FLING = 0.5;
// ваш код: второй поток должен решать так же, как решил бы этот
const decide = worklet((dx: number, vx: number) => dx < -WIDTH / 3 || vx < -FLING, { WIDTH });

function Sets() {
  const [sets, setSets] = React.useState(["80 кг × 8", "82,5 кг × 6", "85 кг × 5"]);
  console.log("подходы:", sets.join(" | "));
  return (
    <View style={{ gap: 4 }}>
      {sets.map((s) => (
        <SwipeRow key={s} title={s} decide={decide} onDelete={() => setSets((prev) => prev.filter((t) => t !== s))} />
      ))}
    </View>
  );
}

mount(<Sets />);
// короткий, но быстрый свайп: 40 точек за 50 мс
setTimeout(() => finger.down("80 кг × 8"), 100);
setTimeout(() => finger.move(-20, 0), 150);
setTimeout(() => finger.move(-60, 0), 200);
setTimeout(() => finger.up(), 250);
// сейчас бросок возвращает строку, а должен удалить подход

declare const finger: { down(testID: string): void; move(dx: number, dy: number): void; up(): void };
// в подложке — палец, второй поток и SwipeRow, которая спрашивает решение у второго потока
declare function worklet<F extends Function>(fn: F, closure: Record<string, unknown>): F;
interface SwipeRowProps {
  title: string;
  decide(dx: number, vx: number): boolean;
  onDelete(): void;
}
declare function SwipeRow(props: SwipeRowProps): React.ReactNode;
const { View } = ReactNative;

const WIDTH = 300;
// бросок: палец быстрее 0.5 точки за миллисекунду
const FLING = 0.5;
// ваш код: второй поток должен решать так же, как решил бы этот
const decide = worklet((dx: number, vx: number) => dx < -WIDTH / 3 || vx < -FLING, { WIDTH });

mount(<Sets />);
// короткий, но быстрый свайп: 40 точек за 50 мс
setTimeout(() => finger.down("80 кг × 8"), 100);
setTimeout(() => finger.move(-20, 0), 150);
setTimeout(() => finger.move(-60, 0), 200);
setTimeout(() => finger.up(), 250);
// сейчас бросок возвращает строку, а должен удалить подход

экран примера

Сначала предположите, что выведет код

Второй поток сказал прямо: FLING в замыкании нет. Перечислить нужно все внешние имена, которые встречаются в теле:

tsлистинг · не запускается

const decide = worklet((dx: number, vx: number) => dx < -WIDTH / 3 || vx < -FLING, { WIDTH, FLING });

const decide = worklet((dx: number, vx: number) => dx < -WIDTH / 3 || vx < -FLING, { WIDTH, FLING });

Теперь бросок удаляет подход: второй строкой приходит подходы: 82,5 кг × 6 | 85 кг × 5. Заметьте, что длинный свайп удалял и со сломанным замыканием: на нём dx < -WIDTH / 3 истинно, и || до FLING не доходит. Забытое имя прячется в ветке, до которой не дошло, и падает в первый раз, когда до неё дойдут, — на телефоне это будет чужой поток и чей-то палец. Плагин react-native-worklets так не ошибается: он собирает внешние имена из всего тела, в том числе из веток, которые ещё ни разу не выполнялись. И ещё одна разница: наша строка ждёт ответа сообщением, а в Reanimated весь жест выполняется во втором рантайме и решает сам, без поездки туда и обратно.

Порог из настроек

Порог свайпа лежит в настройках. Его подняли до 200 точек, но второй поток по-прежнему удаляет подход на 150. Сделайте так, чтобы второй поток решал по текущему порогу. settings и scenario не трогайте.

rn

// второй поток, runOnWorker и worklet — в подложке примера
declare function runOnWorker<A extends unknown[], R>(fn: (...args: A) => R, ...args: A): Promise<Awaited<R>>;
declare function worklet<F extends Function>(fn: F, closure: Record<string, unknown>): F;

const settings = { swipe: 100 };
// ваш код: второй поток должен решать по текущему порогу, а не по первому
const decide = worklet((dx: number) => (dx < -settings.swipe ? "удаляем" : "назад"), { settings });

async function release(dx: number) {
  const verdict = await runOnWorker(decide, dx);
  console.log("порог " + settings.swipe + ", свайп " + dx + ":", verdict);
}

async function scenario() {
  await release(-150);
  // в настройках порог подняли
  settings.swipe = 200;
  // сейчас здесь «удаляем», а нужно «назад»
  await release(-150);
}
scenario();

экран примера

Сначала предположите, что выведет код

Замыкание копируется один раз, при первой отправке, а аргументы — при каждом вызове. Всё, что меняется между вызовами, передают аргументом:

tsлистинг · не запускается

// порог — аргумент: аргументы копируются на каждом вызове, замыкание — однажды
const decide = worklet((dx: number, swipe: number) => (dx < -swipe ? "удаляем" : "назад"), {});

async function release(dx: number) {
  const verdict = await runOnWorker(decide, dx, settings.swipe);
  console.log("порог " + settings.swipe + ", свайп " + dx + ":", verdict);
}

// порог — аргумент: аргументы копируются на каждом вызове, замыкание — однажды
const decide = worklet((dx: number, swipe: number) => (dx < -swipe ? "удаляем" : "назад"), {});

async function release(dx: number) {
  const verdict = await runOnWorker(decide, dx, settings.swipe);
  console.log("порог " + settings.swipe + ", свайп " + dx + ":", verdict);
}

Второй раз приходит порог 200, свайп -150: назад. Работает и другой путь — после правки создать новый worklet: это новый объект, и копия его замыкания снимется заново. В компоненте так и выходит само собой: worklet, объявленный в теле, создаётся в каждой отрисовке. Но если значение читают во втором потоке каждый кадр, а меняют в JS когда угодно, ни аргумент, ни пересоздание не годятся — для этого в Reanimated есть shared value, о нём следующая статья.

Счёт удалённых не растёт

Worklet отпускания считает удалённые подходы в объекте stats из замыкания. Три свайпа, два из них удаляют, а счёт скачет между единицей и нулём, и в этом потоке остаётся ноль. Сделайте так, чтобы счёт рос: 1, 1, 2 — и 2 в этом потоке. scenario можно менять.

rn

// второй поток, runOnWorker и worklet — в подложке примера
declare function runOnWorker<A extends unknown[], R>(fn: (...args: A) => R, ...args: A): Promise<Awaited<R>>;
declare function worklet<F extends Function>(fn: F, closure: Record<string, unknown>): F;

const stats = { deleted: 0 };
// ваш код: счёт удалённых подходов должен расти
const onRelease = worklet(
  (dx: number) => {
    if (dx < -100) stats.deleted += 1;
    return stats.deleted;
  },
  { stats },
);

async function scenario() {
  for (const dx of [-150, -40, -180]) {
    console.log("свайп " + dx + ", удалено:", await runOnWorker(onRelease, dx));
  }
  console.log("в этом потоке удалено:", stats.deleted);
}
scenario();
// сейчас 1, 0, 1 и 0, а нужно 1, 1, 2 и 2

экран примера

Сначала предположите, что выведет код

Каждый вызов получает во втором потоке свою копию stats: прибавленное к ней живёт, пока идёт вызов, и обратно не возвращается. У счёта должен быть один хозяин, и хозяин — тот поток, где счёт читают. Второй поток пусть только решает:

tsлистинг · не запускается

const isGone = worklet((dx: number) => dx < -100, {});

async function scenario() {
  for (const dx of [-150, -40, -180]) {
    // решает второй поток, считает хозяин данных
    if (await runOnWorker(isGone, dx)) stats.deleted += 1;
    console.log("свайп " + dx + ", удалено:", stats.deleted);
  }
  console.log("в этом потоке удалено:", stats.deleted);
}

const isGone = worklet((dx: number) => dx < -100, {});

async function scenario() {
  for (const dx of [-150, -40, -180]) {
    // решает второй поток, считает хозяин данных
    if (await runOnWorker(isGone, dx)) stats.deleted += 1;
    console.log("свайп " + dx + ", удалено:", stats.deleted);
  }
  console.log("в этом потоке удалено:", stats.deleted);
}

Вывод: 1, 1, 2 и 2. Это то же правило, что у нативного драйвера, — у значения один хозяин кадров. В Reanimated изменение, сделанное worklet-ом, в JS само тоже не вернётся: результат отправляют явно через scheduleOnRN(функция, ...аргументы), и вызов встаёт в очередь JS-потока. А значение, которое по-настоящему нужно обеим сторонам, держат в shared value.

Worklet: функция, уехавшая в другой поток

Видеоразбор темы за 5–7 минут

Между потоками ходят только данныеWeb Worker, копия в момент отправки и функция, которую не скопировать

Функция текстом: код доехал, окружение нетtoString, пересборка во втором потоке и ReferenceError

Свой worklet: замыкание перечислено рукамиКопия замыкания, снятая однажды, и что делает плагин сборки

Второй поток не ждёт первогоОпыт с занятым потоком, который наконец расходится

Что на телефоне иначеВторой рантайм в главном потоке, текст из сборки и веб-версия без второго потока

Итогошпаргалка по теме

Проверьте себявопросы по теме

Задачизадачи с решениями

Бросок не удаляет подход

Порог из настроек

Счёт удалённых не растёт