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

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

訪問子組件數(shù)據(jù)而不重新渲染父組件

訪問子組件數(shù)據(jù)而不重新渲染父組件

白板的微信 2023-07-20 17:12:45
我有一個父組件，其中包含一個圖表和兩個定義圖表上使用的數(shù)據(jù)的滑塊。我希望圖表僅在單擊“應(yīng)用”按鈕時使用滑塊中的新值重新渲染。我當(dāng)前遇到的問題是，如果我從父級管理滑塊的狀態(tài)，則每次滑塊更改值時父級都會重新渲染。我正在尋找一種方法，可以讓滑塊保持自己的狀態(tài)，并且僅在單擊“應(yīng)用”按鈕時重新渲染父組件。有沒有人有什么建議？function Parent() {  const useState [slider1Value, setSlider1Value] = useState(0);  const useState [slider2Value, setSlider2Value] = useState(0);   return (     <div>       <Chart         value1={slider1Value}         value2={slider2Value}       />       <Slider onChange={setSlider1Value}/>       <Slider onChange={setSlider2Value}/>       <button>Apply</button>     <div>   );     }
查看完整描述

2 回答

?
寶慕林4294392

TA貢獻2021條經(jīng)驗 獲得超8個贊

最好的方法是將滑塊值放入 refs 中，因此更改它們不會重新渲染父級，然后單擊按鈕更新包含當(dāng)前圖表值的狀態(tài)值。像這樣的東西：


import React,  { useCallback, useState, useRef } from 'react';


const Parent = () => {

    const slider1Value = useRef(0);

    const slider2Value = useRef(0);

    

    const setSlider1Value = useCallback((value) => {

        slider1Value.current = value;

    }, []);

    

    const setSlider2Value = useCallback((value) => {

        slider2Value.current = value;

    }, []);

    

    const [chartValues, setChartValues] = useState({ chart1: 0, chart2: 0 });

    

    const updateChartValues = useCallback(() => {

        setChartValues({

            chart1: slider1Value.current,

            chart2: slider2Value.current

        });

    }, []);


    return (

        <div>

            <Chart

                value1={chartValues.chart1}

                value2={chartValues.chart2}

            />

            <Slider onChange={setSlider1Value}/>

            <Slider onChange={setSlider2Value}/>

            <button onClick={updateChartValues}>Apply</button>

        </div>

     );     

}


查看完整回答
反對 回復(fù) 2023-07-20
?
蝴蝶不菲

TA貢獻1810條經(jīng)驗 獲得超4個贊

嗯，React.memo 可能是你最好的選擇。像這樣的事情


function RenderChart(slider1Value, slider2Value){

return (

     <Chart

         value1={slider1Value}

         value2={slider2Value}

       />

)

}


function Parent() {

  const useState [slider1Value, setSlider1Value] = useState(0);

  const useState [slider2Value, setSlider2Value] = useState(0);

  const useState [apply, setApply] = useState(0);

  const renderedChart = useMemo(() => RenderChart(slider1Value, slider2Value), [apply])

   return (

     <div>

        {renderedChart}

       <Slider onChange={setSlider1Value}/>

       <Slider onChange={setSlider2Value}/>

       <button onClick={()=> setApply(true)}>Apply</button>

     <div>

   );     

}

沒有時間測試，但這對我來說就是這樣的


另一種可能的（hacky）方法是設(shè)置一個占位符狀態(tài)，僅當(dāng)您單擊“應(yīng)用”按鈕時才會填充該狀態(tài)。


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

添加回答

舉報

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號

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