访问子组件数据而不重新渲染父组件

Question

我有一个父组件，其中包含一个图表和两个定义图表上使用的数据的滑块。

我希望图表仅在单击“应用”按钮时使用滑块中的新值重新渲染。

我当前遇到的问题是，如果我从父级管理滑块的状态，则每次滑块更改值时父级都会重新渲染。

我正在寻找一种方法，可以让滑块保持自己的状态，并且仅在单击“应用”按钮时重新渲染父组件。有没有人有什么建议？

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>

   );     

}

Answer 1

最好的方法是将滑块值放入 refs 中，因此更改它们不会重新渲染父级，然后单击按钮更新包含当前图表值的状态值。像这样的东西：import React,&nbsp; { useCallback, useState, useRef } from 'react';const Parent = () => {&nbsp; &nbsp; const slider1Value = useRef(0);&nbsp; &nbsp; const slider2Value = useRef(0);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; const setSlider1Value = useCallback((value) => {&nbsp; &nbsp; &nbsp; &nbsp; slider1Value.current = value;&nbsp; &nbsp; }, []);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; const setSlider2Value = useCallback((value) => {&nbsp; &nbsp; &nbsp; &nbsp; slider2Value.current = value;&nbsp; &nbsp; }, []);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; const [chartValues, setChartValues] = useState({ chart1: 0, chart2: 0 });&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; const updateChartValues = useCallback(() => {&nbsp; &nbsp; &nbsp; &nbsp; setChartValues({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chart1: slider1Value.current,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chart2: slider2Value.current&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }, []);&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Chart&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value1={chartValues.chart1}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value2={chartValues.chart2}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Slider onChange={setSlider1Value}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Slider onChange={setSlider2Value}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={updateChartValues}>Apply</button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp;);&nbsp; &nbsp; &nbsp;}

Answer 2

嗯，React.memo 可能是你最好的选择。像这样的事情function RenderChart(slider1Value, slider2Value){return (&nbsp; &nbsp; &nbsp;<Chart&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value1={slider1Value}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value2={slider2Value}&nbsp; &nbsp; &nbsp; &nbsp;/>)}function Parent() {&nbsp; const useState [slider1Value, setSlider1Value] = useState(0);&nbsp; const useState [slider2Value, setSlider2Value] = useState(0);&nbsp; const useState [apply, setApply] = useState(0);&nbsp; const renderedChart = useMemo(() => RenderChart(slider1Value, slider2Value), [apply])&nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp;<div>&nbsp; &nbsp; &nbsp; &nbsp; {renderedChart}&nbsp; &nbsp; &nbsp; &nbsp;<Slider onChange={setSlider1Value}/>&nbsp; &nbsp; &nbsp; &nbsp;<Slider onChange={setSlider2Value}/>&nbsp; &nbsp; &nbsp; &nbsp;<button onClick={()=> setApply(true)}>Apply</button>&nbsp; &nbsp; &nbsp;<div>&nbsp; &nbsp;);&nbsp; &nbsp; &nbsp;}没有时间测试，但这对我来说就是这样的另一种可能的（hacky）方法是设置一个占位符状态，仅当您单击“应用”按钮时才会填充该状态。