如何在自定义钩子中创建一个组件来处理钩子中的状态？

Question

如何在自定义钩子中创建组件，钩子保存组件的状态？

我的尝试基本上是正确的，但是拖放并没有像预期的那样工作。相反，滑块只会在单击时更改值。我认为问题在于，useState钩子在X定义之外被调用。但是我们如何在钩子中创建一个组件，然后我需要在钩子的其余部分中处理该内部组件的状态？

https://codesandbox.io/s/material-demo-milu3?file=/demo.js:0-391

import React from "react";
import Slider from "@material-ui/core/Slider";

function useComp() {
  const [value, setValue] = React.useState(30);
  const X = () => <Slider value={value} onChange={(_, v) => setValue(v)} />;
  return { X, value };
}

export default function ContinuousSlider() {
  const { X, value } = useComp();
  return (
    <div>
      {value}
      <X />
    </div>
  );
}

Answer 1

每当调用自定义挂钩（在每个渲染上）时，都会创建一个新的滑块（断开的）组件。由于创建了一个新组件，因此事件处理程序也将重新创建，并取消拖动。您可以通过两种方式解决此问题：

将组件包装在useCallback（）中，并在呈现组件时传递值（沙盒）：

  const Broken = useCallback(({ value }) => (
    <Slider value={value} onChange={changeHandler} />
  ), [changeHandler]);

  // usage
  <Broken value={broken} />

在钩子中渲染组件，并使用“将其包含在组件（沙箱）”命令：

function useComp() {
  const [broken, setBroken] = React.useState(30);

  const changeHandler = useCallback((_, v) => setBroken(v), []);

  const slider = <Slider value={broken} onChange={changeHandler} />;

  return { slider, broken };
}

// usage

<div>
  Broken: {broken}
  {slider}
  OK: {ok}
  <Slider value={ok} onChange={(_, v) => setOk(v)} />
</div>