React useEffect 详尽的 deps 仅触发创建组件将卸载功能

Question

我正在尝试实现一个 useEffect 回调以在卸载组件之前调度一个操作。此操作的目的是存储组件的最后状态，以便下次加载该组件时可以从该状态恢复。我只希望在卸载时触发此回调。

当尝试为我的 useEffect 使用空的依赖数组时，“exhaustive-deps”规则会响应推荐的“eslint-plugin-react-hooks”要求，我会包含我试图坚持的值。这会导致每次存储状态时都会触发效果和动作。

有没有更好的方法来处理这种情况，然后禁用这条线的 eslint？

这就是我想要的：

...
const [value, setValue] = useState('');

useEffect(() => {
    return () => {
        storeValueAction(value);
    };
}, []);
...

eslint-plugin-react-hooks 想要的方式并导致在每次状态更改时调度操作：

...
const [value, setValue] = useState('');

useEffect(() => {
    return () => {
        storeValueAction(value);
    };
}, [value, storeValueAction]);
...

除了 useEffect 我还应该使用其他东西吗？

Answer 1

即使你以当前的方式实现它并禁用 eslint 规则，预期的结果也不会正确，因为 unmount 时调度的 state 值将是由于关闭而导致的初始 mount 期间的 state 值。

对于这种情况，您可以使用 useRef 和 useEffect 来实现所需的结果。一旦你这样做了，你就可以安全地禁用 eslint 规则，确保你的代码不会导致意外的行为

const [value, setValue] = useState('');
const valueRef = useRef(value);

useEffect(() => {
   valueRef.current = value;
}, [value]);

useEffect(() => {
    return () => {
        storeValueAction(valueRef.current);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);