Чи можу я встановити стан всередині useEffect гачка

Скажімо, у мене є якийсь стан, який залежить від якогось іншого стану (наприклад, коли A змінюється, я хочу, щоб B змінився).

Чи доречно створити гачок, який спостерігає за А та встановлює В всередині гачка useEffect?

Чи ефекти каскадуватимуться так, що коли я натисну кнопку, перший ефект спрацює, що призведе до зміни b, спричиняючи спрацювання другого ефекту, до наступного відтворення? Чи є якісь недоліки в структуруванні подібного коду?

let MyComponent = props => {
  let [a, setA] = useState(1)
  let [b, setB] = useState(2)
  useEffect(
    () => {
      if (/*some stuff is true*/) {
        setB(3)
      }
    },
    [a],
  )
  useEffect(
    () => {
      // do some stuff
    },
    [b],
  )

  return (
    <button
      onClick={() => {
        setA(5)
      }}
    >
      click me
    </button>
  )
}

Ефекти завжди виконуються після завершення фази візуалізації, навіть якщо ви встановили State всередині одного ефекту, інший ефект буде зчитувати оновлений стан і вживати дії щодо нього лише після фази візуалізації.

Сказавши, що, ймовірно, краще вживати обидві дії з однаковим ефектом, якщо не існує ймовірності, яка bможе змінитися через інші причини, ніж changing aу цьому випадку ви також хочете виконати одну і ту ж логіку

Взагалі кажучи, використання setStateвсередині useEffectстворить нескінченний цикл, який, швидше за все, ви не хочете викликати. Є кілька винятків із цього правила, до яких я розгляну пізніше.

useEffectвикликається після кожного візуалізації, і коли setStateвикористовується всередині нього, це призведе до повторного відтворення компонента, який буде викликати useEffectтощо, тощо.

Одним з популярних випадків , що використання useStateвсередині useEffectне викличе нескінченний цикл, коли ви передаєте порожній масив в якості другого аргументу , useEffectяк useEffect(() => {....}, [])це означає , що функція ефекту повинна викликатися один раз: після першого монтування / тільки робить. Це широко використовується, коли ви виконуєте отримання даних у компоненті, і ви хочете зберегти дані запиту у стані компонента.

Для майбутніх цілей це також може допомогти:

Це нормально використовувати setState, useEffectвам просто потрібно приділити увагу, як вже було описано, щоб не створювати цикл.

Але це не єдина проблема, яка може виникнути. Дивись нижче:

Уявіть, що у вас є компонент, Compякий отримує propsвід батьків, і відповідно до propsзмін ви хочете встановити Compстан. З якоїсь причини вам потрібно змінити для кожного реквізиту інший useEffect:

НЕ РОБИ ЦЬОГО

useEffect(() => {
  setState({ ...state, a: props.a });
}, [props.a]);

useEffect(() => {
  setState({ ...state, b: props.b });
}, [props.b]);

Це може ніколи не змінити стан a, як ви можете бачити в цьому прикладі: https://codesandbox.io/s/confident-lederberg-dtx7w

Причина, чому це трапляється в цьому прикладі, полягає в тому, що обидва useEffects працюють в одному і тому ж циклі реакції, коли ви змінюєте обидва, prop.aі prop.bтому значення, {...state}коли ви це робите setState, абсолютно однакове в обох, useEffectоскільки вони перебувають в одному контексті. Коли ви запускаєте другийsetState він замінить перший setState.

Зробіть це замість цього

Рішення цієї проблеми в основному називається setStateтак:

useEffect(() => {
  setState(state => ({ ...state, a: props.a }));
}, [props.a]);

useEffect(() => {
  setState(state => ({ ...state, b: props.b }));
}, [props.b]);

Перевірте рішення тут: https://codesandbox.io/s/mutable-surf-nynlx

Тепер ви завжди отримуєте найбільш оновлене і правильне значення стану, коли продовжуєте setState.

Сподіваюся, це комусь допоможе!

useEffectможе підключити певний реквізит або стан. Отже, все, що вам потрібно зробити, щоб уникнути нескінченного гачка петлі, це прив’язка якоїсь змінної чи стану до ефекту

Наприклад:

useEffect(myeffectCallback, [])

ефект вище буде спрацьовувати лише після того, як компонент відтвориться. це схоже на componentDidMountжиттєвий цикл

const [something, setSomething] = withState(0)
const [myState, setMyState] = withState(0)
useEffect(() => {
  setSomething(0)
}, myState)

