ReactJS 17.0.2, кажется, снова вызывает функцию при помещении значения в DOM
При запуске ReactJS 17.0.2 наблюдается странное поведение.
У меня есть функция, которая генерирует случайное число вне компонента. Я присваиваю возвращаемое значение этой функции константе внутри компонента, а затем console.info и отображаю в DOM. Странно, что они разные. Этого эффекта нет в ReactJS 18.0 и выше, но я все же хочу понять, что здесь происходит.
const randomNum = () => {
return 0.5 - Math.random() * 100;
};
export default function App() {
const randN = randomNum();
console.info(randN);
return (
<div className = "App">
<p>Random number is: {randN}</p>
</div>
);
}
Я бы ожидал, что console.info и DOM будут показывать одинаковые значения, но это не так.
Вот песочница, который показывает это поведение.
Но console.info и отображение в dom происходит при всех повторных рендерах. И на одном и том же рендере значения разные.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
<StrictMode> преднамеренно рендерит компонент дважды, а версия реакции, которую вы используете, также тайно перезаписывает console.info во время второго рендеринга, чтобы отключить второй журнал. Итак, вы видите лог из первого рендера и значение из второго рендера.
Чтобы увидеть второй оператор журнала, который будет соответствовать тому, что находится в доме, вы можете сделать это:
import "./styles.css";
const randomNum = () => {
return 0.5 - Math.random() * 100;
};
const log = console.info;
export default function App() {
const randN = randomNum();
log(randN);
return (
<div className = "App">
<p>Random number is: {randN}</p>
</div>
);
}
Более поздние версии React больше не связываются с console.info, так как это вызывало путаницу, подобную вашей.
Моя путаница теперь ушла;) Спасибо за объяснение
Стоит отметить, что это происходит только в процессе разработки. Как только вы создадите свое приложение для производства, эта проблема исчезнет.
Если вы хотите сохранить стабильную ссылку, сохраните ее как состояние.