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

Question

我正试图使用React Hooks构建一个输入组件，该组件只在卸载组件时访问远程服务器以保存更新的值。

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

当我在useEffect中使用cleanup hook时，我需要将输入值包含在效果依赖数组中，这使得远程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的方法是正确的。稍微调整了一下，对于这个特殊的用例，因为inputref总是一样的：

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

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