reactjs - 如何在自定义钩子(Hook)中创建一个处理钩子(Hook)内状态的组件？

Question

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

我的尝试基本上做了正确的事情，但拖放没有按预期工作。相反， slider 将 仅更改单击时的值 .我认为问题在于，useState 钩子(Hook)在 X 之外被调用。定义。但是我们如何在钩子(Hook)中创建一个组件，然后我需要在钩子(Hook)的其余部分中处理该内部组件的状态？



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

每当调用自定义钩子(Hook)时(在每次渲染上)，都会创建一个新的 Slider (Broken) 组件。由于创建了一个新组件，因此也重新创建了事件处理程序，并且取消了拖动。您可以通过两种方式解决此问题:

将组件包裹在 useCallback() 中，并通过 value渲染组件时( sandbox ):

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

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

在钩子(Hook)中渲染组件，并在组件中使用包含它( sandbox ):

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>