为什么在下面的代码中 useEffect 钩子使用花括号，但没有 return 语句，它仍然有效？答案

【问题标题】：Why in the following code useEffect hook uses the curly braces, but without return statement, it still works?为什么在下面的代码中 useEffect 钩子使用花括号，但没有 return 语句，它仍然有效？
【发布时间】：2021-05-22 03:44:10
【问题描述】：

看了When should I use a return statement in ES6 arrow functions这篇文章后，我还是有点疑惑。为什么下面的代码useEffect使用了花括号，但是没有return它仍然有效？不确定我是否误解了某些东西。
这是示例：

import React,{useEffect,useState} from "react"

function App() {
  const [resourcetype,setresourcetype]=useState("posts")

  
  useEffect(()=>{
    console.log("render")
  },[resourcetype])
  
  return (
    <div>
      <button onClick={()=>setresourcetype("try")}>try</button>
      <button onClick={()=>setresourcetype("unknown")}>unknown</button>
    </div>
  );
}

export default App;

【问题讨论】：

标签： javascript reactjs ecmascript-6 react-hooks arrow-functions

【解决方案1】：

与函数声明或表达式一样，带有块的箭头函数的返回语句是可选的。如果省略它，则函数返回undefined

【讨论】：

你的意思是在箭头函数中使用block时不需要添加return？而且没有return箭头函数的block仍然会返回一个未定义的值？

【解决方案2】：

useEffect 是一个 React 钩子，可让您在函数组件中执行副作用。根据您的示例代码，只要resourcetype 变量发生变化，这个useEffect 就会运行。根据useEffect 的文档，它接受一个函数作为参数并执行该函数。根据您的示例代码

 useEffect(()=>{
    console.log("render")
  },[resourcetype])

您传递给useEffect 的函数没有返回任何内容，根据useEffect 的文档，如果您的函数返回另一个函数，则该函数将在您的组件卸载时执行。

 useEffect(()=>{
    console.log("Mounted")
    return () => { console.log("component unmounted")}
  },[])

底线是我们不想/不需要返回任何值（字符串、数字等）从我们传递给useEffect钩子的函数中。

【讨论】：

我记得 useEffect 返回另一个用于清理的函数

【解决方案3】：

以下是有关useEffect 钩子的一些信息：https://reactjs.org/docs/hooks-effect.html

基本上useEffect 充当componentDidMount、componentDidUpdate 和componentWillUnmount。这些函数在组件生命周期的不同部分由 React 调用，并且不需要 return 语句即可工作，因为您可以在没有 return 语句的情况下调用函数，就像使用 return 语句调用函数一样。

【讨论】：