我正在尝试实现一个useEffect回调，以便在卸载组件之前调度一个操作。此操作的目的是存储我的组件的最后一个状态，以便下次加载此组件时可以从该状态恢复。我只希望在卸载时触发此回调。
当尝试使用空的依赖数组进行useEffect时，reactions中的"穷举deps"规则推荐的"eslint-plugin-react hooks"要求我包含我试图持久化的值。这导致每次我存储状态时都会触发效果和操作。
有没有比禁用该行的esint更好的方法来处理这种情况？
这是我想要的：
...
const [value, setValue] = useState('');
useEffect(() => {
return () => {
storeValueAction(value);
};
}, []);
...
eslint插件的反应方式挂钩想要它，并导致在每次状态更改时都要调度操作：
...
const [value, setValue] = useState('');
useEffect(() => {
return () => {
storeValueAction(value);
};
}, [value, storeValueAction]);
...
除了useEffect之外，还有其他东西我应该用来做这个吗？
即使以当前方式实现并禁用esint规则，预期结果也不会正确，因为卸载时调度的状态值将是由于关闭而导致的初始装载期间的状态值。
对于这种情况，可以使用useRef和useEffect来获得所需的结果。一旦你这样做了，你就可以安全地禁用esint规则，确保你的代码不会导致意外的行为
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
}, []);