Методът sort() сортира елементите на масив на място и връща препратката към същия масив, вече сортиран. Можем също да посочим функция за сравнение, с която се прилага методът за сортиране. — https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Но стабилна ли е функцията за сортиране на React Native? Нека го тестваме.

Казваме, че сортирането е стабилно, ако запазва реда на елементите, които имат еднакви стойности за сравнение. Като прилагаме функцията за сортиране с index като ключ за сортиране с възходящо до масив като

const list = [
  {
    name: 'name-1',
    index: 2,
  },
  {
    name: 'name-2',
    index: 0,
  },
  {
    name: 'name-3',
    index: 1,
  },
  {
    name: 'name-4',
    index: 0,
  },
  {
    name: 'name-5',
    index: 0,
  },
  {
    name: 'name-6',
    index: 0,
  },
  {
    name: 'name-7',
    index: 0,
  },
];

и вземете изхода като

const list = [
  {
    name: 'name-2',
    index: 0,
  },
  {
    name: 'name-4',
    index: 0,
  },
  {
    name: 'name-5',
    index: 0,
  },
  {
    name: 'name-6',
    index: 0,
  },
  {
    name: 'name-7',
    index: 0,
  },
  {
    name: 'name-3',
    index: 1,
  },
  {
    name: 'name-1',
    index: 2,
  },
];

тогава казваме, че този метод за сортиране е стабилен, защото запазва реда на елемента name-2, name-4, name-5, name-6, name-7, които имат същия ключ за сортиране, както са

Напротив, сортирането е нестабилно, ако може да наруши реда на елементи с един и същ ключ за сортиране. Не се казва, че ще наруши реда за всички възможни входове, но ако има поне един вход, който нарушава реда, той е нестабилен.

И тогава нека тестваме дали е стабилен на React Native?

Можем да създадем примерен проект според инструкцията (https://reactnative.dev/) или да следваме урока (https://kxie0124.medium.com/implementing-a-sticky-banner-with-animations- in-react-native-df5f619a6bb8).

И добавете следния код в App.tsx, точно над израза return

const list = [
  {
    name: 'name-1',
    index: 2,
  },
  {
    name: 'name-2',
    index: 0,
  },
  {
    name: 'name-3',
    index: 1,
  },
  {
    name: 'name-4',
    index: 0,
  },
  {
    name: 'name-5',
    index: 0,
  },
  {
    name: 'name-6',
    index: 0,
  },
  {
    name: 'name-7',
    index: 0,
  },
];

console.log(list.map(item => item.name));
const sortedList = list.sort((a, b) => a.index - b.index)
console.log(sortedList.map(item => item.name));

И тогава можем да стартираме приложението с командния ред

yarn run android

or

yarn run ios

на две платформи.

И трябва да видим дневника на входния масив и сортирания масив в терминала, който изпълнява метро сървъра

LOG  ["name-1", "name-2", "name-3", "name-4", "name-5", "name-6", "name-7"]
LOG  ["name-2", "name-4", "name-5", "name-6", "name-7", "name-3", "name-1"]

Така че очевидно е стабилен, защото редът на name-2, name-4, name-5, name-6, name-7 се запазва.

Но също така каза

От версия 10 (или EcmaScript 2019), спецификацията диктува, че Array.prototype.sort е стабилен. Преди версия 10 (или EcmaScript 2019), стабилността на сортирането не беше гарантирана — https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Но стабилен ли е на по-стари версии на React Native? Нека го тестваме.

Първо можем да проверим React Native версията от package.json, след което можем да открием, че React Native версията на този проект е 0.69.4, последната версия досега.

Нека създадем друг проект с по-стара версия на React Native, като 0.64. Можем да изпълним следната команда, за да създадем проект с конкретна версия на React Native

npx react-native init sorting --template [email protected]

Можем да намерим таблицата на адрес https://www.npmjs.com/package/react-native-template-typescript

И след това създаваме приложението със същата модификация и го стартираме, ще открием, че функцията за сортиране също е стабилна.

Така че можем да направим просто заключение, че функцията за сортиране е стабилна с JS машина по подразбиране, защото всички знаем, че JS кодът работи на JS машина на React Native.

Но какво ще кажете за друг JS двигател, като Hermes. Всички знаем, че двигателят Hermes има по-добра производителност, но с известна цена.

Добре. Нека активираме двигателя на Hermes като https://reactnative.dev/docs/hermes

И възстановете и стартирайте приложението отново, ще го намерим отпечатано

LOG  ["name-1", "name-2", "name-3", "name-4", "name-5", "name-6", "name-7"]
LOG  ["name-4", "name-5", "name-6", "name-7", "name-2", "name-3", "name-1"]

Редът на елементите с еднакъв ключ за сортиране се променя. Това не е стабилно сортиране.

Така че очевидно е проблемът с двигателя на Hermes.

Какво ще кажете за друга версия на двигателя на Hermes. Но за съжаление, версията на двигателя на Hermes е в комплект с версията на React Native като https://github.com/facebook/hermes/releases

Така че първо трябва да надстроим React Native с команда

npx react-native upgrade x.xx.x

Можем да намерим версии на React Native на адрес https://github.com/facebook/react-native/releases

След като тествахме няколко версии, щяхме да открием, че Hermes 0.11 на React Native 0.69.4 коригира този проблем с нестабилното сортиране.

Всъщност този проблем също е разгледан на https://github.com/facebook/hermes/issues/212.

Така че случаят е приключен.