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

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)
}, [])