React应用中MUI Slider值变更引发Chrome页面无响应问题求助

看起来你的问题出在回调函数的依赖管理和状态更新方式上，滑块拖动时会连续触发onChange，当前的代码逻辑会导致频繁的回调重建和状态更新，最终阻塞主线程引发页面无响应。

问题根源分析 #

• handleRangeChange的依赖陷阱：你把sensorConfigurations放进了useCallback的依赖数组，每次状态更新这个回调就会重新创建。而handleTemperatureChange又依赖handleRangeChange，这会导致组件在滑块拖动时频繁重渲染，甚至可能触发隐性的更新循环。
• 状态更新的闭包问题：直接使用...sensorConfigurations来更新状态，可能会捕获到旧的状态值（因为闭包特性），在连续触发更新时容易导致状态不一致，进一步加重性能负担。

修复方案 #

修改你的回调函数和状态更新逻辑，改用函数式状态更新并优化依赖：

const handleRangeChange = useCallback(
  (sensorConfiguration) => {
    // 使用函数式更新，确保基于最新状态修改
    setSensorConfigurations(prevState => ({
      ...prevState,
      ...sensorConfiguration,
    }));
    onChange({
      target: {
        name: name,
        value: {
          ...sensorConfigurations,
          ...sensorConfiguration,
        },
      },
    });
  },
  // 移除sensorConfigurations依赖，改用函数式更新后不需要它了
  [name, onChange]
);

const handleTemperatureChange = useCallback(
  (value) => {
    handleRangeChange({ TEMPERATURE: value });
  },
  [handleRangeChange]
);

如果onChange需要的是绝对最新的状态值，也可以把状态更新和onChange的参数生成结合起来，避免闭包问题：

const handleRangeChange = useCallback(
  (sensorConfiguration) => {
    setSensorConfigurations(prevState => {
      const newState = {
        ...prevState,
        ...sensorConfiguration,
      };
      // 在这里生成最新的状态值传给onChange
      onChange({
        target: {
          name: name,
          value: newState,
        },
      });
      return newState;
    });
  },
  [name, onChange]
);

为什么这样能解决问题？ #

• 函数式状态更新：通过prevState获取最新的状态值，避免了闭包捕获旧状态的问题，同时不需要把sensorConfigurations放进依赖数组，减少了回调函数的重建次数。
• 减少不必要的重渲染：handleRangeChange现在只会在name或onChange变化时重建，滑块拖动时不会频繁生成新的回调，大幅降低了主线程的负担，避免页面无响应。

另外，如果你不需要实时响应滑块拖动过程的每一次变化，可以考虑使用MUI Slider的onChangeCommitted事件来处理最终的状态确认，进一步减少更新频率。

内容的提问来源于stack exchange，提问作者Akshay phalphale