首頁猿問訪問子組件數據而不重新渲染父組件

訪問子組件數據而不重新渲染父組件

JavaScript

白板的微信 2023-07-20 17:12:45

我有一個父組件，其中包含一個圖表和兩個定義圖表上使用的數據的滑塊。我希望圖表僅在單擊“應用”按鈕時使用滑塊中的新值重新渲染。我當前遇到的問題是，如果我從父級管理滑塊的狀態，則每次滑塊更改值時父級都會重新渲染。我正在尋找一種方法，可以讓滑塊保持自己的狀態，并且僅在單擊“應用”按鈕時重新渲染父組件。有沒有人有什么建議？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條經驗獲得超8個贊

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

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}

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

</div>

);

}

反對回復 2023-07-20

蝴蝶不菲

TA貢獻1810條經驗獲得超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}

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

<div>

);

}

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

另一種可能的（hacky）方法是設置一個占位符狀態，僅當您單擊“應用”按鈕時才會填充該狀態。

反對回復 2023-07-20

2 回答
0 關注
200 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

訪問子組件數據而不重新渲染父組件

訪問子組件數據而不重新渲染父組件

2 回答

添加回答