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

Question

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

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

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

这是我想要的：

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

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

eslint-plugin-react-hooks 想要它并导致在每个 state 更改上调度操作的方式：

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

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

除了 useEffect 我还应该使用什么？

Answer 1

即使您以当前方式实现它并禁用 eslint 规则，预期结果也不会正确，因为卸载时调度的 state 值将是初始挂载期间的 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
}, []);