useEffect清理函数执行顺序：组件卸载时最终URL及执行规则是什么

问题相关代码 #

useEffect(() => {
  return history.replace({
    pathname: "path/A",
  });
}, []);

useEffect(() => {
  return history.replace({
    pathname: "path/B",
  });
}, []);

1. 组件卸载时的最终URL #

最终URL是 path/A。

2. 结果逻辑说明 #

• useEffect 返回的函数就是React组件卸载时会触发的清理函数。
• React对同组件内useEffect清理函数的执行规则是严格按照声明顺序逆序执行：先定义的useEffect，它的清理函数后触发；后定义的useEffect，清理函数先触发。
• 上述代码先声明了跳转path/A的useEffect，后声明了跳转path/B的useEffect。卸载时会先执行跳转path/B的逻辑，再执行跳转path/A的逻辑，后调用的history.replace会覆盖之前的路由状态，因此最终路由为path/A。

3. 清理函数执行顺序的决定因素 #

仅由useEffect在组件代码中的声明顺序决定，和依赖项数组的内容、是否为空都没有关系，同组件内的所有useEffect清理函数统一遵循「声明逆序执行」的规则。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture