Случайный массив генерируется так часто из-за того, что генерация происходит каждый раз при обращении к ranomdArr, т.к. это функция, а не переменная/константна. Т.е. в функции score, которая вызывается как раз кликом:
это происходит часто(8 генерация за клик)
function score() {
console.log(ranomdArr()); //<b>Генерация нового массива</b>
let iter = '0';
for(let i=0; i<refCopy.current.children.length; i++) {
if(refCopy.current.children[i].innerText === ranomdArr()[i]) { //<b>Генерация нового массива в цикле</b>
iter++;
}
}
Первое же, что приходит в голову вынести переменную и отдельно функцию генерации ее значения из компоненты
Block. Как быстрое решение можно разместить просто над компонентой:
Как может выглядеть код
....
import { View, Text, Button } from "react-native";
const generateRandomArray = function () {
let array = ["faith", "hope", "love", "gratitude", "patience", "mercy"];
var currentIndex = array.length, temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
};
let ranomdArr = generateRandomArray();
function Block() {
const [fetus, setFetus] = useState(["0", "1", "2", "3", "4", "5"]);
let refCopy = React.createRef();
let refOut = React.createRef();.
.....
Функция генерации и сама переменная доступны в компоненте. Массив сгенерируется единожды при запуске приложения и загрузке этой компоненты. Если нам необходимо, то мы можем сгенерировать новый случайный массив и изменить значение
ranomdArr.
Так мы решим проблему с частой генерацией - генерировать мы сможем когда нам удобно.
НО такое решение считается анти паттерном и нарушает основную идею функциональных компонент - делать их "чистыми", предсказуемыми, когда результат выполнения функции выводящей компоненту зависит только от входных параметров, а не от переменных снаружи нее.
Обобщить логику кода и тем самым вынести его из кода компоненты
- Функция генерирующая случайный массив могла получать любой массив в качестве параметра - таким образом мы сделаем "чистой" и сможем вынести в отдельный файл
- Массив на основе которого мы генерируем новый случайный массив никогда не меняется - значит он константа в контексте приложения(ничто его не изменит), но он нужен только в этой компоненте. В таких случаях допустимо размещать инициализацию константы снаружи компоненты. Примером таких констант еще могу выступить столбцы для компоненты таблицы.
- Сгенерированный случайный массив можно хранить в компоненте, но надо чтобы он был неизменяемый при ререндере. Для этого используем хук useRef. При каждом рендере нам будет возвращаться то значение, которое было до него. Получать/изменять значение можем через current - "toggled.current = !toggled.current".
Так у нас будет возможность сгенерировать новый случайный массив в любое необходимое нам время. Кода в файле компонента станет меньше, что приближает к "чистому" коду.
