javascript - 使用 React Hooks 卸载组件时如何访问状态？

Question

使用常规的 React 可能会出现这样的情况:

class NoteEditor extends React.PureComponent {

    constructor() {
        super();

        this.state = {
            noteId: 123,
        };
    }

    componentWillUnmount() {
        logger('This note has been closed: ' + this.state.noteId);
    }

    // ... more code to load and save note

}

在 React Hooks 中，可以这样写:

function NoteEditor {
    const [noteId, setNoteId] = useState(123);

    useEffect(() => {
        return () => {
            logger('This note has been closed: ' + noteId); // bug!!
        }
    }, [])

    return '...';
}

从useEffect返回的内容只会在组件卸载之前执行一次，但是状态(如上面的代码)将是陈旧的。

解决方案是将 noteId 作为依赖项传递，但效果将在每次渲染上运行，而不仅仅是一次。或者使用引用，但这很难维护。

那么有没有推荐的模式来使用 React Hook 来实现这一点？

使用常规 React，可以从组件中的任何位置访问状态，但使用 hooks 似乎只有复杂的方法，每种方法都有严重的缺点，或者也许我只是错过了一些东西。

有什么建议吗？

Answer 1

useRef()来救援。

由于 ref 是可变的并且在组件的生命周期内存在，因此我们可以使用它来存储当前值(无论何时更新)，并且仍然可以在 的清理函数中访问该值>useEffect 通过引用的 value .current 属性。

因此，将有一个额外的 useEffect() 来在状态发生变化时保持引用的值更新。

示例片段

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

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

useEffect(() => {
  return function cleanup() {
    console.log(valueRef.current);
  };
}, []);

感谢https://www.timveletta.com/blog/2020-07-14-accessing-react-state-in-your-component-cleanup-with-hooks/的作者。请参阅此链接进行深入研究。