React自定义Hook实现Slider滑块拖动异常问题求助

我帮你分析下问题所在：你遇到的拖动卡顿、只能移动一步的情况，根源是自定义Hook内部每次状态更新都会重新创建CustomSlider组件。当你拖动滑块触发setState时，useSlider会重新执行，生成一个全新的CustomSlider函数，React会把旧的Slider组件卸载再挂载新的，这直接打断了滑块的鼠标事件追踪，所以拖动动作就“断”了。

接下来给你两种修复方案，你可以根据自己的封装需求选择：

方案一：保持Hook封装，缓存组件避免重复创建 #

修改你的slider.js，把CustomSlider改成独立组件，通过props接收状态和回调，这样就不会因为state更新而重新创建组件：

import React, { useState } from "react";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Slider from "@material-ui/core/Slider";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles(theme => ({
  root: {
    width: 300 + 2 * theme.spacing(2),
    padding: theme.spacing(2)
  },
  margin: {
    height: theme.spacing(1)
  }
}));

const PrettoSlider = withStyles({
  root: {
    color: "#52af77",
    height: 8
  },
  thumb: {
    height: 24,
    width: 24,
    backgroundColor: "#fff",
    border: "2px solid currentColor",
    marginTop: -8,
    marginLeft: -12,
    "&:focus, &:hover, &$active": {
      boxShadow: "inherit"
    }
  },
  active: {},
  valueLabel: {
    left: "calc(-50% + 4px)"
  },
  track: {
    height: 8,
    borderRadius: 4
  },
  rail: {
    height: 8,
    borderRadius: 4
  }
})(Slider);

// 独立的CustomSlider组件，通过props接收所需参数
const CustomSlider = ({ label, value, onChange, classes }) => {
  return (
    <Paper className={classes.root}>
      <div className={classes.margin} />
      <Typography gutterBottom>{label}</Typography>
      <PrettoSlider
        valueLabelDisplay="auto"
        aria-label="pretto slider"
        value={value}
        onChange={(event, v) => onChange(v)}
      />
    </Paper>
  );
};

export default function useSlider(label, defaultState) {
  const classes = useStyles();
  const [state, setState] = useState(defaultState);

  // 返回一个稳定的组件渲染函数
  const SliderComponent = () => (
    <CustomSlider 
      label={label}
      value={state}
      onChange={setState}
      classes={classes}
    />
  );

  return [SliderComponent, state];
}

demo.js可以保持原样不变，这样修改后，CustomSlider不会再被重复创建，拖动时就能流畅追踪鼠标事件了。

方案二：拆分职责，Hook只管理状态 #

如果你的封装需求允许，更推荐这种方式：让Hook只负责滑块的状态管理，UI渲染交给独立的组件，职责更清晰：

修改slider.js： #

import React, { useState } from "react";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Slider from "@material-ui/core/Slider";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles(theme => ({
  root: {
    width: 300 + 2 * theme.spacing(2),
    padding: theme.spacing(2)
  },
  margin: {
    height: theme.spacing(1)
  }
}));

const PrettoSlider = withStyles({
  root: {
    color: "#52af77",
    height: 8
  },
  thumb: {
    height: 24,
    width: 24,
    backgroundColor: "#fff",
    border: "2px solid currentColor",
    marginTop: -8,
    marginLeft: -12,
    "&:focus, &:hover, &$active": {
      boxShadow: "inherit"
    }
  },
  active: {},
  valueLabel: {
    left: "calc(-50% + 4px)"
  },
  track: {
    height: 8,
    borderRadius: 4
  },
  rail: {
    height: 8,
    borderRadius: 4
  }
})(Slider);

// 导出独立的CustomSlider组件
export const CustomSlider = ({ label, value, onChange }) => {
  const classes = useStyles();
  return (
    <Paper className={classes.root}>
      <div className={classes.margin} />
      <Typography gutterBottom>{label}</Typography>
      <PrettoSlider
        valueLabelDisplay="auto"
        aria-label="pretto slider"
        value={value}
        onChange={(event, v) => onChange(v)}
      />
    </Paper>
  );
};

// Hook只负责状态管理
export default function useSlider(defaultState) {
  const [state, setState] = useState(defaultState);
  return [state, setState];
}

修改demo.js： #

import React, { useEffect } from "react";
import useSlider, { CustomSlider } from "./slider";

function CustomizedSlider() {
  const [sliderValue, setSliderValue] = useSlider(50);
  
  useEffect(() => {
    console.log("Slider value: " + sliderValue);
  }, [sliderValue]);
  
  return <CustomSlider label="Slider" value={sliderValue} onChange={setSliderValue} />;
}

export default CustomizedSlider;

这样拆分后，状态管理和UI渲染完全分离，不仅解决了拖动问题，代码的可维护性也更好。

不管选哪种方案，核心都是避免在Hook内部重复创建组件，保证组件的稳定性，这样滑块的交互事件就能正常持续追踪了。

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