React Hook与组件内部创建的State生命周期问题

参考代码 #

export const useProcesses = (id: string, token: string, enqueueSnackbar: NotificationFunction) => {
    const [processes, setProcesses] = useState<ProcessDTO[]>([]);
    const [isLoading, setIsLoading] = useState(false);
    const [isError, setIsError] = useState(false);

    useEffect(() => {
        const fetchProcesses = async () => {
            setIsError(false);
            setIsLoading(true);
            try {
                if (id !== undefined) {
                    const response = await new HttpService()
                        .withToken(token)
                        .get(createProcessesPathForIdEndpoint(id), enqueueSnackbar);

                    const data = response.data.data;
                    setProcesses(data);
                    return data;
                }
            } catch {
                setIsError(true);
            }
            setIsLoading(false);
        };

        fetchProcesses();
    }, [enqueueSnackbar, id, token]);
    return [{ processes, isLoading, isError }, setProcesses];
};

疑问 #

• 我编写了一个React Hook，内部通过useState创建了若干状态，并在最后返回这些状态。

1. Hook返回时会被卸载吗？Hook的卸载时机是什么时候？
2. processes、isLoading、isError这些状态在Hook返回后可被使用的时长是多久？

另外，若将Hook替换为在主页面渲染的函数组件，组件内部创建的state（如stateA）的生命周期是多久？是否只要浏览器停留在主页面，该状态就一直存在？

组件的状态可通过页面可视化直观理解，但用于获取数据的Hook的状态生命周期难以把握，恳请解答上述疑问。

解答 #

1. Hook的卸载时机 #

Hook本身不存在“卸载”概念，它完全依附于调用它的组件存在。当调用该Hook的组件被React卸载（比如路由切换导致组件销毁、组件从DOM中移除）时，Hook内部的状态、副作用逻辑才会被清理。Hook的返回动作只是暴露内部状态和方法，不会触发卸载。

2. 内部状态的可用时长 #

processes、isLoading、isError这些状态的生命周期和调用该Hook的组件完全绑定：

• 只要组件处于挂载状态（存在于DOM中），这些状态就会一直保留，可被组件或Hook内部逻辑正常使用；
• 当组件被卸载，这些状态会被React回收，无法再被访问。

替换为函数组件后的状态生命周期 #

如果改成主页面的函数组件，其内部stateA的生命周期同样和组件自身绑定：

• 只要组件处于挂载状态（浏览器停留在主页面且组件未被销毁），stateA就会一直存在；
• 但如果主页面组件因为路由切换、浏览器刷新（刷新会重置所有React状态）、条件渲染被移除等情况被卸载，stateA就会被回收。仅停留在主页面不代表状态一定一直存在，比如主页面内部有条件渲染逻辑，把包含stateA的子组件移除，该子组件的状态也会被销毁。

内容的提问来源于stack exchange，提问作者EBDS