无需重新渲染父组件即可访问子组件数据

Question

我有一个包含图表的父组件和 2 个滑块，它们定义了将在图表上使用的数据。

我希望图表仅在单击应用按钮时使用滑块中的新值重新呈现。

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

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

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

嗯可能 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）的方法是拥有一个占位符状态，只有在您单击应用按钮时才会填充该状态。

Answer 2

最好的方法是将滑块值放入 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}
            />
            <Slider onChange={setSlider1Value}/>
            <Slider onChange={setSlider2Value}/>
            <button onClick={updateChartValues}>Apply</button>
        </div>
     );     
}