Question

我正尝试使用React Hooks构建一个输入组件，该输入命中远程服务器以仅在组件卸载中保存更新的值。

远程服务器调用很昂贵，所以我不想每次输入更新时都打服务器。

当我在useEffect中使用清理钩子时，需要将输入值包括在效果依赖项数组中，这会使远程API调用在每次更新输入值时执行。如果我没有在效果依赖项数组中包含输入值，则永远不会保存更新的输入值。

这是一个代码沙箱，它显示问题并解释预期的结果：https://codesandbox.io/s/competent-meadow-nzkyv

是否可以使用React钩子来实现？我知道它违反了钩子范式的一部分，但是可以肯定的是，这是一个足够普遍的用例，应该是可能的。

Answer 1

您可以使用ref来捕获文本的变化值，然后可以在另一个useEffect钩子中引用它以保存文本：

const [text, setText] = useState("");
const textRef = React.useRef(text);

React.useEffect( () => {
  textRef.current = text;    
}, [text])

React.useEffect( () => {
  return () => doSomething(textRef.current)
}, [])

Answer 2

thedude的方法是正确的。对于此特定用例进行了一些调整，因为input ref始终相同：

function SavedInput() {
  const inputEl = useRef(null);
  React.useEffect(() => {
    return () => {
      save(inputEl.current.value);
    };
  }, []);

  return (
    <div>
      <input ref={inputEl} />
    </div>
  );
}

通过这种方式，您将避免重新渲染，因为您未设置任何状态。

React Hook-仅在组件卸载上使用效果，而不在依赖项更新时使用

2 个答案: