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

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,  { 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>

     );     

}

Answer 2

嗯，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）方法是设置一个占位符状态，仅当您单击“应用”按钮时才会填充该状态。