Kullanım Etkisi kancası içinde durumu ayarlayabilir miyim

Question 1

Diyelim ki başka bir duruma bağlı olan bir durumum var (örneğin, A değiştiğinde B'nin değiştirmesini istiyorum).

Etkili kancanın içinde A'yı gözlemleyen ve B'yi ayarlayan bir kanca oluşturmak uygun mudur?

Efektler, düğmeye tıkladığımda ilk efekt patlayacak ve b'nin değişmesine neden olacak ve bir sonraki işlemeden önce ikinci efektin ateşlenmesine neden olacak mı? Böyle bir kod yapılandırmanın herhangi bir performans olumsuz yanı var mı?

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>
  )
}

Question 2

Bir efektin içinde setState ayarlasanız bile, efektler her zaman oluşturma aşaması tamamlandıktan sonra yürütülür, başka bir efekt güncellenmiş durumu okuyacak ve yalnızca oluşturma aşamasından sonra üzerinde işlem yapacaktır.

bBaşka nedenlerden dolayı değişebilecek bir olasılık olmadığı sürece her iki eylemi de aynı etkide gerçekleştirmenin muhtemelen daha iyi olduğunu söyleyerek , changing abu durumda da aynı mantığı yürütmek isteyeceksiniz.

Question 3

Genel olarak, setStateiçini kullanmak useEffect, büyük olasılıkla neden olmak istemeyeceğiniz sonsuz bir döngü oluşturacaktır. Bu kuralın daha sonra gireceğim birkaç istisna var.

useEffecther işlemeden sonra çağrılır ve setStateiçinde kullanıldığında, bileşenin yeniden oluşturulmasına neden olur, bu da çağırır useEffectvb.

useStateİçini kullanmanın useEffectsonsuz bir döngüye neden olmayacağı popüler durumlardan biri, useEffectbeğenmek için ikinci bir argüman olarak boş bir dizi ilettiğinizde useEffect(() => {....}, []), efekt işlevinin bir kez çağrılması gerektiği anlamına gelir: yalnızca ilk bağlama / oluşturmadan sonra. Bu, bir bileşende veri getirirken ve istek verilerini bileşenin durumunda kaydetmek istediğinizde yaygın olarak kullanılır.

Question 4

Gelecekteki amaçlar için bu da yardımcı olabilir:

SetState'i kullanmakta bir sakınca yok, useEffectsadece bir döngü oluşturmamak için zaten açıklandığı gibi dikkat etmeniz gerekiyor.

Ancak ortaya çıkabilecek tek sorun bu değil. Aşağıya bakınız:

Ebeveynden alan ve durumunu ayarlamak istediğiniz bir değişikliğe göre bir bileşeniniz Compolduğunu hayal edin . Bazı nedenlerden dolayı, her bir pervane için farklı bir değişiklik yapmanız gerekir :propspropsCompuseEffect

BUNU YAPMA

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

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

Bu örnekte görebileceğiniz gibi a'nın durumunu asla değiştirmeyebilir: https://codesandbox.io/s/confident-lederberg-dtx7w

Çünkü bu, bu örnekte gerçekleşmesi nedeni bu kadar hem useEffects aynı çalıştırmak döngüsü tepki hem değiştirdiğinizde prop.ave prop.bdeğeri böylece {...state}bunu yaptığında setStatetam ikisinde de aynıdır useEffect, aynı bağlamda çünkü. İkinciyi çalıştırdığınızda setState, ilkinin yerini alacaktır setState.

BUNU YERİNE YAPIN

Bu sorunun çözümü temelde şöyle adlandırılır setState:

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

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

Çözümü buradan kontrol edin: https://codesandbox.io/s/mutable-surf-nynlx

Artık setState. İle devam ettiğinizde her zaman eyaletin en güncel ve doğru değerini alırsınız .

Umarım bu birine yardımcı olur!

Question 5

useEffectbelirli bir pervane veya duruma bağlanabilir. bu nedenle, sonsuz döngü kancasından kaçınmak için yapmanız gereken şey, bazı değişkenleri veya durumları etkilemektir.

Örneğin:

useEffect(myeffectCallback, [])

Yukarıdaki efekt, yalnızca bileşen oluşturulduktan sonra tetiklenir. bu componentDidMountyaşam döngüsüne benzer

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

Yukarıdaki etki yalnızca benim durumumda ateşlenecek, buna benzer, componentDidUpdateancak değişen her durum onu ateşlemeyecek.

Bu bağlantıya rağmen daha fazla ayrıntı okuyabilirsiniz

Question 6

▶ 1. Kullanım Etkisi kancası içinde durumu ayarlayabilir miyim?

Prensip olarak, içinde useEffectve hatta işleme sırasında bile, ihtiyacınız olan yerde durumu özgürce ayarlayabilirsiniz . Hook'u depsdoğru bir şekilde ayarlayarak ve / veya koşullu olarak sonsuz döngülerden kaçındığınızdan emin olun .

▶ 2. Başka bir duruma bağlı olan bir durumum olduğunu varsayalım. Etkili kancanın içinde A'yı gözlemleyen ve B'yi ayarlayan bir kanca oluşturmak uygun mudur?

Sadece açıklanan klasik kullanım örneğini için :useReducer

useReducergenellikle tercih edilir useStateEğer varsa karmaşık hal içerir mantığı birden çok alt değer veya bir sonraki devlet öncekine bağlıdır zaman. ( Tepki belgeleri )

Bir ayarlarken devlet değişkeni bağlıdır bugünkü değerinden başka devlet değişkeni, sen hem bunların yerine denemek isteyebilirsiniz useReducer. [...] Kendinizi yazarken bulduğunuzda setSomething(something => ...), bunun yerine bir azaltıcı kullanmayı düşünmenin tam zamanı. ( Dan Abramov, Aşırı tepki blog )

Kod parçacığını göster

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>

Snippet'i genişlet

▶ 3. Efektler, düğmeye tıkladığımda ilk efekt yanacak ve b'nin değişmesine neden olacak ve bir sonraki işlemeden önce ikinci efektin ateşlenmesine neden olacak mı?

useEffecther zaman işleme tamamlandıktan ve DOM değişiklikleri uygulandıktan sonra çalışır . İlk efekt tetiklenir, değişir bve yeniden oluşturmaya neden olur. Bu oluşturma tamamlandıktan sonra, bdeğişiklikler nedeniyle ikinci efekt çalışacaktır .

Kod parçacığını göster

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>

Snippet'i genişlet

▶ 4. Böyle bir kod yapılandırmanın performans açısından olumsuz yanları var mı?

Evet. Bir durum değişikliğini sarma ile bayrı bir useEffectiçin abu etkiler potansiyel olarak kullanıcı için görebilir -, tarayıcı ek düzen / boya faza sahiptir. useReducerDenemek istemenin bir yolu yoksa , bdurumu adoğrudan şu şekilde değiştirebilirsin :

Kod parçacığını göster

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>

Snippet'i genişlet