Question

是否有人在React 16.8中为useState挂钩的更新部分创建了同步回调？我一直在寻找一个这样的东西，以便我可以使用第3方库处理同步动作，而我似乎无法满足我的需求。

如果有人对成功完成此操作的人有任何提及，请在此处添加。

干杯

Answer 1

有了钩子，您不再需要setState函数的回调。现在，您可以使用useState钩子设置状态，并使用useEffect钩子监听其值以进行更新。 useEffect挂钩的可选第二个参数采用一组值来侦听更改。在下面的示例中，我们仅监视一个值的更改：

const Example = () => {
  const [value, setValue] = useState(null);

  useEffect(() => {
    // do something when value changes
  }, [value]);

  return (
    <button onClick={setValue('Clicked!')}>
      Click Me!
    <button>
  );
};

详细了解useEffect钩here。

Answer 2

您可以使用useEffect / useLayoutEffect实现此目的：

const SomeComponent = () => {
  const [count, setCount] = React.useState(0)

  React.useEffect(() => {
    if (count > 1) {
      document.title = 'Threshold of over 1 reached.';
    } else {
      document.title = 'No threshold reached.';
    }
  }, [count]);

  return (
    <div>
      <p>{count}</p>

      <button type="button" onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
};

如果您要寻找一种开箱即用的解决方案，请签出this custom hook，其用途类似于useState，但接受回调函数作为第二个参数：

import useStateWithCallback from 'use-state-with-callback';

const SomeOtherComponent = () => {
  const [count, setCount] = useStateWithCallback(0, count => {
    if (count > 1) {
      document.title = 'Threshold of over 1 reached.';
    } else {
      document.title = 'No threshold reached.';
    }
  });

  return (
    <div>
      <p>{count}</p>

      <button type="button" onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
};

可以通过npm install use-state-with-callback

安装

如果要进行同步布局更新，请改用import { useStateWithCallbackInstant } from 'use-state-with-callback';。

如何从useState挂钩访问setState中的回调

2 个答案: