React的useEffect中() => () => {}双箭头函数的含义及作用是什么？

1. 双箭头函数的含义 #

这是箭头函数嵌套的简写形式，本质就是普通的「函数返回函数」写法，你贴的代码和下面这段完全等效：

useEffect(
  function () {
    // 第一个函数执行后，返回第二个函数
    return function () {
      dispatch(fetchData());
    };
  },
  []
);

箭头函数如果不用大括号包裹函数体，会直接把后面表达式的结果作为返回值，所以连续两个箭头就省略了第一层的return写法，语法上更简洁。

2. 这段代码的实际作用 #

这段是React的useEffect Hook的用法，useEffect的运行规则如下：

• 接收的第一个回调如果返回了函数，这个返回值会被识别为清理函数
• 第二个参数是空数组[]，代表这个Effect只会在组件首次挂载、卸载两个节点触发
  所以你贴的这段代码最终效果是：仅在组件卸载的时候执行dispatch(fetchData())逻辑。
  如果你的预期是组件挂载时就拉取数据，那就是写法错了，正确的挂载发请求的写法如下：

useEffect(
  () => {
    dispatch(fetchData());
  },
  []
);

3. 这种返回函数的设计原因 #

React 对useEffect的设计，就是为了把副作用的创建和销毁逻辑放在同一个地方维护，避免出现内存泄漏或者状态异常的问题。常见的清理函数使用场景包括：

• 组件卸载时取消还没完成的网络请求
• 移除绑定在window、document上的全局事件监听
• 清理运行中的定时器、延时器
• 组件销毁时同步更新全局状态
  你这段代码的场景大概率是业务要求组件卸载时需要拉取一次最新数据同步全局状态，所以才把请求逻辑放在清理函数里。

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