вищевказаний ефект спрацьовує лише в моєму стані, це змінилося, подібне до componentDidUpdateтого, що не кожен стан, який змінюється, його буде запускати.

Ви можете прочитати докладніше за цим посиланням

▶ 1. Чи можу я встановити стан всередині гачка useEffect?

В принципі, ви можете вільно встановлювати стан там, де вам це потрібно - в тому числі всередині useEffectі навіть під час візуалізації . Просто не забудьте уникнути нескінченних циклів, depsправильно встановивши Хук та / або умовно.

▶ 2. Скажімо, у мене є якийсь стан, який залежить від якогось іншого стану. Чи доречно створити гачок, який спостерігає за А та встановлює В всередині гачка useEffect?

Ви тільки що описав в класичний випадок використання для useReducer:

useReducerзазвичай переважніше, useStateколи у вас є складна логіка стану, яка включає кілька підзначень, або коли наступний стан залежить від попереднього. ( React docs )

Коли встановлення змінної стану залежить від поточного значення іншої змінної стану , ви можете спробувати замінити їх обидва на useReducer. [...] Коли ви виявляєте, що пишете setSomething(something => ...) , настав час подумати про використання замість цього редуктора. ( Ден Абрамов, блог, що перереагував )

let MyComponent = () => {
  let [state, dispatch] = useReducer(reducer, { a: 1, b: 2 });

  useEffect(() => {
    console.log("Some effect with B");
  }, [state.b]);

  return (
    <div>
      <p>A: {state.a}, B: {state.b}</p>
      <button onClick={() => dispatch({ type: "SET_A", payload: 5 })}>
        Set A to 5 and Check B
      </button>
      <button onClick={() => dispatch({ type: "INCREMENT_B" })}>
        Increment B
      </button>
    </div>
  );
};

// B depends on A. If B >= A, then reset B to 1.
function reducer(state, { type, payload }) {
  const someCondition = state.b >= state.a;

  if (type === "SET_A")
    return someCondition ? { a: payload, b: 1 } : { ...state, a: payload };
  else if (type === "INCREMENT_B") return { ...state, b: state.b + 1 };
  return state;
}

ReactDOM.render(<MyComponent />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<div id="root"></div>
<script>var { useReducer, useEffect } = React</script>

▶ 3. Чи ефекти каскадуватимуться так, що коли я натисну кнопку, перший ефект спрацює, що призведе до зміни b, спричиняючи спрацювання другого ефекту, до наступного відтворення?

useEffectзавжди запускається після завершення візуалізації та застосування змін DOM. Перший ефект спрацьовує, змінюється bта викликає рендеринг. Після завершення цього візуалізації другий ефект буде діяти через bзміни.

let MyComponent = props => {
  console.log("render");
  let [a, setA] = useState(1);
  let [b, setB] = useState(2);

  let isFirstRender = useRef(true);

  useEffect(() => {
    console.log("useEffect a, value:", a);
    if (isFirstRender.current) isFirstRender.current = false;
    else setB(3);
    return () => {
      console.log("unmount useEffect a, value:", a);
    };
  }, [a]);
  useEffect(() => {
    console.log("useEffect b, value:", b);
    return () => {
      console.log("unmount useEffect b, value:", b);
    };
  }, [b]);

  return (
    <div>
      <p>a: {a}, b: {b}</p>
      <button
        onClick={() => {
          console.log("Clicked!");
          setA(5);
        }}
      >
        click me
      </button>
    </div>
  );
};

ReactDOM.render(<MyComponent />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

▶ 4. Чи є такі мінуси у продуктивності такого кодування структури?

Так. Обертаючи зміну стану bв окрему useEffectдля a, браузер має додаткову фазу макета / розфарбовування - ці ефекти потенційно можуть бути видимі для користувача. Якщо немає можливості useReducerспробувати, ви можете змінити bстан разом із a:

let MyComponent = () => {
  console.log("render");
  let [a, setA] = useState(1);
  let [b, setB] = useState(2);

  useEffect(() => {
    console.log("useEffect b, value:", b);
    return () => {
      console.log("unmount useEffect b, value:", b);
    };
  }, [b]);

  const handleClick = () => {
    console.log("Clicked!");
    setA(5);
    b >= 5 ? setB(1) : setB(b + 1);
  };

  return (
    <div>
      <p>
        a: {a}, b: {b}
      </p>
      <button onClick={handleClick}>click me</button>
    </div>
  );
};

ReactDOM.render(<MyComponent />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>