Порядок вызова useEffect - PullRequest
Новая
       0

Порядок вызова useEffect

2 голосов
/ 07 мая 2020

При использовании множественного использования Эффекты существуют и в каком порядке они вызываются?

Рассмотрим следующий код 

import React from "react";

export default function App() {
  const [x, setX] = React.useState(2);

  React.useEffect(() => {
    console.log("A");
    setX(1);
  }, []);
  React.useEffect(() => {
    console.log("B");
    console.log(x);
  }, []);

  return (
    <div className="App">
      <h1>Hello {x}</h1>
    </div>
  );
}

Вывод консоли: 

A
B
2

Почему x равно 2, а не 1?

Ответы [ 2 ]

0 голосов
/ 07 мая 2020

useEffect вызываются в том порядке, в котором они записаны в коде, и в зависимости от того, какая зависимость useEffect приводит к его выполнению

Также обновления состояния являются асинхронными c и и любое использование setX или других средств обновления состояния будет обновлено только после завершения всех выполнений useEffects , поэтому console.log(x) показывает 2 вместо 1

0 голосов
/ 07 мая 2020

Initial useEffect вызывается в том порядке, в котором они появляются в вашем коде. Например: 

useEffect(() => {
    console.log('useEffect-1')
}, [])
useEffect(() => {
    console.log('useEffect-2')
}, [])
useEffect(() => {
    console.log('useEffect-3')
}, [])

Вывод: 

useEffect-1
useEffect-2
useEffect-3

Однако дальнейшие вызовы будут зависеть от того, какая переменная обновляется

...