第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

React：如何避免使用始終返回相同值但更改其內(nèi)部狀態(tài)的鉤子重新渲染組件

React：如何避免使用始終返回相同值但更改其內(nèi)部狀態(tài)的鉤子重新渲染組件

慕村225694 2023-07-20 16:38:22
想象一下這個(gè)鉤子每秒都會(huì)改變他的值，如果隨機(jī)值是 5 的倍數(shù)則返回 true，否則返回 false。我該怎么做才能停止每秒重新渲染？PS：我嘗試使用 useMemo 和 useRef 始終返回相同的對(duì)象，但它仍在重新渲染。請(qǐng)幫忙const useRandomIs5x = () => {  const [state, setState] = useState(0);  useEffect(() => {    const t0 = setInterval(() => {      setState(getRandomValue())    }, 1000)    return () => clearInterval(to)  }, [])  return state % 5 === 0;}const Root = () => {  const bool = useRandomIs5x();  console.log("I'm re-rendering every second", bool)  return <div>test</div>}
查看完整描述

4 回答

?
梵蒂岡之花

TA貢獻(xiàn)1900條經(jīng)驗(yàn) 獲得超5個(gè)贊

我相信如果沒(méi)有一些解決方法，這幾乎是不可能實(shí)現(xiàn)的。要調(diào)用setState或不調(diào)用，我們必須訪問(wèn)當(dāng)前狀態(tài)值。如果我們傳入state依賴數(shù)組，這是可能的。但隨后，該間隔將每秒重新創(chuàng)建。


也可以使用 refs 來(lái)實(shí)現(xiàn)，但是目前還沒(méi)有正確的方法來(lái)監(jiān)聽(tīng)ref 的更改。


更新：看起來(lái)它可以很好地用作useRef以前的數(shù)據(jù)持有者。感謝安豪2。


const { useEffect, useState, useRef } = React;


const useRandomIs5x = () => {

  const [state, setState] = useState(true);

  const ref = useRef(null);

  

  useEffect(() => {

    const t0 = setInterval(() => {

      const value = Math.floor(Math.random() * 5) % 5 === 0;

      if (value === ref.current) return;

      ref.current = value;

      setState(value);

    }, 1000);


    return () => clearInterval(t0);

  }, []);


  return state;

}


const Root = () => {

  const bool = useRandomIs5x();

  console.log('re-render!', bool);

  return <div>test</div>

}


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

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>


<div id="root"></div>


查看完整回答
反對(duì) 回復(fù) 2023-07-20
?
皈依舞

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超3個(gè)贊

我可以使用這個(gè)庫(kù)react-hooks-in-callback來(lái)解決這個(gè)問(wèn)題，?將鉤子與組件隔離。


查看完整回答
反對(duì) 回復(fù) 2023-07-20
?
料青山看我應(yīng)如是

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超8個(gè)贊

您可能需要采取一些不同的方法。你不需要隨機(jī)值，你想要它是否能被 5 整除。所以這就是狀態(tài)并從鉤子返回的內(nèi)容。隨機(jī)值只能作為參考。所以嘗試這樣的事情（代碼未經(jīng)測(cè)試，但應(yīng)該給你一個(gè)總體思路）：


const useRandomIs5x = () => {

    const [divisibleBy5, setDivisibleBy5] = useState(true);

    const randomValue = useRef(0);


    useEffect(() => {

        const t0 = setInterval(() => {

            // Set the new random value into a ref so as to not cause re-render

            randomValue.current = getRandomValue();


            const randIsDivisibleBy5 = randomValue.current % 5 === 0;


            // Only if it changes do we update the boolean state and trigger re-render

            if (randIsDivisibleBy5 !== divisibleBy5) {

                setDivisibleBy5(randIsDivisibleBy5);

            }

        }, 1000);

        

        return () => clearInterval(to);

    }, []);


    // Return the boolean state value instead

    return divisibleBy5;

}


查看完整回答
反對(duì) 回復(fù) 2023-07-20
?
臨摹微笑

TA貢獻(xiàn)1982條經(jīng)驗(yàn) 獲得超2個(gè)贊

我們最好更改狀態(tài)來(lái)存儲(chǔ) is5x 而不是值。一種可能的解決方案是使用 useRef 來(lái)檢查我們是否應(yīng)該每秒更新該值。然后，同步 useRef 和狀態(tài)值。


const useRandomIs5x = () => {

  const [state, setState] = useState(false);

  const prevIs5x = useRef(false);

  useEffect(() => {

    const t0 = setInterval(() => {

      const is5x = getRandomValue() % 5 === 0;

      const isDiff = is5x !== prevIs5x.current;

      prevIs5x.current = is5x;

      if (isDiff) {

        setState((prevState) => !prevState);

      }

    }, 1000);

    return () => clearInterval(t0);

  }, []);

  return state;

};


查看完整回答
反對(duì) 回復(fù) 2023-07-20
  • 4 回答
  • 0 關(guān)注
  • 212 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)