React 16+中useEffect清理函数返回值是否存在陷阱？

你提到的两种useEffect清理函数写法都是完全正确的，不存在返回undefined的问题，先给你明确结论：

两种写法的等价性 #

1. 带花括号的标准写法 #

这种写法适合清理逻辑有多条语句的场景，逻辑清晰、可读性强：

useEffect(() => {
  // 初始化逻辑代码

  // 清理函数
  return () => {
    connection.disconnect();
  }
}, []);

2. 省略花括号的简洁写法 #

当清理逻辑只有单条语句时，可以用箭头函数的简洁写法——省略花括号后，语句的结果会自动作为返回值，本质和第一种写法完全一致：

useEffect(() => {
  // 初始化逻辑代码

  // 清理函数
  return () => connection.disconnect();
}, []);

关于Dan Abramov提到的“返回undefined有问题”的澄清 #

这里是表述上的误解，正确的规则是：
useEffect的回调函数只能返回两种值：

• 一个函数（即清理函数），用于执行副作用的清理操作；
• undefined（即不返回任何值），表示不需要清理逻辑。

如果回调函数返回了既不是函数也不是undefined的值（比如数字、字符串、对象等），才会触发React的警告或运行问题。你给出的两种写法都返回了一个函数，完全符合React的要求，不会有任何问题。

正确编写清理函数的总结 #

• 当需要清理副作用时，确保useEffect的回调函数返回一个函数，这个函数内部写你的清理逻辑：
  • 清理逻辑复杂时用带花括号的写法；
  • 单条清理语句时可以用简洁写法；
• 不需要清理时，回调函数可以不返回任何值（默认返回undefined），这也是合法的。

内容的提问来源于stack exchange，提问作者Evgeniy S.